Modern Profile UI Design In Android Studio – Material Design 2020

by | Feb 20, 2020 | Android, Android for Beginners, Android Material Design Tutorials, Android UI/UX Tutorials, Basics, Bull's Rent, UI UX | 0 comments

In this tutorial, we will create a modern profile UI design for showing the detail of the user in our app.

Previously, we have created our design for the sign-up.

Subsequently, we have created the design of the login page using material design.

And now in this tutorial, we are creating a profile screen of the user having a username, Email, Password, and phone number.

After successful verification of the Login Screen, this profile screen will appear to show the details.

From where the user can update his/her profile.

Generally, every online app has a user profile page from where you can edit your profile.

So now let’s get started.

Subscribe Us at Youtube

Steps to create a Profile UI Design in android

To create a profile screen we have to do the following steps.

  1. Create a new activity
  2. Change Layout.
  3. Design the Profile Page.

1- Create a new activity

In the first place, we have to make a new activity.

For instance, decide either we want to create a new project having a new activity or we want to create a new activity in already created project.

Create a new project

If you are new to the android studio then you have to check our tutorial of how to create a new project.

In the meantime create a Splash screen, Login Screen and Signup screen.

Create an activity

  1. Thus, to create a new activity right-click on app>java>”first folder” as shown in the picture.

2. After right-click, you have some options to the right.

So then go to new>Activity>Empty Activity.

3 – Finally give the name of the activity as “UserProfile”.

2- Change layout to Linear Layout in XML file

1- Open XML File

In the first place open the XML file named “activity_user_profile.xml”.

For that, open file name activity_user_profile.xml from android’s top tabs.

if you can’t find the activity in top tabs then select app>res>layout>activity_user_profile.xml

as shown in the picture below.

Next click on the “text” tab at the bottom left side of XML page near “design”

2- Write the code in the XML file

When you open the text of the design your code is like this.

As we are making a profile screen and want everything in linear form.

Linear means that all the components are vertically or horizontally arranged.

So for that, we have to use a Linear Layout.

Hence remove the selected code of constraint layout and add “LinearLayout” as shown in the above picture

In the meantime add its orientation to Vertical.

3- Design the profile page

Our Design is divided into 3 parts. Thus to design your profile you have to follow these steps:

1- Header of profile page

2- Card View

3- Detail of the user

1- Header of profile page

The header of our modern profile UI design will show the picture of the user and with that, it will show the user-name.

a- Design Header

So then, we have to use a relative layout, with a width equals to match_parent. 

Because we have to make a header on a small part of the screen, so then we use height equals “300dp“.

After that add, the padding equals 20dp so that the data in that layout leaves 20dp space from all sides.

Now add the background-color by using background=”#fece2f”

android:layout_width="match_parent"
android:layout_height="300dp"
android:background="#fece2f"
android:padding="20dp">

b- Design Image view of user profile

To show the profile picture of the user we have to use the image-view.

Therefore to make a profile picture of equal size we have to make its height and width equal.

In this case, we will use width AND height equal to 100dp.

Next, we have to show the picture in the center of the header so make layout_centervertical equals “true“.

Finally gives the id of the image view as profile_image.

android:id="@+id/profile_image"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerVertical="true"
android:src="@drawable/profile_image" />

c- Show name of user after profile picture

Lastly, we have to make a field where we have to show the name and username of the user.

Here we have to use textView and make the width and height to wrap-content.

wrap-content means that the size of the TextView is equal to the size of the username.

After that give the dummy username in text, give the text size to 20sp, font-family to bungee.

Finally, make the name to the right of the profile image. for that use layout_toRightOf and give the id of ImageView as profile_image and make text to vertically center by making layout_centerVertical equals to true“.

Similarly, make a username under it.

<TextView
      android:id="@+id/fullname_field"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_centerVertical="true"
      android:layout_marginLeft="10dp"
      android:layout_toRightOf="@+id/profile_image"
      android:fontFamily="@font/bungee"
      android:includeFontPadding="false"
      android:text="Taimoor Sikander"
      android:textColor="#000"
      android:textSize="20sp" />

