Skip to main content

Material design profile page in Android

Image
By
Hey everyone, some days back I was working on one my personal Android project. In that project, I was supposed to create a simple profile page for a user. This profile page was supposed to show some basic details of a user.

The output of this UI will be like this -
Profile page screen
I created the profile page using material design and in this post, I am going to discuss a step by step tutorial to create a simple yet elegant profile page. Without further ado, let's get started.

Creating a new project

Click on File ➤ New Project ➤ Empty Activity and fill the necessary details.

Change styles.xml file

  • Navigate to app\src\main\res\values\styles.xml
  • Change the style value from DarkActionBar to NoActionBar as below
<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

Create backgrounds

  • Navigate to app\src\main\res\drawable and create the following four XML files - 
button_follow_background.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/white"/>
    <corners android:radius="20dp"/>
</shape>

button_connect_background.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@android:color/transparent"/>
    <corners android:radius="20dp"/>
    <stroke android:width="2dp" android:color="@color/white"/>
</shape>

image_Visibility.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
            android:startColor="@color/startColor"
            android:endColor="@color/endColor"
            android:angle="90"/>
</shape>

 line_background.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/white"/>
    <corners android:radius="20dp"/>
</shape>

Update activity_main.xml

Open activity_main.xml and paste the following code in it.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
        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"
        tools:context=".MainActivity">

    <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:src="@drawable/image"
            android:contentDescription="@string/background_image"/>

    <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/image_visibility"
            android:contentDescription="@string/image_visibility"/>

    <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

        <TextView
                android:id="@+id/nameTextView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="@dimen/margin_bottom"
                android:layout_marginEnd="@dimen/margin_end"
                android:layout_marginStart="@dimen/margin_start"
                android:layout_marginTop="@dimen/margin_top"
                android:text="@string/name"
                android:textAlignment="center"
                android:textColor="@color/white"
                android:textSize="35sp"
                android:textStyle="bold"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.0"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_bias="0.352"/>

        <RelativeLayout
                android:id="@+id/relativeLayout"
                android:layout_width="130dp"
                android:layout_height="8dp"
                android:layout_marginBottom="@dimen/margin_bottom"
                android:layout_marginEnd="@dimen/margin_end"
                android:layout_marginStart="@dimen/margin_start"
                android:layout_marginTop="@dimen/margin_top"
                android:background="@drawable/line_background"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/nameTextView"
                app:layout_constraintVertical_bias="0.0"/>

        <LinearLayout
                android:id="@+id/linearLayout"
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:layout_marginBottom="8dp"
                android:layout_marginTop="8dp"
                android:gravity="center"
                android:orientation="horizontal"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/relativeLayout"
                app:layout_constraintVertical_bias="0.056">

            <LinearLayout
                    android:layout_width="100dp"
                    android:layout_height="80dp"
                    android:clickable="true"
                    android:focusable="true"
                    android:foreground="?android:attr/selectableItemBackground"
                    android:gravity="center"
                    android:orientation="vertical">

                <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/posts"
                        android:textColor="@color/white"
                        android:textSize="22sp"
                        android:textStyle="bold"/>

                <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/posts_text"
                        android:textColor="@color/white"
                        android:textSize="12sp"/>

                <RelativeLayout
                        android:layout_width="70dp"
                        android:layout_height="4dp"
                        android:layout_marginTop="@dimen/margin_top"
                        android:background="@drawable/line_background"/>
            </LinearLayout>

            <LinearLayout
                    android:layout_width="100dp"
                    android:layout_height="80dp"
                    android:clickable="true"
                    android:focusable="true"
                    android:foreground="?android:attr/selectableItemBackground"
                    android:gravity="center"
                    android:orientation="vertical">

                <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/followers"
                        android:textColor="@color/white"
                        android:textSize="22sp"
                        android:textStyle="bold"/>

                <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/followers_text"
                        android:textColor="@color/white"
                        android:textSize="12sp"/>

                <RelativeLayout
                        android:layout_width="70dp"
                        android:layout_height="4dp"
                        android:layout_marginTop="@dimen/margin_top"
                        android:background="@drawable/line_background"/>
            </LinearLayout>

            <LinearLayout
                    android:layout_width="100dp"
                    android:layout_height="80dp"
                    android:clickable="true"
                    android:focusable="true"
                    android:foreground="?android:attr/selectableItemBackground"
                    android:gravity="center"
                    android:orientation="vertical">

                <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/following"
                        android:textColor="@color/white"
                        android:textSize="22sp"
                        android:textStyle="bold"/>

                <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/following_text"
                        android:textColor="@color/white"
                        android:textSize="12sp"/>

                <RelativeLayout
                        android:layout_width="70dp"
                        android:layout_height="4dp"
                        android:layout_marginTop="@dimen/margin_top"
                        android:background="@drawable/line_background"/>
            </LinearLayout>

        </LinearLayout>

        <Button
                android:id="@+id/button_follow"
                android:layout_width="300dp"
                android:layout_height="wrap_content"
                android:layout_marginBottom="@dimen/margin_bottom"
                android:layout_marginStart="@dimen/margin_start"
                android:layout_marginTop="@dimen/margin_top"
                android:background="@drawable/button_follow_background"
                android:foreground="?android:attr/selectableItemBackground"
                android:text="@string/follow_text"
                android:textColor="@color/startColor"
                android:textSize="18sp"
                android:textStyle="bold"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/linearLayout"
                app:layout_constraintVertical_bias="0.19999999"/>

        <Button
                android:id="@+id/button_message"
                android:layout_width="300dp"
                android:layout_height="wrap_content"
                android:layout_marginBottom="@dimen/margin_bottom"
                android:layout_marginEnd="@dimen/margin_end"
                android:layout_marginStart="@dimen/margin_start"
                android:layout_marginTop="@dimen/margin_top"
                android:background="@drawable/button_connect_background"
                android:foreground="?android:attr/selectableItemBackground"
                android:text="@string/message_text"
                android:textColor="@color/white"
                android:textSize="18sp"
                android:textStyle="bold"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.51"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/button_follow"
                app:layout_constraintVertical_bias="0.0"/>

        <Button
                android:layout_width="300dp"
                android:layout_height="wrap_content"
                android:layout_marginBottom="@dimen/margin_bottom"
                android:layout_marginEnd="@dimen/margin_end"
                android:layout_marginStart="@dimen/margin_start"
                android:layout_marginTop="@dimen/margin_top"
                android:background="@drawable/button_connect_background"
                android:foreground="?android:attr/selectableItemBackground"
                android:text="@string/edit_profile_text"
                android:textColor="@color/white"
                android:textSize="18sp"
                android:textStyle="bold"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.51"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/button_message"
                app:layout_constraintVertical_bias="0.0"/>

    </android.support.constraint.ConstraintLayout>
