Table of Contents=> Go Directly
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 UI kit 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 (UI kit ) 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:
<?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 kit with RecyclerView Tutorial. If you are having any confusion or queries please do comment. Thank You.
You must log in to post a comment.