Skip to main content

Material design profile page in Android

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 😊

Comments

Post a Comment

Popular posts from this blog

Threads in Java - Masterclass (Part 0)

Multithreading is a way to introduce concurrency in a program. In any case, if there are parallel paths in our program (parts which do not depend on the result from another part), we can make use of multithreading.
One should exploit this feature, especially with all these multiple core machines nowadays.

Below are a few reasons why we should use multithreading -
1. Keep a process responsive There was once a time when you would print a document in MS Word and the application would freeze for an annoyingly long amount of time until the job finished. Eventually, Microsoft solved this problem by running a printing job parallel to the main thread/ GUI thread.  To be clear though, not only GUI apps but Network services have to keep an ear to the ground for new clients, dropped connections and cancellation requests. In either case, it is critical to do the heavy lifting on a secondary thread to keep the user satisfied. 2. Keep a processor busy Keeping a processor busy can be a tough task e…

Parsing XML using Retrofit

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 connectionscachingretrying failed requeststhreadingresponse parsingerror 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 dataInterfaces which defines the possible HTTP operationsRetrofit.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 response is returned as a Call object…

Threads in Java - Basics (Part 1)

Hello everyone, today we are going to discuss one of the most important concepts in Java - Multithreading.
In the first part of this multi-part blog series, we will be discussing the basics of threads, how can we create them? which is the best approach? and many other questions like these. So without further ado, let's get started.
What are threads? Let's say you are Batman (pretty cool, eh? 😊) and your arch-enemy, the master alchemist Ra's al Ghul has brewed a dangerous potion from the Lazarus Pit. To avenge his earlier defeats by the hands of The Dark Knight, he has spread the potions all over the Gotham city.  Now, the only way to save citizens of Gotham is to find the cure of the potion (hidden in the city somewhere) and find Ra's as well before he can devise a new plan to destroy the city.  Batman calls Nightwing (the original Robin) and asks his help in finding Ra's. Batman decides to find the cure of the deadly potion. In the end, both Batman and Robin wer…