Custom Recyclerview text and image in Android

Custom Recyclerview Android

Hello everyone, today I will present a demo of custom android recyclerview, I use pictures and letters to custom recyclerview. To do as the picture below, you can do the following steps

Step 1.  Add libary Recyclerview in dependencies at file build.gradle

implementation 'com.android.support:recyclerview-v7:28.0.0'

Step 2. Create file layout name: activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorPrimary"
    tools:context=".MainActivity">
    <android.support.v7.widget.RecyclerView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</android.support.constraint.ConstraintLayout>

Step 3. Create file layout item custom : item_custom.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_margin="2dp"
    android:layout_height="wrap_content">
    <ImageView
        android:id="@+id/img_item"
        android:src="@drawable/cachua"
        android:layout_width="100dp"
        android:scaleType="fitXY"
        android:contentDescription="@string/app_name"
        android:layout_height="100dp" />
    <TextView
        android:id="@+id/tv_name"
        android:layout_width="match_parent"
        android:layout_toRightOf="@+id/img_item"
        android:layout_toEndOf="@+id/img_item"
        android:layout_centerVertical="true"
        android:text="@string/app_name"
        android:padding="10dp"
        android:textColor="#000"
        android:textSize="20sp"
        android:layout_height="wrap_content" />

</RelativeLayout>

Step 4. Create class model ItemAdapter : itemAdapter.class

package com.anhttvn.customrecyclerview.model;
public class ItemAdapter {
    private int image;
    private String text;
    public int getImage() {
        return image;
    }
    public void setImage(int image) {
        this.image = image;
    }
    public void setText(String text) {
        this.text = text;
    }
    public String getText() {
        return text;
    }
}

Step 5. Create class Adapter Recyclerview : ListAdapter.class

package com.anhttvn.customrecyclerview.adapter;
import android.content.Context;
import android.support.annotation.NonNull;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import com.anhttvn.customrecyclerview.R;
import com.anhttvn.customrecyclerview.model.ItemAdapter;
import java.util.List;
public class ListAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
    private List<ItemAdapter> mList;
    private Context mContext;
    public ListAdapter(List<ItemAdapter> list, Context context){
        super();
        mList = list;
        mContext = context;
    }
    @NonNull
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int i) {
        View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_custom, parent, false);
        ViewHolder viewHolder = new ViewHolder(v);
        return viewHolder;
    }
    @Override
    public void onBindViewHolder(@NonNull RecyclerView.ViewHolder viewHolder, int position) {
        ItemAdapter itemAdapter = mList.get(position);
        ((ViewHolder) viewHolder).mTv_name.setText(itemAdapter.getText());
        ((ViewHolder) viewHolder).mImg.setImageResource(itemAdapter.getImage());
    }
    @Override
    public int getItemCount() {
        return mList.size();
    }
    class ViewHolder extends RecyclerView.ViewHolder{
        public TextView mTv_name;
        public ImageView mImg;
        public ViewHolder(View itemView) {
            super(itemView);
            mTv_name = (TextView) itemView.findViewById(R.id.tv_name);
            mImg = (ImageView) itemView.findViewById(R.id.img_item);
        }
    }
}

Step 6.  Now us start do class Main.class

package com.anhttvn.customrecyclerview;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.RecyclerView;
import com.anhttvn.customrecyclerview.adapter.ListAdapter;
import com.anhttvn.customrecyclerview.model.ItemAdapter;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
    private RecyclerView mRecycleview;
    private List<ItemAdapter> mList = new ArrayList<>();
    private ListAdapter mAdapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        init();
        addList();
        adapter();
    }
    private void init(){
        mRecycleview = findViewById(R.id.listView);
    }
    private void addList(){
        ItemAdapter itemAdapter = new ItemAdapter();
        itemAdapter.setImage(R.drawable.cachua);
        itemAdapter.setText("Tomato");
        mList.add(itemAdapter);
        itemAdapter = new ItemAdapter();
        itemAdapter.setImage(R.drawable.bo);
        itemAdapter.setText("butter");
        mList.add(itemAdapter);
        itemAdapter = new ItemAdapter();
        itemAdapter.setImage(R.drawable.cam);
        itemAdapter.setText("oranges");
        mList.add(itemAdapter);
        itemAdapter = new ItemAdapter();
        itemAdapter.setImage(R.drawable.quaxoai);
        itemAdapter.setText("mango");
        mList.add(itemAdapter);
        itemAdapter = new ItemAdapter();
        itemAdapter.setImage(R.drawable.dau);
        itemAdapter.setText("strawberry");
        mList.add(itemAdapter);
        itemAdapter = new ItemAdapter();
        itemAdapter.setImage(R.drawable.tao);
        itemAdapter.setText("Apple");
        mList.add(itemAdapter);
        mList.add(itemAdapter);
        itemAdapter = new ItemAdapter();
        itemAdapter.setImage(R.drawable.oi);
        itemAdapter.setText("guava fruit");
        mList.add(itemAdapter);
    }
    private void adapter(){
        mAdapter = new ListAdapter(mList, this);
        mRecycleview.setAdapter(mAdapter);
        mAdapter.notifyDataSetChanged();
    }
}

 Link demo github.

Video demo youtube.