CLICK2CODE

first you learn then you earn

In this article, we can create a new recycler view for the android mobile app. So you can follow stepwise then you can make a beautiful mobile app. First, you take a new project and also we can create an exciting project.

Step: 1

Before starting the project first we can import design dependency in your project and the latest dependency named = material design. Such that we can copy below dependency and paste in your project. If you do not know how to paste then you must watch our YouTube Videos.

// Design Dependency
implementation 'com.google.android.material:material:1.1.0'

Step: 2

In this step, you can open three XML file name colors.xml, styles.xml, and strings.xml after that you can paste below code in your project.

So, first we paste code in colors.xml file. Code given below.

<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#D63603</color>
<color name="colorPrimaryDark">#D63603</color>
<color name="colorAccent">#0945EA</color>
<color name="colorBlue">#03A9F4</color>
<color name="colorgray">#D1D1D1</color>
</resources>

Now, next, we paste code in styles.xml file. Simply you can replace all code in your project.

<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>

</resources>

Next, open strings.xml files then you can paste below code in your project.

<resources>
<string name="app_name">Recycler View Tutorial</string>
<string name="card_view_test">Card View Title</string>
</resources>

Step: 3

Now, we create a Drawable Resource File. So right-click on drawable and goto new and select drawable resource file. You can give any but we named as card_bg.xml.

After created a drawable resource file then you can copy the below code in your project file.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">

<solid android:color="@android:color/white" />

</shape>

Step: 4

Now, you can create a model_item under the layout folder. So right-click on layout folder and go to New and select Layout Resource File and give name model_item. After created model_item.xml then you can paste below code in that file.

<?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"
xmlns:tools="http://schemas.android.com/tools"
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:cardElevation="3dp"
app:cardUseCompatPadding="true">

<LinearLayout
android:id="@+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="@drawable/card_bg"
android:gravity="center"
android:orientation="horizontal"
android:padding="8dp"
tools:ignore="UseCompoundDrawables">

<TextView
android:id="@+id/modelTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/card_view_test"
android:textAppearance="@style/TextAppearance.AppCompat.Large"
android:textColor="@android:color/black" />

</LinearLayout>

</androidx.cardview.widget.CardView>

Step: 5

Now, Open activity_main.xml and paste below code in your project.

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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"
tools:context=".MainActivity">

<com.google.android.material.appbar.AppBarLayout
android:id="@+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

<androidx.appcompat.widget.Toolbar
android:id="@+id/toolBar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_scrollFlags="scroll|enterAlways" />

</com.google.android.material.appbar.AppBarLayout>

<!--RecyclerView-->
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/myRecycler"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scrollbars="vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Step: 6

Now, you can create a Model.java, MyAdapter, MyHolder, and ItemClickListener. We can follow one by one below.

When you paste below JAVA code then you must change the package name.

First, we create a Model.java, and once file created then you can copy the below code and directly paste in your Model.java file.

package in.click2code.recyclerviewtutorial;

public class Model {
private String title;

 String getTitle() {
return title;
 }

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

Second, we create a MyAdapter.java and once file created then you can copy the below code and directly paste in your MyAdapter.java file.

package in.click2code.recyclerviewtutorial;

import android.content.Context;
import android.content.Intent;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

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

import java.util.ArrayList;

public class MyAdapter extends RecyclerView.Adapter<MyHolder> {

private Context c;
 private ArrayList<Model> models;


 // create constructor class
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.modelTitle.setText(models.get(position).getTitle());


