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.
21,325 total views, 5 views today
(Visited 18,300 times, 5 visits today)