CLICK2CODE

first you learn then you earn

In this, article we are creating a complete recyclerView Application for our android apps. So, guys if you really want to create this type of recycler view app then you must follow all steps which are given below;

STEP: 01

First, we create a model layout named model_item and under this layout, you can copy below code and paste in that layout whatever you are created.

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/transparent"
android:clickable="true"
android:fitsSystemWindows="true"
android:focusable="true"
android:foreground="?attr/selectableItemBackground"
app:cardCornerRadius="3dp"
app:cardElevation="3dp"
app:cardUseCompatPadding="true">

<androidx.appcompat.widget.LinearLayoutCompat
android:id="@+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="@android:color/white"
android:orientation="horizontal"
android:padding="8dp"
android:weightSum="1">

<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/modelImage"
android:layout_width="55dp"
android:layout_height="55dp"
android:layout_gravity="center_vertical"
android:elevation="3dp"
android:src="@drawable/icon" />

<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_weight="0.9"
android:gravity="center_vertical"
android:orientation="vertical">

<TextView
android:id="@+id/modelTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="@font/open_sans_semibold"
android:text="Title Line"
android:textAppearance="@style/TextAppearance.AppCompat.Medium"
android:textColor="@android:color/black"
android:textStyle="bold" />


</androidx.appcompat.widget.LinearLayoutCompat>

<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.1"
android:background="@android:color/transparent"
android:contentDescription="@string/app_name"
android:padding="8dp"
android:src="@drawable/arrow" />


</androidx.appcompat.widget.LinearLayoutCompat>

</androidx.cardview.widget.CardView>
STEP: 02

Now, you can create a Model.java class. If you know how to create then it’s OK else you don’t know how to create then you must watch our YouTube Video CLICK HERE. If you want to copy and paste then codes are given below.

public class Model {
String title;
 int image;

 // Blank Constructor
public Model() {
}

// Constructor
public Model(String title, int image) {
this.title = title;
 this.image = image;
 }

// Getter and Setter
public String getTitle() {
return title;
 }

public void setTitle(String title) {
this.title = title;
 }

public int getImage() {
return image;
 }

public void setImage(int image) {
this.image = image;
 }
STEP: 03

Now, you must create an ItemClickListener.java class to activate the click system in this project. We just manually create these types of methods. You can directly code and paste the w code in your project.

public interface ItemClickListener {
void onItemClick(View v, int pos);
}
STEP: 04

Now, we are creating MyHolder.java class because without MyHolder.java class we can not create a recycler-view in our android project. The code is given below you can simply copy and paste in your project.

public class MyHolder extends RecyclerView.ViewHolder implements View.OnClickListener {

ImageView img;
 TextView modelTitle;
 private ItemClickListener itemClickListener;

 MyHolder(@NonNull View itemView) {
super(itemView);
 this.img = itemView.findViewById(R.id.modelImage);
 this.modelTitle = itemView.findViewById(R.id.modelTitle);
 itemView.setOnClickListener(this);

 }

@Override
public void onClick(View view) {
this.itemClickListener.onItemClick(view, getLayoutPosition());
 }

void setItemClickListener(ItemClickListener ic) {
this.itemClickListener = ic;
 }
}
STEP: 05

Now, we are creating MyAdapter.java class because without MyAdapter.java class we can not create a recycler-view in our android project. The code is given below you can simply copy and paste in your project.

public class MyAdapter extends RecyclerView.Adapter<MyHolder> {

private Context c;
 private ArrayList<Model> models;

 public MyAdapter(Context c, ArrayList<Model> models) {
this.c = c;
 this.models = models;
 }

@NonNull
@Override
public MyHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
// convert XML to OBJ
View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.model_item, null);
 return new MyHolder(v);
 }

@Override
public void onBindViewHolder(@NonNull MyHolder holder, int position) {
// create bind view/data
holder.img.setImageResource(models.get(position).getImage());
 holder.modelTitle.setText(models.get(position).getTitle());

 // handle item click
holder.setItemClickListener(new ItemClickListener() {
@Override
public void onItemClick(View v, int pos) {
// Open Sample Apps Activity
switch (models.get(pos).getTitle()) {
case "Good Morning": {
// Open New Activity
Intent gm = new Intent(c, GoodMorning.class);
 c.startActivity(gm);
 break;
 }

case "Good Night": {
// Open New Activity
Intent gn = new Intent(c, GoodNight.class);
 c.startActivity(gn);
 break;
 }

case "Love": {
// Open New Activity
Intent love = new Intent(c, Love.class);
 c.startActivity(love);
 break;
 }

case "Romantics": {
// Open New Activity
Intent romantic = new Intent(c, Romantics.class);
 c.startActivity(romantic);
 break;
 }

case "Couple": {
// Open New Activity
Intent couple = new Intent(c, Couple.class);
 c.startActivity(couple);
 break;
 }

case "Valentine Day": {
// Open New Activity
Intent valentine = new Intent(c, Valentine.class);
 c.startActivity(valentine);
 break;
 }

case "Friendship": {
// Open New Activity
Intent friendship = new Intent(c, Friendship.class);
 c.startActivity(friendship);
 break;
 }

case "Birthday": {
// Open New Activity
Intent birthday = new Intent(c, Birthday.class);
 c.startActivity(birthday);
 break;
 }

case "Funny": {
// Open New Activity
Intent funny = new Intent(c, Funny.class);
 c.startActivity(funny);
 break;
 }

case "Best Wishes": {
// Open New Activity
Intent best = new Intent(c, BestWishes.class);
 c.startActivity(best);
 break;
 }

case "G O D": {
// Open New Activity
Intent god = new Intent(c, God.class);
 c.startActivity(god);
 break;
 }

case "Attitude": {
// Open New Activity
Intent attitude = new Intent(c, Attitude.class);
 c.startActivity(attitude);
 break;
 }

}


}
});

 }

