Android profile screen UI kit

Android free UI kit for Profile Screen Using Recyclerview. Every App needs a profile screen User interface. Here is a clean and ready with Android source code User Interface for your next android project. Spending 1000+ hours on building XML layout for your project? , well now, you can relax as you can use our free android kit which is a click away.

Saving your ample hours of designing and developing the Android User Interface being our goal, We now present to you the news feed app screen with the detailed process:

Step 01:

Create a new project in Android Studio from the File ⇒ New Project. As it prompts you to select the default activity, select Empty Activity, and proceed.

Download this res.zip and add them to your project res folder. This file contains a few drawable images and font folder required for this app.

Now that we are done with the images, moving on to changing the text font. For this, we would need to add a custom font in our directory and asset folder as well. Download custom fonts folder and asset folder and paste it into the folder.

Step 02 :

Go to the build Gradle and do the needful changes as follows.

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'androidx.appcompat:appcompat:1.1.0'
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test:runner:1.2.0'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'
    implementation 'de.hdodenhof:circleimageview:3.0.1'
    implementation 'androidx.recyclerview:recyclerview:1.0.0'
    implementation 'androidx.cardview:cardview:1.0.0'
    implementation 'com.android.support:design:29.0.2'
    implementation 'com.github.siyamed:android-shape-imageview:0.9.+@aar'
    implementation 'de.hdodenhof:circleimageview:3.0.1'
    implementation 'com.balysv:material-ripple:1.0.2'
    implementation 'com.android.support:support-vector-drawable:29.0.2'
    implementation 'com.makeramen:roundedimageview:2.3.0'
}

Open colors.xml located under res ⇒ values and add the below color values.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#1976D2</color>
    <color name="colorPrimaryDark">#1565C0</color>
    <color name="colorAccent">#FDD835</color>
    <color name="transparent">#00000000</color>
    <color name="white">#ffffff</color>
    <color name="textcolor">#131314</color>
</resources>

Open styles.xml located under res ⇒ values and add the below values.

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="windowNoTitle">true</item>
        <item name="android:windowFullscreen">true</item>
    </style>


</resources>

Create a new file dimen.xml under the Res Folder and paste the following code.

<resources>
    <dimen name="spacing_large">15dp</dimen>
    <dimen name="spacing_middle">10dp</dimen>
</resources>

Step 03 :

Now is the time for making the XML file. For this, Open activity_main.xml and paste the following code. The output of this XML is:

Android profile screen UI kit
Android profile screen UI kit
<?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"
    android:background="@color/white"
    tools:context=".MainActivity">


    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/profileseven_bg"
        android:layout_above="@+id/laythree">

        <include layout="@layout/toolbar_profilefour"/>

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="120dp"
            android:layout_gravity="bottom"
            android:scaleType="fitXY"
            android:src="@drawable/bgshape"/>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_marginBottom="20dp"
            android:layout_gravity="bottom">

            <FrameLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                >

                <com.github.siyamed.shapeimageview.CircularImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom"
                    android:src="@drawable/pseven_user"
                    />

                <LinearLayout
                    android:layout_width="42.2dp"
                    android:layout_gravity="bottom|end"
                    android:gravity="center"
                    android:background="@drawable/bgcircle"
                    android:layout_height="42.2dp">

                    <ImageView
                        android:layout_width="wrap_content"
                        android:tint="#e98725"
                        android:layout_height="wrap_content"
                        android:src="@drawable/ic_add_black_24dp"/>

                </LinearLayout>




            </FrameLayout>
        </LinearLayout>




    </FrameLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="30dp"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"
        android:gravity="center"
        android:id="@+id/laythree"
        android:layout_above="@+id/laytwo"
        android:orientation="vertical">


        <customfonts.TextView_Lato_Regular
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="23sp"
            android:textColor="#131314"
            android:layout_marginBottom="7dp"
            android:lineSpacingExtra="5sp"
            android:gravity="center"
            android:text="Jaxon Clarke"
            />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"

            android:gravity="center"
            >

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:tint="#88888f"
                android:src="@drawable/ic_location_on_black_24dp"/>

            <customfonts.TextView_Lato_Regular
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="13.4sp"
                android:textColor="#88888f"
                android:layout_marginLeft="7dp"
                android:lineSpacingExtra="2.6sp"
                android:text="On the Moon"
                android:layout_marginStart="7dp" />

        </LinearLayout>
    </LinearLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:weightSum="3"
        android:id="@+id/laytwo"
        android:layout_margin="20dp"
        android:layout_above="@+id/btn_layout"
        android:layout_gravity="bottom"
        android:orientation="horizontal">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_weight="1"
            android:orientation="vertical">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/icon_psmission"
                android:gravity="center_horizontal"

                />

            <customfonts.MyTextView_LatoBold
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="11.5sp"
                android:textColor="#e98725"
                android:layout_marginTop="10dp"
                android:lineSpacingExtra="1.5sp"
                android:gravity="center_horizontal"
                android:text="Missions"
                />

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_weight="1"
            android:orientation="vertical">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/icon_psglob"
                android:gravity="center_horizontal"

                />

            <customfonts.MyTextView_LatoBold
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="11.5sp"
                android:textColor="#88888f"
                android:layout_marginTop="10dp"
                android:lineSpacingExtra="1.5sp"
                android:gravity="center_horizontal"
                android:text="Planets"
                />

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_weight="1"
            android:orientation="vertical">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/icon_pszone"
                android:gravity="center_horizontal"

                />

            <customfonts.MyTextView_LatoBold
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="11.5sp"
                android:textColor="#88888f"
                android:layout_marginTop="10dp"
                android:lineSpacingExtra="1.5sp"
                android:gravity="center_horizontal"
                android:text="Zones"
                />

        </LinearLayout>


    </LinearLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_alignParentBottom="true"
        android:layout_height="wrap_content"
        android:layout_marginTop="30.3dp"
        android:layout_marginLeft="30.3dp"
        android:layout_marginBottom="30.3dp"
        android:id="@+id/btn_layout"
        android:orientation="horizontal"
        android:layout_marginStart="30.3dp">

        <androidx.recyclerview.widget.RecyclerView
            android:layout_width="match_parent"
            android:id="@+id/recyclerview"
            android:layout_height="match_parent"/>



    </LinearLayout>

