RecyclerView with multiple views using custom adapter in Android

Last updated on March 13th, 2020 at 11:09 am

In this post i am going to explain how to inflate multiple view in RecyclerView in your android application. If you want to learn about RecyclerView please follow this link. This post help to make your app look much better and also explain you how to pass multiple view in your list.

RecyclerView with MultipleView

Step 1: Create a new project in your android studio and add dependencies in your project build.grade file

compile 'com.android.support:design:22.2.1'
compile 'com.android.support:recyclerview-v7:22.2.1'
compile 'com.android.support:cardview-v7:22.2.1'
compile 'com.android.support:appcompat-v7:22.2.1'

 

Step 2: Now create new layout file inside res ⇒ layout for custom toolbar toolbar.xml .

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/my_awesome_toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    android:gravity="center"
    android:minHeight="?attr/actionBarSize"
    app:theme="@style/BackArrow">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="56dp">

        <TextView
            android:id="@+id/titletool"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="@string/app_name"
            android:textColor="#fff"
            android:textSize="16dp"
            android:textStyle="bold|normal"
            android:visibility="visible" />


    </RelativeLayout>
</android.support.v7.widget.Toolbar>

 

Step 3: Now open your acitvity_main.xml file inside layout folder and include your toolbar and add RecyclerView as shown below

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    tools:context="com.recyclerviewwithmultipleview.MainActivity">

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

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

 

Step 4: Now create Multiple layout file which we are going to pass in our recycler view i create three different layout file which we are going to inflate in our RecyclerView . Here is file name with there code which i create. Place these file inside res  ⇒ layout folder. Below file contain simple code most of us familiar with that.

 

File 1: category_template_one.xml

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

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:background="#fff"
        android:elevation="1dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <ImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:src="@drawable/aaa" />

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

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="5dp"
                    android:text="Shubham Mahajan"
                    android:textColor="@color/colorPrimary"
                    android:textSize="16sp" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="5dp"
                    android:text="TrinityTuts"
                    android:textColor="#000"
                    android:textSize="15sp" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="5dp"
                    android:text="Android Author"
                    android:textColor="#000"
                    android:textSize="15sp" />
            </LinearLayout>
        </LinearLayout>
    </android.support.v7.widget.CardView>
</LinearLayout>

 

File 2. category_template_two.xml

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

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:background="#fff"
        android:elevation="1dp">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">


            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:gravity="center"
                android:orientation="vertical">

                <TextView
                    android:layout_width="256dp"
                    android:layout_height="wrap_content"
                    android:layout_margin="5dp"
                    android:text="Aneh Thakur"
                    android:textColor="@color/colorPrimary"
                    android:textSize="16sp" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="5dp"
                    android:text="Admin"
                    android:textColor="#000"
                    android:textSize="15sp" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="5dp"
                    android:text="Trinity Tuts"
                    android:textColor="#000"
                    android:textSize="15sp" />
            </LinearLayout>

            <ImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:layout_alignParentEnd="true"
                android:layout_alignParentRight="true"
                android:layout_alignParentTop="true"
                android:layout_gravity="center|right"
                android:src="@drawable/aaa" />
        </RelativeLayout>
    </android.support.v7.widget.CardView>
</LinearLayout>

 

File 3. category_template_three.xml

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

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:background="#fff"
        android:elevation="1dp">

        <HorizontalScrollView
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

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

                <ImageView
                    android:layout_width="150dp"
                    android:layout_height="150dp"
                    android:layout_alignParentEnd="true"
                    android:layout_alignParentRight="true"
                    android:layout_alignParentTop="true"
                    android:layout_gravity="center|right"
                    android:padding="5dp"
                    android:scaleType="fitXY"
                    android:src="@drawable/aaa" />

                <ImageView
                    android:layout_width="150dp"
                    android:layout_height="150dp"
                    android:layout_alignParentEnd="true"
                    android:layout_alignParentRight="true"
                    android:layout_alignParentTop="true"
                    android:layout_gravity="center|right"
                    android:padding="5dp"
                    android:scaleType="fitXY"
                    android:src="@drawable/aaa" />

                <ImageView
                    android:layout_width="150dp"
                    android:layout_height="150dp"
                    android:layout_alignParentEnd="true"
                    android:layout_alignParentRight="true"
                    android:layout_alignParentTop="true"
                    android:layout_gravity="center|right"
                    android:padding="5dp"
                    android:scaleType="fitXY"
                    android:src="@drawable/aaa" />

                <ImageView
                    android:layout_width="150dp"
                    android:layout_height="150dp"
                    android:layout_alignParentEnd="true"
                    android:layout_alignParentRight="true"
                    android:layout_alignParentTop="true"
                    android:layout_gravity="center|right"
                    android:padding="5dp"
                    android:scaleType="fitXY"
                    android:src="@drawable/aaa" />

                <ImageView
                    android:layout_width="150dp"
                    android:layout_height="150dp"
                    android:layout_alignParentEnd="true"
                    android:layout_alignParentRight="true"
                    android:layout_alignParentTop="true"
                    android:layout_gravity="center|right"
                    android:padding="5dp"
                    android:scaleType="fitXY"
                    android:src="@drawable/aaa" />

                <ImageView
                    android:layout_width="150dp"
                    android:layout_height="150dp"
                    android:layout_alignParentEnd="true"
                    android:layout_alignParentRight="true"
                    android:layout_alignParentTop="true"
                    android:layout_gravity="center|right"
                    android:padding="5dp"
                    android:scaleType="fitXY"
                    android:src="@drawable/aaa" />
            </LinearLayout>
        </HorizontalScrollView>
    </android.support.v7.widget.CardView>