<TextView
      android:id="@+id/username_field"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_below="@id/fullname_field"
      android:layout_marginLeft="10dp"
      android:layout_toRightOf="@+id/profile_image"
      android:includeFontPadding="false"
      android:text="taimoor_sikander"
      android:textSize="14sp" />
2- Card View of modern profile UI design

As we are using the latest profile design in android we have to use card view.

So then, to design the cards we have to follow these steps.

a- Download cardview

To download the card view go-to design view of XML file in the Pallete section click on containers. 

Search for the CardView.

In front of CardView, there will downloadable icon. 

Click on the download icon so that the dependencies of CardView be added to the project.

b- Write the code to design card view in profile page

In this, we have to make two card view for balance and booking. In which it will show the balance and booking of each user in their profile.

For balance

<LinearLayout
    android:layout_height="wrap_content"
    android:layout_marginTop="-100dp"
    android:layout_width="match_parent"
    android:padding="20dp">

    <com.google.android.material.card.MaterialCardView
        android:layout_height="125dp"
        android:layout_margin="10dp"
        android:layout_weight="1"
        android:layout_width="0dp"
        app:cardBackgroundColor="#fece2f"
        app:cardElevation="10dp">

        <RelativeLayout
            android:layout_height="match_parent"
            android:layout_width="match_parent"
            android:padding="5dp">

            <ImageView
                android:layout_centerHorizontal="true"
                android:layout_height="30dp"
                android:layout_width="30dp"
                android:src="@drawable/payment_icon" />

            <TextView
                android:fontFamily="@font/bungee"
                android:id="@+id/payment_label"
                android:includeFontPadding="false"
                android:layout_centerInParent="true"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:text="$123"
                android:textSize="20sp" />

            <TextView
                android:id="@+id/payment_desc"
                android:includeFontPadding="false"
                android:layout_below="@id/payment_label"
                android:layout_centerHorizontal="true"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:text="Balance"
                android:textSize="20sp" />

        </RelativeLayout>

    </com.google.android.material.card.MaterialCardView>

Similarly, you guys can create a card view for booking

3- Show user data after getting values from frombase

Finally, make a design to show the data of the user when we get the values from the firebase. For that, we have to make text input fields such as full name, username, email and password, as given below. When the user enters their data in the fields, the data of user stores in the firebase.

<LinearLayout
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:padding="20dp">

    <com.google.android.material.textfield.TextInputLayout
        android:hint="Full Name"
        android:id="@+id/full_name_profile"
        android:layout_height="wrap_content"
        android:layout_width="match_parent">

        <com.google.android.material.textfield.TextInputEditText
            android:drawableLeft="@drawable/username_small_icon"
            android:drawablePadding="10dp"
            android:layout_height="wrap_content"
            android:layout_width="match_parent" />

    </com.google.android.material.textfield.TextInputLayout>

Similarly, you guys can create input fields of email, full name and password.

In the end, we will make a button of “UPDATE”, by clicking all the data, entered by the user  saves in firebase. As given below

 <Button
        android:background="#fece2f"
        android:fontFamily="@font/bungee"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:layout_width="match_parent"
        android:text="UPDATE" />

At Last Check our tutorial to Retrieve Data from Firebase.

Get Complete Source code for Bull’s Rent App

CODING with T

🚀 Supercharge your Flutter skills! Subscribe to my YouTube channel now for mind-blowing coding insights, expert tips, and exclusive content. Don’t miss out!

COURSES

Android firebase app - android app 2022 - firebase android app - bulls rent app - coding with t app - android app
android complete login signup product by taimoor sikander free for any type of android app
Flutter E Commerce App Modern and latest
Flutter Login App UI Source Code - Flutter Complete App - Flutter App Design - Flutter App 2023 - Complete Flutter App 2023
Learn flutter from scratch in 4 hours - Flutter Crash Course - Coding with T

Latest Tutorial

How to create a Custom Appbar in flutter. Custom Appbar Design. Flutter App Design
How to create a Custom Shape in Flutter. Flutter E Commerce app Design. Ecommerce app design Flutter. Flutter clippath tutorial
Bottom Navigation bar in Flutter. Flutter Material 3 bottom navigation bar. How to design background color of Flutter bottom navigation bar. Flutter ecommerce app design
Are you looking for a Laptop? Checkout the Best Laptops for Programming.
This is default text for notification bar