</RelativeLayout>

Add/update values files

dimens.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="margin_bottom">8dp</dimen>
    <dimen name="margin_end">8dp</dimen>
    <dimen name="margin_start">8dp</dimen>
    <dimen name="margin_top">8dp</dimen>
</resources>

strings.xml
<resources>
    <string name="app_name">ProfilePage</string>
    <string name="background_image">Background Image</string>
    <string name="image_visibility">Image Visibility</string>
    <string name="name">SACHIN TENDULKAR</string>
    <string name="posts">558</string>
    <string name="posts_text">POSTS</string>
    <string name="followers">14.2M</string>
    <string name="followers_text">FOLLOWERS</string>
    <string name="following">10</string>
    <string name="following_text">FOLLOWING</string>
    <string name="follow_text">F O L L O W</string>
    <string name="message_text">M E S S A G E</string>
    <string name="edit_profile_text">E D I T</string>
</resources>

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#008577</color>
    <color name="colorPrimaryDark">#00574B</color>
    <color name="colorAccent">#D81B60</color>
    <color name="white">#ffffff</color>
    <color name="startColor">#03ae7d</color>
    <color name="endColor">#96137348</color>
</resources>

Run the app

Run the app and you will see the following output

Profile page screen
Conclusion

So finally, we are done with the UI of a profile page for a user. I hope you enjoyed this post. You can find the complete working code on my GitHub. 

I would love to hear your thoughts on this and would like to have suggestions from you to make it better. 

Feel free to befriend me on Facebook, Twitter or Linked In or say Hi by email.

Happy Coding 😊
Labels:

Comments

  1. Sanchit jainMay 3, 2019 at 7:11 AM

    Great and deeply explained. You r going on right path with full pace.

    ReplyDelete
  2. UnknownApril 10, 2022 at 3:14 AM

    What are the best casinos to play in 2021?
    Which casinos offer slots? — herzamanindir Casino Sites. Best casinosites.one casino 토토 sites kadangpintar are those mens titanium wedding bands that allow players to try a game from anywhere. The most common online slots

    ReplyDelete

Post a Comment

Popular posts from this blog

Parsing XML using Retrofit

By
Developing our own type-safe HTTP library to interface with a REST API can be a real pain as we have to handle many aspects - making connections caching retrying failed requests threading response parsing error handling, and more.  Retrofit, on the other hand, is a well-planned, documented and tested library that will save you a lot of precious time and headaches. In this tutorial, we are going to discuss how we can parse the XML response returned from  https://timesofindia.indiatimes.com/rssfeedstopstories.cms  using the Retrofit library. To work with Retrofit, we need three classes -  Model class to map the JSON data Interfaces which defines the possible HTTP operations Retrofit.Builder class - Instance which uses the interface and the Builder API which allows defining the URL endpoint for the HTTP operation. Every method of the above interface represents on possible API call. The request type is specified by using appropriate annotations (GET, POST). The respon
Post a Comment
Read more

Threads in Java - CountDownLatch (Part 12)

By
A CountDownLatch is a synchronizer which allows one thread to wait for one or more threads before starts processing. A good application of  CountDownLatch is in Java server-side applications where a thread cannot start execution before all the required services are started. Working A  CountDownLatch is initialized with a given count which is the number of threads it should wait for. This count is decremented by calling countDown() method by the threads once they are finished execution. As soon as the count reaches to zero, the waiting task starts running. Code Example Let us say we require three services, LoginService, DatabaseService and CloudService to be started and ready before the application can start handling requests. Output Cloud Service is up! Login Service is up! Database Service is up! All services are up. Now the waiting thread can start execution. Here, we can see that the main thread is waiting for all the three services to start before starting its own
1 comment
Read more

Threads in Java - yield(), sleep() and join() (Part 4)

By
Let's say we want to stop the execution of a thread. How do we do this? There are three methods in the Thread class which can be used to stop the execution of a thread. Let us discuss these methods one by one 1. Yield method Suppose there are two threads A and B. A takes 10 minutes to complete a job while B takes only 10 seconds. At first, A and B both are in the RUNNABLE state then Thread Scheduler gives resources to A to run. Now B has to wait for 10 minutes to do a 10 seconds job. This very inefficient. Wouldn't it be great if we have some way to prevent the execution of A in between so that B can run? Fortunately, yield() method helps us in achieving this.  If a thread calls yield() method, it suggests the Thread Scheduler that it is ready to pause its execution. But it depends upon the Thread Scheduler to consider this suggestion. It can entirely ignore it. If a thread calls yield() method, the Thread Scheduler checks if there is any thread with same/high
1 comment
Read more