Open In App

How to Create RecyclerView with Multiple ViewType in Android?

Improve
Improve
Like Article
Like
Save
Share
Report

RecyclerView forms a very crucial part of the UI in Android App development. It is especially important to optimize memory consumption during the display of a long list of items. A RecyclerView inflates a customized list of items. This list can have either all similar layouts or multiple distinct layouts. Here, such a RecyclerView with multiple ViewTypes is developed. Following is an example of Android RecyclerView with multiple views.
multiple-viewtype

Approach

Step 1: Add the required dependencies
Create a new project in Android Studio and add the following dependencies in build.gradle(:app) under the Gradle Scripts section:

implementation “androidx.recyclerview:recyclerview:1.1.0”
implementation “androidx.cardview:cardview:1.0.0”

For more up-to-date versions of the dependencies, click here. While the first dependency is mandatory, the second one is optional depending upon the UI requirements. Click on Sync Now and proceed.

Step 2: Implement RecyclerView in activity_main.xml

Create a layout that holds the main RecyclerView. Here, it has been created in the activity_main.xml file. The given layout contains merely a Welcome TextView and a RecyclerView, however, it can be customized as per the requirements. Code for activity_main.xml is given below.

activity_main.xml




<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <!--Welcome text-->
    <TextView
        android:id="@+id/heading"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Welcome to GFG!"
        android:textColor="#006600"
        android:textSize="20dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.058"></TextView>
  
    <!-- Main RecyclerView-->
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="15dp"
        android:layout_marginStart="15dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/heading"
        app:layout_constraintVertical_bias="0.061"
        android:paddingBottom="100dp"/>
  
</androidx.constraintlayout.widget.ConstraintLayout>


Step 3: Add the required drawable file

Before proceeding further, make sure all the necessary drawable resources are added under the drawable resource directory. In this tutorial, only the following icon has been used:
icon_two

Step 4: Create all the item layouts

Identify all the different layouts the RecyclerView is required to hold and implement them all in separate XML files under the layout resource directory. Here, two distinct layouts have been created. The first one is implemented in layout_one.xml while the second one in layout_two.xml. The first layout consists of just a TextView wrapped inside a CardView. The following is its implementation.

layout_one.xml




<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
  
    <!--parent CardView-->
    <androidx.cardview.widget.CardView
        android:id="@+id/cardview_one"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        android:layout_marginEnd="16dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:elevation="5dp">
  
        <!--LinearLayout inside the CardView-->
        <!--This layout is accessed to create
            toasts when this item is clicked-->
        <LinearLayout
            android:id="@+id/linearlayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">
  
            <!--This layout only holds a TextView
                inside a CardView-->
            <TextView
                android:id="@+id/text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="#000000"
                android:textSize="20dp"
                android:layout_margin="20dp"/>
  
        </LinearLayout>
    </androidx.cardview.widget.CardView>
  
    <!-- This is extra space given to maintain a 
         gap between two consecutive CardViews-->
    <Space
        android:layout_width="match_parent"
        android:layout_height="10dp"/>
  
</LinearLayout>


The second item holds three elements wrapped inside a CardView.

  • An ImageView
  • A TextView
  • Another TextView with a relatively smaller font size

layout_two.xml




<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:id="@+id/linearlayout"
    >
    <!--parent CardView-->
    <androidx.cardview.widget.CardView
        android:id="@+id/cardview_two"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        android:layout_marginEnd="16dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:elevation="5dp">
  
        <!--LinearLayout inside the CardView-->
        <!--This layout is accessed to create
             toasts when this item is clicked-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">
  
            <!--This layout consists of an ImageView 
                and two TextViews-->
            <ImageView
                android:id="@+id/image"
                android:layout_width="80dp"
                android:layout_height="80dp"/>
  
            <!-- The purpose of this LinearLayout  is 
                 to align the two TextViews Vertically-->
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:orientation="vertical">
  
                <!--These are the 2 TextViews in this layout-->
                <TextView
                    android:id="@+id/text_one"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10dp"
                    android:layout_marginStart="20dp"
                    android:textColor="#000000"
                    android:textSize="20dp"/>
  
                <TextView
                    android:id="@+id/text_two"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="#000000"
                    android:textSize="15dp"
                    android:layout_marginTop="10dp"
                    android:layout_marginStart="20dp"/>
  
            </LinearLayout>
        </LinearLayout>
  
    </androidx.cardview.widget.CardView>
    <!-- This is extra space given to 
         maintain a gap between two CardViews-->
    <Space
        android:layout_width="match_parent"
        android:layout_height="10dp"/>
  
</LinearLayout>


Step 5: Create an Item class

Create a Java class that holds the public constructors corresponding to each layout. Thus, two constructors have been created here in the ItemClass.java file. In addition to constructors, the getter and setter methods too are declared here. This is done in order to safely access the private variables of the ItemClass outside of it. This is how the ItemClass.java looks for the layouts created above:

