In this tutorial we will simply create a layout file for showing profile information of a user or contact in your android application. This layout can be used in any activity or fragment. We will created a profile imageview in a circular shape or image cropped in rounded shape using a library which we will include in build.gradle file.
Add following to your dependencies section of app level build.gradle file and Sync the project.
compile 'de.hdodenhof:circleimageview:2.1.0'
Copy the given contents of below file in any layout of your activity or fragment.
<?xml version="1.0" encoding="utf-8"?> <ScrollView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent"> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/layout"> <ImageView android:id="@+id/header_cover_image" android:layout_width="match_parent" android:layout_height="150dp" android:background="?attr/selectableItemBackgroundBorderless" android:scaleType="centerCrop" android:src="@drawable/nav_menu_header_bg" app:srcCompat="@drawable/nav_menu_header_bg" /> <de.hdodenhof.circleimageview.CircleImageView xmlns:app="http://schemas.android.com/apk/res-auto" android:clickable="true" app:civ_border_width="3dp" app:civ_border_color="#FFFFFFFF" android:id="@+id/profile" android:layout_width="200dp" android:layout_height="200dp" android:layout_below="@+id/header_cover_image" android:layout_centerHorizontal="true" android:layout_marginTop="-130dp" android:elevation="5dp" android:padding="20dp" android:scaleType="centerCrop" android:src="@drawable/man" /> <RelativeLayout android:id="@+id/profile_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@+id/header_cover_image" android:background="#ebca0707" android:elevation="4dp" android:paddingBottom="24dp"> <ImageView android:id="@+id/edit" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_marginLeft="16dp" android:layout_marginRight="16dp" android:layout_marginTop="16dp" android:clickable="true" android:src="@android:drawable/ic_menu_edit" /> <TextView android:id="@+id/name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_marginTop="70dp" android:text="Laxman Marothiya" android:textColor="#fff" android:textSize="24sp" android:textStyle="bold" /> <TextView android:id="@+id/location" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/designation" android:layout_centerHorizontal="true" android:layout_marginTop="10dp" android:text="Surat" android:textColor="#fff" android:textSize="16sp" /> <TextView android:id="@+id/designation" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/name" android:layout_centerHorizontal="true" android:layout_marginTop="10dp" android:text="(Adhyaksh)" android:textColor="#fff" android:textSize="18sp" /> </RelativeLayout> <android.support.constraint.ConstraintLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@+id/profile_layout" android:layout_margin="5dp" android:layout_marginTop="5dp" android:background="#fff" android:elevation="4dp" android:orientation="vertical" android:paddingTop="20dp" android:paddingBottom="20dp" android:paddingRight="5dp" android:paddingLeft="5dp" > <TextView android:id="@+id/textView5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="5dp" android:clickable="true" android:text="Education: " android:textStyle="bold" android:layout_marginLeft="25dp" app:layout_constraintLeft_toLeftOf="parent" android:layout_marginTop="8dp" app:layout_constraintTop_toBottomOf="@+id/textView10" /> <TextView android:id="@+id/textView7" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="5dp" android:clickable="true" android:text="Work: " android:textStyle="bold" android:layout_marginLeft="8dp" app:layout_constraintLeft_toLeftOf="parent" android:layout_marginTop="8dp" app:layout_constraintTop_toBottomOf="@+id/textView5" /> <TextView android:id="@+id/textView16" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="5dp" android:clickable="true" android:text="DOB: " android:textStyle="bold" app:layout_constraintTop_toBottomOf="@+id/textView15" android:layout_marginLeft="8dp" app:layout_constraintLeft_toLeftOf="parent" /> <TextView android:id="@+id/textView15" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="4dp" android:clickable="true" android:text="Marriage:" android:textStyle="bold" app:layout_constraintTop_toBottomOf="@+id/textView11" android:layout_marginLeft="8dp" app:layout_constraintLeft_toLeftOf="parent" /> <TextView android:id="@+id/textView11" android:layout_width="wrap_content" android:layout_height="wrap_content" android:clickable="true" android:text="Gender: " android:textStyle="bold" android:layout_margin="5dp" android:layout_marginLeft="10dp" app:layout_constraintLeft_toLeftOf="parent" android:layout_marginTop="8dp" app:layout_constraintTop_toBottomOf="@+id/textView22" /> <TextView android:id="@+id/textView10" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="5dp" android:layout_marginLeft="8dp" android:layout_marginTop="8dp" android:clickable="true" android:text="Blood Group: " android:textStyle="bold" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintTop_toTopOf="parent" /> <TextView android:id="@+id/blood_group" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="5dp" android:clickable="true" android:text="O+" app:layout_constraintLeft_toRightOf="@+id/textView10" android:layout_marginLeft="8dp" app:layout_constraintTop_toTopOf="parent" android:layout_marginTop="8dp" /> <TextView android:id="@+id/dob" android:layout_width="wrap_content" android:layout_height="wrap_content" android:clickable="true" android:text="01/01/2017" android:layout_margin="5dp" android:layout_marginLeft="8dp" android:layout_marginTop="8dp" app:layout_constraintTop_toBottomOf="@+id/marriage" app:layout_constraintLeft_toRightOf="@+id/textView16" /> <TextView android:id="@+id/marriage" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="8dp" android:layout_marginTop="5dp" android:clickable="true" android:text="Married" app:layout_constraintLeft_toRightOf="@+id/textView15" app:layout_constraintTop_toBottomOf="@+id/gender" /> <TextView android:id="@+id/gender" android:layout_width="wrap_content" android:layout_height="wrap_content" android:clickable="true" android:text="Male" app:layout_constraintLeft_toRightOf="@+id/textView11" android:layout_margin="5dp" android:layout_marginLeft="5dp" android:layout_marginTop="8dp" app:layout_constraintTop_toBottomOf="@+id/mobileNumber" /> <TextView android:id="@+id/occupation" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="5dp" android:layout_marginLeft="5dp" android:layout_marginTop="8dp" android:clickable="true" android:text="Business" app:layout_constraintLeft_toRightOf="@+id/textView7" app:layout_constraintTop_toBottomOf="@+id/textView5" /> <TextView android:id="@+id/mobileNumber" android:layout_width="wrap_content" android:layout_height="wrap_content" android:clickable="true" android:text="9876543210" android:layout_margin="5dp" android:layout_marginLeft="5dp" android:layout_marginTop="8dp" app:layout_constraintTop_toBottomOf="@+id/occupation" app:layout_constraintLeft_toRightOf="@+id/textView22" /> <TextView android:id="@+id/approved_by" android:layout_width="wrap_content" android:layout_height="wrap_content" android:clickable="true" android:text="ABCD XYZ" app:layout_constraintLeft_toRightOf="@+id/textView26" android:layout_marginLeft="8dp" android:layout_marginTop="8dp" app:layout_constraintTop_toBottomOf="@+id/email" /> <TextView android:id="@+id/email" android:layout_width="wrap_content" android:layout_height="wrap_content" android:clickable="true" android:text="marothiatechs@gmail.com" app:layout_constraintLeft_toRightOf="@+id/textView27" android:layout_marginLeft="8dp" android:layout_marginTop="0dp" app:layout_constraintTop_toBottomOf="@+id/dob" /> <TextView android:id="@+id/textView26" android:layout_width="wrap_content" android:layout_height="wrap_content" android:clickable="true" android:text="Approved by: " android:textStyle="bold" android:layout_marginLeft="8dp" android:layout_marginTop="5dp" app:layout_constraintTop_toBottomOf="@+id/textView27" app:layout_constraintLeft_toLeftOf="parent" /> <TextView android:id="@+id/textView27" android:layout_width="wrap_content" android:layout_height="wrap_content" android:clickable="true" android:text="Email: " android:textStyle="bold" android:layout_marginTop="5dp" app:layout_constraintTop_toBottomOf="@+id/textView16" android:layout_marginLeft="8dp" app:layout_constraintLeft_toLeftOf="parent" /> <TextView android:id="@+id/textView22" android:layout_width="wrap_content" android:layout_height="wrap_content" android:clickable="true" android:text="Mobile: " android:textStyle="bold" android:layout_margin="5dp" android:layout_marginLeft="8dp" android:layout_marginTop="5dp" app:layout_constraintTop_toBottomOf="@+id/textView7" app:layout_constraintLeft_toLeftOf="parent" /> <TextView android:id="@+id/education" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="5dp" android:clickable="true" android:text="B.Tech" android:layout_marginTop="8dp" app:layout_constraintTop_toBottomOf="@+id/textView10" app:layout_constraintLeft_toRightOf="@+id/textView5" android:layout_marginLeft="8dp" /> </android.support.constraint.ConstraintLayout> </RelativeLayout> </ScrollView>
Add the following files to your projects res/drawable directory:

man.jpg

nav_menu_header_bg.png
Thats it! Just run your activity or fragment to test the about layout.
44,599 total views, 1 views today
(Visited 34,247 times, 1 visits today)