 // handle item click
holder.setItemClickListener(new ItemClickListener() {
@Override
public void onItemClick(View v, int pos) {

switch (models.get(pos).getTitle()) {
case "Your Title 0":
// Open New Activity
Intent zero = new Intent(c, Zero.class);
 c.startActivity(zero);
 break;
 case "Your Title 1":
// Open New Activity
Intent one = new Intent(c, One.class);
 c.startActivity(one);
 break;
 case "Your Title 2":
// Open New Activity
Intent two = new Intent(c, Two.class);
 c.startActivity(two);
 break;
 case "Your Title 3": {
// Open New Activity
Intent three = new Intent(c, Three.class);
 c.startActivity(three);
 break;
 }
case "Your Title 4": {
// Open New Activity
//Intent five = new Intent(c, Five.class);
//c.startActivity(five);
break;
 }
case "Your Title 5": {
// Open New Activity
//Intent six = new Intent(c, Six.class);
//c.startActivity(six);
break;
 }
case "Your Title 6": {
// Open New Activity
//Intent seven = new Intent(c, Seven.class);
//c.startActivity(seven);
break;
 }
case "Your Title 7": {
// Open New Activity
//Intent eight = new Intent(c, Eight.class);
//c.startActivity(eight);
break;
 }
case "Your Title 8": {
// Open New Activity
//Intent nine = new Intent(c, Nine.class);
//c.startActivity(nine);
break;
 }
case "Your Title 9": {
// Open New Activity
//Intent ten = new Intent(c, Ten.class);
//c.startActivity(ten);
break;
 }
case "Your Title 10": {
// Open New Activity
//Intent eleven = new Intent(c, Eleven.class);
//c.startActivity(eleven);
break;
 }
case "Your Title 11": {
// Open New Activity
//Intent twelve = new Intent(c, Twelve.class);
//c.startActivity(twelve);
break;
 }
}


}
});

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

Third, we create a MyHolder.java and once file created then you can copy the below code and directly paste in your MyHolder.java file.

package in.click2code.recyclerviewtutorial;

import android.view.View;
import android.widget.TextView;

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

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

TextView modelTitle;
 private ItemClickListener itemClickListener;


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

 }

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

 }

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

Third, we create an ItemClickListener.java and once file created then you can copy the below code and directly paste in your ItemClickListener.java file.

THIS IS NOT JAVA CLASS WHEN YOU CREATE THIS ONE YOU MUST SELECT INTERFACE CLASS. DO NOT SELECT JAVA CLASS.

package in.click2code.recyclerviewtutorial;

import android.view.View;

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

Step: 7

After created a three above class then you can open MainActivity.java file and paste below code.

First, you can paste below code under onCreate method.

Toolbar toolbar = findViewById(R.id.toolBar);
setSupportActionBar(toolbar);

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

Second, you can copy below code out of onCreate method.

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

 // Create item zero
p = new Model();
 p.setTitle("Your Title 0");
 models.add(p);

 // Create item one
p = new Model();
 p.setTitle("Your Title 1");
 models.add(p);

 // Create item two
p = new Model();
 p.setTitle("Your Title 2");
 models.add(p);

 // Create item three
p = new Model();
 p.setTitle("Your Title 3");
 models.add(p);

 // Create item four
p = new Model();
 p.setTitle("Your Title 4");
 models.add(p);

 // Create item five
p = new Model();
 p.setTitle("Your Title 5");
 models.add(p);

 // Create item six
p = new Model();
 p.setTitle("Your Title 6");
 models.add(p);

 // Create item seven
p = new Model();
 p.setTitle("Your Title 7");
 models.add(p);

 // Create item eight
p = new Model();
 p.setTitle("Your Title 8");
 models.add(p);

 // Create item nine
p = new Model();
 p.setTitle("Your Title 9");
 models.add(p);

 // Create item ten
p = new Model();
 p.setTitle("Your Title 10");
 models.add(p);

 // Create item eleven
p = new Model();
 p.setTitle("Your Title 11");
 models.add(p);

 // Create item twelve
p = new Model();
 p.setTitle("Your Title 12");
 models.add(p);


 return models;
}

All work is finished. Now you can check and run this project on your real device. IF YOU GET ANY ERROR THEN YOU MUST WATCH OUR YOUTUBE VIDEOS.

Leave a Reply

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