ItemClass.java




package com.example.android.multilayoutrecyclerview;
  
// ItemClass
  
public class ItemClass {
  
    // Integers assigned to each layout
    // these are declared static so that they can
    // be accessed from the class name itself
    // And final so that they are not modified later
    public static final int LayoutOne = 0;
    public static final int LayoutTwo = 1;
  
    // This variable ViewType specifies
    // which out of the two layouts
    // is expected in the given item
    private int viewType;
  
    // String variable to hold the TextView
    // of the first item.
    private String text;
  
    // public constructor for the first layout
    public ItemClass(int viewType, String text)
    {
        this.text = text;
        this.viewType = viewType;
    }
  
    // getter and setter methods for the text variable
  
    public String getText() { return text; }
  
    public void setText(String text) { this.text = text; }
  
    // Variables for the item of second layout
    private int icon;
    private String text_one, text_two;
  
    // public constructor for the second layout
    public ItemClass(int viewType, int icon, String text_one,
                     String text_two)
    {
        this.icon = icon;
        this.text_one = text_one;
        this.text_two = text_two;
        this.viewType = viewType;
    }
  
    // getter and setter methods for
    // the variables of the second layout
  
    public int geticon() { return icon; }
  
    public void seticon(int icon) { this.icon = icon; }
  
    public String getText_one() { return text_one; }
  
    public void setText_one(String text_one)
    {
        this.text_one = text_one;
    }
  
    public String getText_two() { return text_two; }
  
    public void setText_two(String text_two)
    {
        this.text_two = text_two;
    }
  
    public int getViewType() { return viewType; }
  
    public void setViewType(int viewType)
    {
        this.viewType = viewType;
    }
}


Step 6: Create the Adapter class

Create an adapter class to display the contents of the RecyclerView. In the Adapter class for multiple ViewType RecyclerViews, the following method is overridden in addition to the conventional onCreateViewHolder(), onBindViewHolder() and getItemCount() methods. getItemViewType() method is solely responsible for choosing the layout corresponding to each item. Apart from adding an extra method, the other changes include defining a specific ViewHolder class for each of the item layouts. Follow the code given for a deeper understanding.

AdapterClass.java




package com.example.android.multilayoutrecyclerview;
  
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;
  
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
  
import java.util.List;
  
import static com.example.android.multilayoutrecyclerview.ItemClass.LayoutOne;
import static com.example.android.multilayoutrecyclerview.ItemClass.LayoutTwo;
  
public class AdapterClass extends RecyclerView.Adapter {
  
    private List<ItemClass> itemClassList;
  
    // public constructor for this class
    public AdapterClass(List<ItemClass> itemClassList)
    {
        this.itemClassList = itemClassList;
    }
  
    // Override the getItemViewType method.
    // This method uses a switch statement
    // to assign the layout to each item
    // depending on the viewType passed
  
    @Override
    public int getItemViewType(int position)
    {
        switch (itemClassList.get(position).getViewType()) {
        case 0:
            return LayoutOne;
        case 1:
            return LayoutTwo;
        default:
            return -1;
        }
    }
  
    // Create classes for each layout ViewHolder.
  
    class LayoutOneViewHolder
        extends RecyclerView.ViewHolder {
  
        private TextView textview;
        private LinearLayout linearLayout;
  
        public LayoutOneViewHolder(@NonNull View itemView)
        {
            super(itemView);
  
            // Find the Views
            textview = itemView.findViewById(R.id.text);
            linearLayout
                = itemView.findViewById(R.id.linearlayout);
        }
  
        // method to set the views that will
        // be used further in onBindViewHolder method.
        private void setView(String text)
        {
  
            textview.setText(text);
        }
    }
  
    // similarly a class for the second layout is also
    // created.
  
    class LayoutTwoViewHolder
        extends RecyclerView.ViewHolder {
  
        private ImageView icon;
        private TextView text_one, text_two;
        private LinearLayout linearLayout;
  
        public LayoutTwoViewHolder(@NonNull View itemView)
        {
            super(itemView);
            icon = itemView.findViewById(R.id.image);
            text_one = itemView.findViewById(R.id.text_one);
            text_two = itemView.findViewById(R.id.text_two);
            linearLayout
                = itemView.findViewById(R.id.linearlayout);
        }
  
        private void setViews(int image, String textOne,
                              String textTwo)
        {
            icon.setImageResource(image);
            text_one.setText(textOne);
            text_two.setText(textTwo);
        }
    }
  
    // In the onCreateViewHolder, inflate the
    // xml layout as per the viewType.
    // This method returns either of the
    // ViewHolder classes defined above,
    // depending upon the layout passed as a parameter.
  
