Android | Designing WhatsApp-Like User Profile Screen

android-whatsapp-profile-screen-0This is an interesting post showing how to design an activity screen similar to user profile setting screen in WhatsApp Android app. Tips and tricks covered here are can be very helpful when designing your Android apps.

Objectives:

  • How to set views dimensions using percentage-like sizes “weight”?
  • How to add round borders to ImageView?
  • How to overlay ImageViews on top of each other?
  • How to add shadows to the views?
  • How to use Shape, Layer-List & State List drawables?

( 1 ) Main layout structure

Assigning view dimensions in percentage can be achieve by using “weight” where a parent view defines its total weight or “WeightSum” and inner “child” views define their weight. The total of children views should be less than or equal to parent WeightSum.

The structure of the activity layout consists of a root “parent” LinearLayout with “WeightSum = 2” and two child RelativeLayout with wight 1.5 & .25 respectively. Note that we still have .25 out of the total weight sum.

android-whatsapp-profile-screen-structure

  • res/layout/activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.hmkcode.nearpime.activities.NewPostActivity"
    android:weightSum="2"
    android:orientation="vertical" >

	<RelativeLayout
    	android:layout_weight="1.5"   
      	android:layout_width="match_parent"
      	android:layout_height="0dp">
         	    
	</RelativeLayout>
	    

	<RelativeLayout
		android:layout_width="wrap_content"
     	android:layout_height="0dp"
     		android:layout_weight="0.25"
     	android:layout_marginTop="@dimen/activity_vertical_margin">
        
	</RelativeLayout>
</LinearLayout>

Notice: the height of the RelativeLayout is set to “0dp”, because the weight here is representing the height.

( 2 ) Add an ImageView for “balloon” image

  • In the first child RelativeLayout add an ImageView
  • Set width and height to match parent.
  • To make the image fit the whole ImageView set scaleType=”fitXY”
  • Set padding to 1dp. This is to hide sharp edges behind the round border next.
<ImageView 
       	        android:layout_width="match_parent"
       	        android:layout_height="match_parent"
       	        android:src="@drawable/balloon"
       	        android:scaleType="fitXY"
       	        android:contentDescription="Main Image"
       	        android:padding="1dp"/>

android-whatsapp-profile-screen-2( 3 ) Add an ImageView to create border for “balloon” image & create shape XML file to draw the border

  • Add a second ImageView inside first RelativeLayout and after the first ImageView.
  • Set width and height to match parent.
  • Set the background to the XML shape file “image_border.xml”
<ImageView 
       	        android:layout_width="match_parent"
       	        android:layout_height="match_parent"
       	        android:background="@drawable/image_border"
       	        android:contentDescription="Image Border"       	        
       	        android:padding="0dp"/>
  • res/drawable/image_border.xml
<!-- image_border.xml -->
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
	<stroke android:width="2dp" android:color="#ffffff"  />
    <corners android:radius="3dp" />
</shape>

android-whatsapp-profile-screen-3

( 4 ) Add an ImageView for edit icon & create selector file for different states

  • Set width and height to wrap content
  • Make the ImageView clickable
  • Set the background to edit_states.xml
  • Position this ImageView to bottom right of its parent
<ImageView
       	        android:layout_width="wrap_content"
		        android:layout_height="wrap_content"
				android:contentDescription="image"
				android:clickable="true"
				android:padding="4dp"
				android:layout_margin="8dp"
				android:scaleType="fitXY"
				android:background="@drawable/edit_states"
		        android:src="@drawable/ic_action_edit"
		        android:layout_alignParentBottom="true"
		        android:layout_alignParentRight="true"/>
  • res/drawable/editor_states.xml

Define two states one is the default and the other is when the view is pressed.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape android:shape="rectangle" android:padding="10dp" >
            <solid android:color="#66000000" />
            <stroke android:width="1dp" android:color="#ffffff" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle" android:padding="10dp">
	     	<solid android:color="#40000000"/>
	     	<stroke android:width="0.5dp" android:color="#66ffffff" />	     
		</shape>
    </item>
</selector>

android-whatsapp-profile-screen-4

 ( 5 ) Add a TextView and set its background to layer-list XML file “textview_border.xml”

  • Inside the second RelativeLayout add a TextView
  • Set with and height of this TextView to match parent.
  • Set background to textview_border.xml drawable file.
<TextView 
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/textview_border"
            android:hint="Enter sample text..."
            android:paddingTop="6dp"
            android:paddingBottom="8dp"
            android:paddingLeft="6dp"
            android:textSize="18sp"
            android:gravity="center_vertical"/>
  • res/drawable/textview_border.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
     <item>
        <shape>
            <padding android:top="0.5dp" android:right="0.5dp" android:bottom="1dp" android:left="0.5dp" />
            <solid android:color="#55CCCCCC" />
            <corners android:radius="2dp" />
        </shape>
    </item>
     <item>
        <shape>
            <padding android:top="0dp" android:right="0dp" android:bottom="1dp" android:left="0dp" />
            <solid android:color="#60CCCCCC" />
            <corners android:radius="2dp" />
        </shape>
    </item>
     <item>
        <shape>
            <padding android:top="0dp" android:right="0dp" android:bottom="1dp" android:left="0dp" />
            <solid android:color="#70CCCCCC" />
           	<corners android:radius="2dp" />
        </shape>
    </item>    
    <item>
		<shape>
        	<solid android:color="#ffffff" />
	    	<corners android:radius="2dp" />
		</shape>
    </item>
</layer-list>

( 6 ) Add an ImageView for edit icon & re-use selector file “edit_states.xml”

android-whatsapp-profile-screen-6

Complete Code @ GitHub

Leave a Reply