Today’s bright topic is about Android Recyclerview Multi Column With Sticky Header.
We will create one example with android studio in this tutorial. You will learn to make android cardview with two or more columns.
Multi column recyclerview means that every single row item is having more than one column.
This type of recyclerview creates a table like structure.
In many occasions, you want to make a layout where there are one or more sticky headers and then a table like structure.
For example, to show an order summary at restaurant app, you may have static headers like name of the restaurant.
After that you will show an order in the tabular form using recyclerview.
Here, this tutorial will help you get your goal.
Final UI
Now follow all the below steps to create this example.
Step 1. Having Dependencies
We are going to use recyclerview and cardview here. So we need to add it’s dependencies in
build.gradle(Module :app) file.
Write below lines in build.gradle(Module :app) file.
implementation 'com.android.support:recyclerview-v7:27.1.1' implementation 'com.android.support:cardview-v7:27.1.1'
Above lines will download necessary classes for recyclerview and cardview.
Step 2. Making Recycler Item File
Now we will create one layout file. This file will generate the view structure for each row of recyclerview.
Create a new file named recycler_item.xml in res->layout directory.
Copy the following source code in recycler_item.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="wrap_content"
android:orientation="vertical">
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
card_view:cardCornerRadius="4dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#e6ed17"
android:orientation="horizontal">
<TextView
android:id="@+id/tvProduct"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_weight="2"
android:gravity="center"
android:text="Product Name"
android:textColor="#000000"
android:textSize="20sp" />
<TextView
android:id="@+id/tvQty"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="Quantity"
android:textColor="#000"
android:textSize="20sp" />
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
- In the above code, I have taken <android.support.v7.widget.cardview> as a parent of the main layout. It will generate card structure.
- Under this cardview tag, I have taken one Linearlayout with horizontal orientation.
- Now, I have set two Textviews horizontally under this linearlayout.
- First textview is for product name and second is for product quantity.
Step 3. Making Food Model
The main purpose behind creating model class is to have proper data set to populate the recyclerview.
Prepare a new java class named FoodModel.java
Add the below code in FoodModel.java
public class FoodModel {
private String product;
private int qty;
public String getProduct() {
return product;
}
public void setProduct(String product) {
this.product = product;
}
public int getQty() {
return qty;
}
public void setQty(int qty) {
this.qty = qty;
}
}
- Above structure includes getter and setter methods for two variables.
- One variable is for product name and another is for quantity.
Step 3. Preparing Adapter
Let us create adapter class which will provide data to populate the recyclerview.
Make a new java class named FoodAdapter.java
Write down the following coding lines in FoodAdapter.java
import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import java.util.ArrayList;
public class FoodAdapter extends RecyclerView.Adapter<FoodAdapter.MyViewHolder> {
private LayoutInflater inflater;
private ArrayList<FoodModel> foodModelArrayList;
public FoodAdapter(Context ctx, ArrayList<FoodModel> foodModelArrayList){
inflater = LayoutInflater.from(ctx);
this.foodModelArrayList = foodModelArrayList;
}
@Override
public FoodAdapter.MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = inflater.inflate(R.layout.recycler_item, parent, false);
MyViewHolder holder = new MyViewHolder(view);
return holder;
}
@Override
public void onBindViewHolder(FoodAdapter.MyViewHolder holder, int position) {
holder.tvProduct.setText(foodModelArrayList.get(position).getProduct());
holder.tvQty.setText(String.valueOf(foodModelArrayList.get(position).getQty()));
}
@Override
public int getItemCount() {
return foodModelArrayList.size();
}
class MyViewHolder extends RecyclerView.ViewHolder{
private TextView tvProduct, tvQty;
public MyViewHolder(View itemView) {
super(itemView);
tvProduct = (TextView) itemView.findViewById(R.id.tvProduct);
tvQty = (TextView) itemView.findViewById(R.id.tvQty);
}
}
}
Going through above class
First of all, read the below code
public FoodAdapter(Context ctx, ArrayList<FoodModel> foodModelArrayList){
inflater = LayoutInflater.from(ctx);
this.foodModelArrayList = foodModelArrayList;
}
- It is the constructor of the adapter class.
- It receives context and arraylist from first and second parameter respectively.
- ArrayList contains the objects of the FoodModel class.
Consider the next coding lines
@Override
public FoodAdapter.MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = inflater.inflate(R.layout.recycler_item, parent, false);
MyViewHolder holder = new MyViewHolder(view);
return holder;
}
- Above method will inflate the recycler_item.xml file which we created in Step 2.
- Compiler will create layout using this recycler_item.xml file for every row.
Step 4. Final Changes in Main Classes
Last thing is to update activity_main.xml and MainActivity.java files.
Replace the existing code of activity_main.xml with the below lines
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<TextView
android:layout_width="match_parent"
android:layout_height="60dp"
android:gravity="center"
android:background="#f1cc7e"
android:textSize="30sp"
android:textColor="#000"
android:text="Aizy Restaurant"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="60dp"
android:gravity="center"
android:background="#c95fae"
android:textSize="25dp"
android:textColor="#fdfdfd"
android:text="Oeder Summary"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#2d1ed4"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="50dp"
android:textColor="#fff"
android:textSize="20sp"
android:gravity="center"
android:layout_weight="2"
android:text="Product Name"/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textColor="#fff"
android:textSize="20sp"
android:gravity="center"
android:layout_weight="1"
android:text="Quantity"/>
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="20dp"
android:id="@+id/recycler">
</android.support.v7.widget.RecyclerView>
</LinearLayout>
- Here, I have taken two textviews at the top and then one linearlayout with horizontal orientation.
- First textview is showing the name of the restaurant and second one is the heading of the page.
- After linearlayout I have defined our recyclerview.
Now it is time to write the MainActivity.java as per below code
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
private String[] Products = new String[]{"Pizza", "Burger", "Pasta", "Salad", "Rice","Sandwich","Chips"};
private int[] Qty = new int[]{3, 4, 2, 1, 5,8,20};
private ArrayList<FoodModel> foodModelArrayList;
private RecyclerView recyclerView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
recyclerView = findViewById(R.id.recycler);
//foodModelArrayList = new ArrayList<>();
foodModelArrayList = populateList();
FoodAdapter foodAdapter = new FoodAdapter(this,foodModelArrayList);
recyclerView.setAdapter(foodAdapter);
recyclerView.setLayoutManager(new LinearLayoutManager(getApplicationContext(), LinearLayoutManager.VERTICAL, false));
}
private ArrayList<FoodModel> populateList(){
ArrayList<FoodModel> list = new ArrayList<>();
for(int i = 0; i < 7; i++){
FoodModel foodModel = new FoodModel();
foodModel.setProduct(Products[i]);
foodModel.setQty(Qty[i]);
list.add(foodModel);
}
return list;
}
}
Measuring Above Code
Following are the definitions of the required objects.
private String[] Products = new String[]{"Pizza", "Burger", "Pasta", "Salad", "Rice","Sandwich","Chips"};
private int[] Qty = new int[]{3, 4, 2, 1, 5,8,20};
private ArrayList<FoodModel> foodModelArrayList;
private RecyclerView recyclerView;
- First line is making a string array named Products. It includes various product names.
- Second line is creating an integer array which holds the quantity of the products.
- Third line will prepare an arraylist (foodModelArrayList) with the objects of the FoodModel class.
- Last line will simply make an object of recyclerview.
Consider the below line
foodModelArrayList = populateList();
- Above line is setting the data in to the foodModelArrayList.
- Compiler will use populateList() method to generate the data.
private ArrayList<FoodModel> populateList(){
ArrayList<FoodModel> list = new ArrayList<>();
for(int i = 0; i < 7; i++){
FoodModel foodModel = new FoodModel();
foodModel.setProduct(Products[i]);
foodModel.setQty(Qty[i]);
list.add(foodModel);
}
return list;
}
- Above lines are making the populateList() method.
- Here, Compiler will create one for loop with seven iterations.
- During every iteration, it will create one object of FoodModel class. Then it will set the product name and quantity to that object.
- After this, compiler will simply add that object in the arraylist.
Download Source Code For Android RecyclerView Multi Column Example
[sociallocker]Download Source Code For RecyclerView_Multi_Column[/sociallocker]