</LinearLayout>

 

Step 5: Now we can create custom adapter which is backbone for this sample if you want to learn about custom adapter in RecyclerView please follow this post, also create class which in we going to create getter setter use in our app by our adapter. Open your custom Adapter class and add Override method getItemViewType . In this override method we set layout according to there position .

  @Override
    public int getItemViewType(int position) {

        if (position % 3 == 0) {
            return 1;
        } else if (position % 2 == 0) {
            return 2;
        } else {
            return 3;
        }
    }

 

Step 6: In Custom Adapter add following code to oncreateViewHolder method . In this we return view according to its view type.

@Override
    public CustomViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        switch (viewType) {
            case 1:
                View viewONE = LayoutInflater.from(parent.getContext()).inflate(R.layout.category_template_one, parent, false);
                CustomViewHolder rowONE = new CustomViewHolder(viewONE);
                return rowONE;

            case 2:
                View viewTWO = LayoutInflater.from(parent.getContext()).inflate(R.layout.category_template_two, parent, false);
                CustomViewHolder rowTWO = new CustomViewHolder(viewTWO);
                return rowTWO;

            case 3:
                View viewTHREE = LayoutInflater.from(parent.getContext()).inflate(R.layout.category_template_three, parent, false);
                CustomViewHolder rowTHREE = new CustomViewHolder(viewTHREE);
                return rowTHREE;

        }
        return null;
    }

 

Complete code for your RecyclerAdapter.java

package com.recyclerviewwithmultipleview;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.TextView;

import com.squareup.picasso.Picasso;

import java.util.ArrayList;
import java.util.List;


public class RecyclerAdapter extends RecyclerView.Adapter<RecyclerAdapter.CustomViewHolder> {
    private List<GetterSetter> feedItemList;
    private Context mContext;

    public RecyclerAdapter(Context context, ArrayList<GetterSetter> feedItemList) {
        this.feedItemList = feedItemList;
        this.mContext = context;

    }

    @Override
    public int getItemViewType(int position) {

        if (position % 3 == 0) {
            return 1;
        } else if (position % 2 == 0) {
            return 2;
        } else {
            return 3;
        }
    }

    @Override
    public CustomViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        switch (viewType) {
            case 1:
                View viewONE = LayoutInflater.from(parent.getContext()).inflate(R.layout.category_template_one, parent, false);
                CustomViewHolder rowONE = new CustomViewHolder(viewONE);
                return rowONE;

            case 2:
                View viewTWO = LayoutInflater.from(parent.getContext()).inflate(R.layout.category_template_two, parent, false);
                CustomViewHolder rowTWO = new CustomViewHolder(viewTWO);
                return rowTWO;

            case 3:
                View viewTHREE = LayoutInflater.from(parent.getContext()).inflate(R.layout.category_template_three, parent, false);
                CustomViewHolder rowTHREE = new CustomViewHolder(viewTHREE);
                return rowTHREE;

        }
        return null;
    }


    @Override
    public void onBindViewHolder(CustomViewHolder holder, int position) {
        GetterSetter dc_list = feedItemList.get(position);

        final int pos = position * 3;


    }

    private void setAnimation(FrameLayout container, int position) {
        Animation animation = AnimationUtils.loadAnimation(mContext, android.R.anim.slide_in_left);
        container.startAnimation(animation);
    }

    @Override
    public int getItemCount() {
        return (null != feedItemList ? feedItemList.size() : 0 / 0);
    }

    class CustomViewHolder extends RecyclerView.ViewHolder {

        ImageView imgl;
        TextView tvspecies;
        FrameLayout container;

        public CustomViewHolder(View itemView) {
            super(itemView);

        }
    }
}

 

Complete code for MainActivity.java

package com.recyclerviewwithmultipleview;

import android.content.Context;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    private RecyclerView mRecyclerView;
    private LinearLayoutManager mLayoutManager;
    private RecyclerAdapter mAdapter;
    private Context context;

    private ArrayList<GetterSetter> feedItemList;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //find recyclerview layout
        mRecyclerView = (RecyclerView) findViewById(R.id.recyclerview);
        mRecyclerView.setHasFixedSize(true);

        // recyclerview set layoutmanager
        mLayoutManager = new LinearLayoutManager(this);
        mRecyclerView.setLayoutManager(mLayoutManager);

        //adding data to arraylist
        feedItemList = new ArrayList<GetterSetter>();
        for (int i = 0; i < 20; i++) {
            GetterSetter getterSetter = new GetterSetter();
            feedItemList.add(getterSetter);
        }

        //recyclerview adapter
        mAdapter = new RecyclerAdapter(MainActivity.this, feedItemList);

        //set adpater for recyclerview
        mRecyclerView.setAdapter(mAdapter);

       
    }

}

Please follow above download link to download complete code for your project. Hope this sample code help you to learn about RecyclerView with mutiple view.