</RelativeLayout>

Step 04:

We also need a separate layout for items inside RecyclerView. here is the layout code for layout.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="wrap_content"
    android:layout_height="wrap_content">



        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="10dp"
            android:id="@+id/ps_image"
            android:src="@drawable/ps_imgthree"
            android:scaleType="centerCrop"/>

</LinearLayout>

Step 05 :

Model Class for Storing Product

  • Create the Model Class for Storing Product.
  • We have to create the one class and name that class as per your convenience I named as a ProfileModel

Here is the code. open the model class and write the following code.


public class ProfileModel {

    int Image;

    public Profileseven_model(int image) {
        Image = image;
    }

    public int getImage() {
        return Image;
    }

    public void setImage(int image) {
        Image = image;
    }
}

Step 06 :

Creating RecyclerView Adapter

To manage and display the data of our RecyclerView we need a class that will extend RecyclerView.Adapter. Inside this class we need RecyclerView.ViewHolder. So let’s create our Adapter. For this create a new class named RecyclerAdapter.java and write the following code.

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import com.example.profileseven.R;
import com.example.profileseven.ProfileModel;

import java.util.ArrayList;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

public class RecyclerAdapter extends RecyclerView.Adapter<RecyclerAdapter.ViewHolder> {

    Context context;
    ArrayList<Profileseven_model> list;

    public RecyclerAdapter(Context context, ArrayList<Profileseven_model> list) {
        this.context = context;
        this.list = list;
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.profileseven_item_xml,parent,false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {

        Profileseven_model model = list.get(position);

        holder.ps_image.setImageResource(model.getImage());

    }

    @Override
    public int getItemCount() {
        return list.size();
    }

    public class ViewHolder extends RecyclerView.ViewHolder {

        ImageView ps_image;
        public ViewHolder(@NonNull View itemView) {
            super(itemView);

            ps_image = itemView.findViewById(R.id.ps_image);

        }
    }
}

Step 07 :

The last step to show RecyclerView. Come inside MainActivity and write the following code.

 import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.DefaultItemAnimator;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import android.os.Bundle;

import com.example.profileseven.Adapter.RecyclerAdapter;
import com.example.profileseven.ProfileModel;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    private RecyclerView recyclerview;

    int image [] = {R.drawable.ps_imgtwo,R.drawable.ps_imgthree,R.drawable.ps_imgone};

    RecyclerAdapter adapter;

    ArrayList<Profileseven_model> list;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        recyclerview = findViewById(R.id.recyclerview);
        RecyclerView.LayoutManager layoutManager = new LinearLayoutManager(MainActivity.this, LinearLayoutManager.HORIZONTAL, false);
        recyclerview.setLayoutManager(layoutManager);
        recyclerview.setItemAnimator(new DefaultItemAnimator());

        list = new ArrayList<>();
        adapter = new RecyclerAdapter(MainActivity.this,list);

        for (int i= 0 ; i<image.length ; i++)
        {
            Profileseven_model model = new Profileseven_model(image[i]);
            list.add(model);

        }

        recyclerview.setAdapter(adapter); 
    }
}

Now run the app and see the output. you will see the beautiful profile screen for your next android project.

So that’s all for this Android Profile Screen UI with RecyclerView Tutorial. If you are having any confusion or queries please do comment. Thank You.

Click here to download smooth bottom navigation

One thought on “Android free UI kit for Profile Screen Using Recyclerview

Leave a Reply

You may also like

%d bloggers like this: