Categories
Studio

RecyclerView with Multiple View Types – Weekly Series (Day3)

The day3 post is here and as mentioned in the day1 post that I’ll cover a complex layout very soon, so here it is. In this tutorial, we will see how to add multiple view types to a single item in RecyclerView.

The simplest example had only one item in RecyclerView viz. String. In case you missed or skipped the previous blog post on How to add a RecyclerView then I recommend you to go read that post first.

Adding multiple items is relatively very easy. Remember, we had created a single_item XML layout file? Actually, we’ll modify it for our new purpose. Previously it had only one TextView but now it’ll have multiple TextViews.

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


    <TextView
        android:id="@+id/recycler_2_TV_model"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_marginEnd="9dp"
        android:layout_toStartOf="@+id/recycler_2_TV_price"
        android:fontFamily="sans-serif-condensed"
        android:gravity="center"
        android:padding="8dp"

        android:textColor="@color/common_google_signin_btn_text_light"
        android:textSize="18sp"
        android:textStyle="bold"
        android:typeface="sans" />

    <TextView
        android:id="@+id/recycler_2_TV_screenSize"
        android:textColor="@color/common_google_signin_btn_text_light"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/recycler_2_TV_model"
        android:layout_alignBottom="@+id/recycler_2_TV_model"
        android:layout_alignParentEnd="true"
        android:padding="8dp"

        android:textStyle="italic" />

    <TextView
        android:id="@+id/recycler_2_TV_brand"
        android:textColor="@color/common_google_signin_btn_text_light"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/recycler_2_TV_model"
        android:padding="4dp"

        android:textSize="18sp" />

    <TextView
        android:id="@+id/recycler_2_TV_res"
        android:textColor="@color/common_google_signin_btn_text_light"
        android:padding="4dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/recycler_2_TV_model"

        android:layout_alignEnd="@+id/recycler_2_TV_model" />

    <TextView
        android:id="@+id/recycler_2_TV_price"
        android:textColor="@color/common_google_signin_btn_text_light"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_below="@+id/recycler_2_TV_model"
        android:padding="4dp"

        android:textAlignment="center"
        android:textAllCaps="false"
        android:textStyle="bold" />
</RelativeLayout>

 

Now we’ll create a Laptop class which will contain a Brand name, Model, Screen resolution, price, and displaySize. Here’s the code:

public static class Laptops
{
    private String brand, model, resolution;
    private int price, displaySize;

    public Laptops(String brand, String model, String resolution, int price, int displaySize) {
        this.brand = brand;
        this.model = model;
        this.resolution = resolution;
        this.price = price;
        this.displaySize = displaySize;
    }

    public String getBrand() {
        return brand;
    }

    public String getModel() {
        return model;
    }

    public String getResolution() {
        return resolution;
    }

    public int getPrice() {
        return price;
    }

    public int getDisplaySize() {
        return displaySize;
    }

}

 

We’ll create ArrayList<Laptops> laptops (using the class we just created) and add some random fake data to it.

// Fake data.
ArrayList<Laptops> laptops = new ArrayList<>();
laptops.add(0, new Laptops("Apple", "Macbook Air", "FHD", 80000, 13));
laptops.add(1, new Laptops("Sony", "VPSK13IO", "HD",30000, 15));
laptops.add(2, new Laptops("Apple", "Macbook Pro", "UHD", 100000, 15));
laptops.add(3, new Laptops("HP", "Spectre", "UHD", 90000, 13));
laptops.add(4, new Laptops("HP", "VPSC", "HD", 20000, 15));
laptops.add(5, new Laptops("ASUS", "BHJS", "HD", 25000, 11));

Now go to your RecyclerView’s Adapter class and initialize the TextViews in ViewHolder class. After that, in onBindViewHolder function, set text to the TextViews.

...

@Override
public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
    // set the data to the layout.
    holder.modelTV.setText(dataset.get(position).getModel());
    holder.screensizeTV.setText(String.valueOf(dataset.get(position).getDisplaySize()));
    holder.brandTV.setText(dataset.get(position).getBrand());
    holder.resTV.setText(dataset.get(position).getResolution());
    holder.priceTV.setText(String.valueOf(dataset.get(position).getPrice()));
}

public class ViewHolder extends RecyclerView.ViewHolder {

    public TextView modelTV, screensizeTV, brandTV, resTV, priceTV;

    public ViewHolder(View itemView) {
        super(itemView);
        // init textviews
        modelTV = itemView.findViewById(R.id.recycler_2_TV_model);
        screensizeTV = itemView.findViewById(R.id.recycler_2_TV_screenSize);
        brandTV = itemView.findViewById(R.id.recycler_2_TV_brand);
        resTV = itemView.findViewById(R.id.recycler_2_TV_res);
        priceTV = itemView.findViewById(R.id.recycler_2_TV_price);
    }
}

...

You can add any widget of your choice like ImageView, Button, ImageButton and initialize and set its source in onBindViewHolder.

Bonus: Add a Divider

If you don’t want to see your data on a white background, you can add a divider with just two lines of code. You just need to paste this code in your OnCreate function where you initialized┬áthe RecyclerView.

// recyclerview divider
DividerItemDecoration divider = new DividerItemDecoration(this, layoutManager.getOrientation());
recyclerView.addItemDecoration(divider);

The complete code on Github.

Leave a Reply

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