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);