Android Table Layout With Recycler View

Android Table Layout With Recycler View. In this article, we will learn How to create the layout of a table in android. Here, we will implement a table layout in Android Studio with the help of Recycler View as shown below.

Android Table Layout With Recycler View

Android project structure

Step 1: Create a new project with an empty activity

MainActivity.java

• We are using an Array List as Dataset of DBHelper Class
• Our DBHelper Constructor has three parameters User Name, Email, id
• recyclerView is the object of RecyclerView class this object is used to manipulate recyclerView in our XML file
• findViewById method will link the object to view. R.id.recyclerView is recycler view unique id which we have assigned it to view in the XML file
• .add method will insert data into array list with new object parameters
• DividerItemDecoration will give spacing between the table_background.xml file
• LayoutManager is responsible for the positioning of views within recycler view
• LinearLayoutManager is used when layout manager is set in XML by RecyclerView
• The adapter is used to handle data and bind it to view we are using a custom adapter which is ListClass
• setAdapter method is used to assign the adapter to RecyclerView.

package com.example.tablelayoutwithrecyclerview;

import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.DividerItemDecoration;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import android.os.Bundle;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {
private ArrayList<DBHelper> arrayList = new ArrayList<>();
private RecyclerView recyclerView;
   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);
       recyclerView = findViewById(R.id.recyclerView);
       arrayList.add(new DBHelper("asdasd","",1));
       arrayList.add(new DBHelper("asd","",2));
       arrayList.add(new DBHelper("asdad","",3));
       arrayList.add(new DBHelper("sad","",4));
       arrayList.add(new DBHelper("sadd","",5));
       DividerItemDecoration dividerItemDecoration = new DividerItemDecoration(recyclerView.getContext(),
       new LinearLayoutManager(this).getOrientation());
       recyclerView.addItemDecoration(dividerItemDecoration);
       recyclerView.setLayoutManager(new LinearLayoutManager(this));
       recyclerView.setAdapter(new ListClass(arrayList,MainActivity.this));
   }
}

activity_main.xml

• RelativeLayout is our parent view group used to display children and align them
• Layout_width tag is used to set the width of the layout, match parent will set width to its same as a parent node
• Layout_height tag is used to set the height of layout, wrap content will change the height of view according to data fed into view
• RecyclerView is Recycler list view whenever used scroll down the child which is scrolled up will be recycled
• Layout_centerHorizontal tag will set the view centered on a horizontal plane

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
   tools:context=".MainActivity">

   <androidx.recyclerview.widget.RecyclerView
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:id="@+id/recyclerView"
       android:layout_marginBottom="10dp"/>

</RelativeLayout>

Step 2: Create Two new Classes ListView and DBHelper

ListClass.java

• In this class, we are creating an adapter for our Recycler View
• This Adapter class will be used to populate Recycler view with user data as Card
• Extend adapter class with RecyclerView.Adapter<OuterClass.InnerClass>
• Extend inner class with RecyclerView.ViewHolder class
• Now in the inner class, we use the constructor to assign objects to view
• Override abstract method in ListAdapter class
• onCreateViewHolder method is used to populate Recycler View which we Created in activity_main.xml with table_view..xml
• LayoutInflater is used to inflate Recycler view with Card View
• We pass an array to Recycler view and it gets populated with a card view for every entry of the array
• onBindViewHolder method is used to make changes to card view child nodes
• getItemCount() method will return the size of array
• In ViewHolder class we are assigning TextView Objects to view in the ViewHolder constructor

package com.example.tablelayoutwithrecyclerview;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import java.util.ArrayList;

public class ListClass extends RecyclerView.Adapter<ListClass.ViewHolder> {
   private ArrayList<DBHelper> arrayList;
   private Context context;

   public ListClass(ArrayList<DBHelper> arrayList, Context context) {
       this.arrayList = arrayList;
       this.context = context;
   }

   @NonNull
   @Override
   public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
       LayoutInflater layoutInflater = LayoutInflater.from(parent.getContext());
       View v =layoutInflater.inflate(R.layout.table_view,parent,false);
       return new ViewHolder(v);
   }

   @Override
   public void onBindViewHolder(@NonNull ViewHolder holder, int position) {

       String s=arrayList.get(position).getUserName();
       String s1=arrayList.get(position).getEmail();
       String s2=String.valueOf(arrayList.get(position).getId());
       holder.userName.setText(s);
       holder.Email.setText(s1);
       holder.id.setText(s2);
   }

   @Override
   public int getItemCount() {

       return arrayList.size();
   }

   class ViewHolder extends RecyclerView.ViewHolder{
       TextView userName,Email,id;
       public ViewHolder(@NonNull View itemView) {
           super(itemView);
           userName = (TextView) itemView.findViewById(R.id.name);
           Email = (TextView) itemView.findViewById(R.id.email);
           id = (TextView) itemView.findViewById(R.id.idNumber);
       }
   }
}

table_view.xml

• TableLayout is our parent view which contains TableRow view
• Childs in TableRow view will align next to each other in a row
• TextView will display a text field on the screen
• Id tag is used to give every view a unique id
• Background tag is used set background for the view
• Gravity tag will align text in TextView
• textColor tag will change the color of the text

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:stretchColumns="1,2,3"
   android:layout_margin="8dp"
   >
   <TableRow>
       <TextView
           android:id="@+id/name"
           android:ems="5"
           android:background="@drawable/table_background"
           android:gravity="center"
           android:padding="6dp"
           android:layout_marginRight="15dp"
           android:textColor="@color/white"
           />
       <TextView
           android:textColor="@color/white"
           android:padding="6dp"
           android:id="@+id/email"
           android:background="@drawable/table_background"
           android:ems="3"
           android:gravity="center"
           android:layout_marginRight="15dp"
           />
       <TextView
           android:textColor="@color/white"
           android:padding="6dp"
           android:gravity="center"
           android:background="@drawable/table_background"
           android:id="@+id/idNumber"
           android:ems="3"
           />
   </TableRow>
</TableLayout>

table_background.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:state_enabled="true" >
       <shape android:shape="rectangle" >
           <corners android:radius="10dp"/>
           <solid  android:color="#7B46C6"  android:type="linear"/>
           <padding android:left="10dp" android:right="10dp"/>
       </shape>
   </item>
</selector>

In this way, we created a Table layout in Android Studio with the help of Recycler View.