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