    @NonNull
    @Override
    public RecyclerView.ViewHolder
    onCreateViewHolder(@NonNull ViewGroup parent,
                       int viewType)
    {
        switch (viewType) {
        case LayoutOne:
            View layoutOne
                = LayoutInflater.from(parent.getContext())
                      .inflate(R.layout.layout_one, parent,
                               false);
            return new LayoutOneViewHolder(layoutOne);
        case LayoutTwo:
            View layoutTwo
                = LayoutInflater.from(parent.getContext())
                      .inflate(R.layout.layout_two, parent,
                               false);
            return new LayoutTwoViewHolder(layoutTwo);
        default:
            return null;
        }
    }
  
    // In onBindViewHolder, set the Views for each element
    // of the layout using the methods defined in the
    // respective ViewHolder classes.
  
    @Override
    public void onBindViewHolder(
        @NonNull RecyclerView.ViewHolder holder,
        int position)
    {
  
        switch (itemClassList.get(position).getViewType()) {
        case LayoutOne:
  
            String text
                = itemClassList.get(position).getText();
            ((LayoutOneViewHolder)holder).setView(text);
  
            // The following code pops a toast message
            // when the item layout is clicked.
            // This message indicates the corresponding
            // layout.
            ((LayoutOneViewHolder)holder)
                .linearLayout.setOnClickListener(
                    new View.OnClickListener() {
                        @Override
                        public void onClick(View view)
                        {
  
                            Toast
                                .makeText(
                                    view.getContext(),
                                    "Hello from Layout One!",
                                    Toast.LENGTH_SHORT)
                                .show();
                        }
                    });
  
            break;
  
        case LayoutTwo:
            int image
                = itemClassList.get(position).geticon();
            String text_one
                = itemClassList.get(position).getText_one();
            String text_two
                = itemClassList.get(position).getText_two();
            ((LayoutTwoViewHolder)holder)
                .setViews(image, text_one, text_two);
            ((LayoutTwoViewHolder)holder)
                .linearLayout.setOnClickListener(
                    new View.OnClickListener() {
                        @Override
                        public void onClick(View view)
                        {
  
                            Toast
                                .makeText(
                                    view.getContext(),
                                    "Hello from Layout Two!",
                                    Toast.LENGTH_SHORT)
                                .show();
                        }
                    });
            break;
        default:
            return;
        }
    }
  
    // This method returns the count of items present in the
    // RecyclerView at any given time.
  
    @Override
    public int getItemCount()
    {
        return itemClassList.size();
    }
}


Step 7: Complete the MainActivity.java file

Following are the important tasks to be implemented in the MainActivity.java file.

  • Set the content view as the XML activity wherein the main RecyclerView has been implemented, here activity_main.xml.
  • Set the layout for the RecyclerView.
  • Pass arguments to the RecyclerView.
  • Set the Adapter.

MainActivity.java




package com.example.android.multilayoutrecyclerview;
  
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
  
import android.os.Bundle;
import android.widget.Adapter;
  
import java.util.ArrayList;
import java.util.List;
  
public class MainActivity extends AppCompatActivity {
  
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // From the MainActivity, find the RecyclerView.
        RecyclerView recyclerView
            = findViewById(R.id.recyclerView);
  
        // Create and set the layout manager
        // For the RecyclerView.
        LinearLayoutManager layoutManager
            = new LinearLayoutManager(this);
        recyclerView.setLayoutManager(layoutManager);
  
        List<ItemClass> itemClasses = new ArrayList<>();
  
        // pass the arguments
        itemClasses.add(new ItemClass(ItemClass.LayoutOne,
                                      "Item Type 1"));
        itemClasses.add(new ItemClass(ItemClass.LayoutOne,
                                      "Item Type 1"));
        itemClasses.add(new ItemClass(
            ItemClass.LayoutTwo, R.drawable.icon,
            "Item Type 2", "Text"));
        itemClasses.add(new ItemClass(ItemClass.LayoutOne,
                                      "Item Type 1"));
        itemClasses.add(new ItemClass(
            ItemClass.LayoutTwo, R.drawable.icon,
            "Item Type 2", "Text"));
        itemClasses.add(new ItemClass(
            ItemClass.LayoutTwo, R.drawable.icon,
            "Item Type 2", "Text"));
        itemClasses.add(new ItemClass(ItemClass.LayoutOne,
                                      "Item Type 1"));
        itemClasses.add(new ItemClass(
            ItemClass.LayoutTwo, R.drawable.icon,
            "Item Type 2", "Text"));
        AdapterClass adapterClass
            = new AdapterClass(itemClasses);
  
        AdapterClass adapter
            = new AdapterClass(itemClasses);
  
        // set the adapter
        recyclerView.setAdapter(adapter);
    }
}


Output: Run on Emulator



Last Updated : 31 Mar, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads