In this article, we are going to learn how to create an amazing user profile UI in Android.
In the below image you can see that what are we going to build.
Hope so you are interested to know how to make the above amazing user profile UI in Android, so now without wasting much time let’s start.
You can also refer our video tutorial for same.
Amazing User Profile UI in Android
1. Create a new project in Android Studio by navigating to File ⇒ New ⇒ New Project and provide a name to your project. By default activity name is MainActivity.java.
2. Now open res => values => styles.xml file and paste the below code.
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">#730264</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
</resources>
3. Now to apply custom font, create a new resource directory by navigating res => New => Android Resource Directory and give the directory name as “font” and select “font” from resource type.
4. Now download this folder and copy all drawable resources from the drawable folder and paste all in res => drawable and copy all fonts from the font folder and paste in the font res => font.
5. Now create a new drawable res file by navigating res => drawable => New => Drawable resource file =>gradient.xml and put the below line of codes to make the gradient color.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#8B9624AA"
android:endColor="#9FD81B60"
/>
</shape>
6. Now Finally go to your activity_main.xml file to make the main user interface of profile UI design and paste the below lines of codes.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:background="#fff"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".MainActivity">
<ImageView
android:layout_width="match_parent"
android:layout_height="250dp"
android:id="@+id/image"
app:layout_constraintTop_toTopOf="parent"
android:src="@drawable/download"
android:scaleType="centerCrop"
/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="250dp"
app:layout_constraintTop_toTopOf="parent"
android:background="@drawable/gradient"
/>
<androidx.cardview.widget.CardView
android:layout_width="120dp"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="175dp"
android:id="@+id/imageCard"
android:layout_marginLeft="30dp"
app:layout_constraintLeft_toLeftOf="parent"
app:cardCornerRadius="60dp"
app:cardElevation="10dp"
android:layout_height="120dp"
>
<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:src="@drawable/download"
android:padding="3dp"
/>
</androidx.cardview.widget.CardView>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toRightOf="@+id/imageCard"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="205dp"
android:text="Sofia William"
android:textColor="#C9FFFFFF"
android:layout_marginLeft="20dp"
android:textSize="22dp"
android:fontFamily="@font/nunito_semibold"
/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_marginRight="20dp"
android:layout_marginLeft="20dp"
android:layout_height="100dp"
app:layout_constraintTop_toBottomOf="@+id/image"
android:layout_marginTop="100dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:id="@+id/layout1"
android:background="#C6E53935"
>
<RelativeLayout
android:layout_width="wrap_content"
android:id="@+id/pointLayout"
android:padding="25dp"
android:layout_alignParentLeft="true"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="965"
android:textSize="15sp"
android:layout_centerHorizontal="true"
android:fontFamily="@font/nunito_regular"
android:textColor="#E1FFFFFF"
android:id="@+id/pointText"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/pointText"
android:id="@+id/point"
android:textSize="15sp"
android:textStyle="bold"
android:text="Points"
android:layout_centerHorizontal="true"
android:fontFamily="@font/nunito_semibold"
android:textColor="#fff"
/>
</RelativeLayout>
<View
android:layout_width="0.1dp"
android:layout_height="60dp"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:layout_toRightOf="@+id/pointLayout"
android:background="#3BFFFFFF"
android:id="@+id/view1"
/>
<RelativeLayout
android:layout_width="wrap_content"
android:id="@+id/FollowerLayout"
android:padding="25dp"
android:layout_centerInParent="true"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="550"
android:textSize="15sp"
android:layout_centerHorizontal="true"
android:fontFamily="@font/nunito_regular"
android:textColor="#E1FFFFFF"
android:id="@+id/FollowerText"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/FollowerText"
android:id="@+id/follower"
android:text="Followers"
android:textSize="15sp"
android:textStyle="bold"
android:layout_centerHorizontal="true"
android:fontFamily="@font/nunito_semibold"
android:textColor="#fff"
/>
</RelativeLayout>
<View
android:layout_width="0.1dp"
android:layout_height="60dp"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:layout_toRightOf="@+id/FollowerLayout"
android:background="#3BFFFFFF"
android:id="@+id/view2"
/>
<RelativeLayout
android:layout_width="wrap_content"
android:id="@+id/FollowingLayout"
android:padding="25dp"
android:layout_alignParentRight="true"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="300"
android:textSize="15sp"
android:layout_centerHorizontal="true"
android:fontFamily="@font/nunito_regular"
android:textColor="#E1FFFFFF"
android:id="@+id/FollowingText"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/FollowingText"
android:id="@+id/following"
android:textSize="15sp"
android:textStyle="bold"
android:text="Following"
android:layout_centerHorizontal="true"
android:fontFamily="@font/nunito_semibold"
android:textColor="#fff"
/>
</RelativeLayout>
</RelativeLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="sofia.william@gmail.com"
android:id="@+id/email"
app:layout_constraintTop_toBottomOf="@+id/layout1"
android:layout_marginTop="50dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:drawableLeft="@drawable/email"
android:drawablePadding="10dp"
android:drawableTint="#CDE53935"
android:textSize="15sp"
android:fontFamily="@font/nunito_regular"
android:textColor="#5E5A5A"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="91-8567345986"
android:id="@+id/phone"
app:layout_constraintTop_toBottomOf="@+id/email"
android:layout_marginTop="10dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:drawableLeft="@drawable/phone"
android:drawablePadding="10dp"
android:drawableTint="#CDE53935"
android:textSize="15sp"
android:fontFamily="@font/nunito_regular"
android:textColor="#5E5A5A"
/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#FCD252"
android:gravity="center"
app:layout_constraintBottom_toBottomOf="parent"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/facebook"
android:id="@+id/facebook"
android:tint="#fff"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/twitter"
android:layout_marginLeft="30dp"
android:layout_toRightOf="@+id/facebook"
android:id="@+id/twitter"
android:tint="#fff"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/instagram"
android:id="@+id/instagram"
android:layout_toRightOf="@+id/twitter"
android:layout_marginLeft="30dp"
android:tint="#fff"
/>
</RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
7. Finally, run the app and you will get the output as shown in the demo image.
If you found this post useful, don’t forget to share this with your friends, and if you have any query feel free to comment it in the comment section.
Thank you 🙂 Keep Learning !