Android Profile Activity Layout Sample Example Tutorial

By | September 17, 2017

android profile
 

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.

1,115 total views, 19 views today

(Visited 533 times, 19 visits today)