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 YoutubeTo create a profile screen we have to do the following steps.
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
- 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
To learn in detail just follow our Youtube tutorial..
Android Related Videos
- Design a Modern Dashboard
- Material Design Login Screen with Shared Animations
- Create a Navigation Drawer Material Design in 2020
- Design Responsive Android App to fit all screen sizes
Related Articles that you might want to check out.
- Create a new project in android studio for beginners?
- How to create an Account on Fiverr and start earning?
- Create a Gig on Fiverr and start selling specific services.
- How To Start Blogging and Make Money?
Our Projects Make Us Proud