@Override
public int getItemCount() {
return models.size();
 }
}
STEP: 06

Now, we create a RecyclerView class in our activity_home.xml. It is a very small code to create a recycler-view in your layout. The codes are given below you can copy and paste in your project.

<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="12dp"
android:layout_marginEnd="12dp"
android:background="#dddddd"
android:layoutAnimation="@anim/layout_animation_slide_right" />
STEP: 07

we can implement java code in our HomeActivity.java and how to place all code then I recommend you must watch our YouTube Video. This really helps you.

// RecyclerView
RecyclerView mRecyclerView = findViewById(R.id.recyclerView);
// Set its Properties
//grid view with 2 columns in each row
mRecyclerView.setLayoutManager(new GridLayoutManager(this, 1));
mRecyclerView.setItemAnimator(new DefaultItemAnimator());
// Adapter
mAdapter = new MyAdapter(this, getModels());
mRecyclerView.setAdapter(mAdapter);

You must replaced with on your icons whatever given below.

private ArrayList<Model> getModels() {
ArrayList<Model> models = new ArrayList<>();
 Model p;

 // Create an items for recycler view below
p = new Model();
 p.setTitle("Good Morning");
 p.setImage(R.drawable.goodmorning);
 models.add(p);

 p = new Model();
 p.setTitle("Good Night");
 p.setImage(R.drawable.goodnight);
 models.add(p);

 p = new Model();
 p.setTitle("Love");
 p.setImage(R.drawable.love);
 models.add(p);

 p = new Model();
 p.setTitle("Romantics");
 p.setImage(R.drawable.romantic);
 models.add(p);

 p = new Model();
 p.setTitle("Couple");
 p.setImage(R.drawable.couple);
 models.add(p);

 p = new Model();
 p.setTitle("Valentine Day");
 p.setImage(R.drawable.velentineday);
 models.add(p);

 p = new Model();
 p.setTitle("Friendship");
 p.setImage(R.drawable.friends);
 models.add(p);

 p = new Model();
 p.setTitle("Birthday");
 p.setImage(R.drawable.birthday);
 models.add(p);

 p = new Model();
 p.setTitle("Funny");
 p.setImage(R.drawable.funny);
 models.add(p);

 p = new Model();
 p.setTitle("Best Wishes");
 p.setImage(R.drawable.best);
 models.add(p);

 p = new Model();
 p.setTitle("G O D");
 p.setImage(R.drawable.bhagwan);
 models.add(p);

 p = new Model();
 p.setTitle("Attitude");
 p.setImage(R.drawable.attitude);
 models.add(p);

 return models;
}

This is the animation code below. Without this code, you can not operate an animation style.

private void layoutAnimation(RecyclerView recyclerView) {
Context context = recyclerView.getContext();
 LayoutAnimationController layoutAnimationController =
AnimationUtils.loadLayoutAnimation(context, R.anim.layout_animation_slide_right);

 recyclerView.setLayoutAnimation(layoutAnimationController);
 recyclerView.getAdapter().notifyDataSetChanged();
 recyclerView.scheduleLayoutAnimation();
}
STEP: 09

Final Steps, you can create an animation layout in your anim folder so you can right-click of the folder and go to New and select Animation Resource File named item_animation_form_right and another file named layout_animation_slide_right.

item_animation_form_right code below:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="600">

<translate
android:fromXDelta="100%p"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:toXDelta="0" />

<alpha
android:fromAlpha="0.5"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:toAlpha="1" />

</set>
layout_animation_slide_right code below.
<?xml version="1.0" encoding="utf-8"?>
<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"
android:animation="@anim/item_animation_from_right"
android:animationOrder="normal"
android:delay="15%" />

Now, You can run your project and check real device.

THANK YOU !! 😘

Leave a Reply

Your email address will not be published. Required fields are marked *