TableLayout vs GridLayout

Android Layout

If you are an Android Developer, you must have come across a situation when you have to show data in tabular form. In this situation you have two choices, TableLayout and GridLayout. Both layouts can do the job but in their own way, so which layout should be used in which situation,

Let’s go through definition and advantages of each of these layouts,

Table Layout : Table Layout is used to arrange the group of views into rows and columns. Table Layout containers do not display a border line for their columns, rows or cells. A Table will have as many columns as the row with the most cells.A table can also leave the cells empty.

TableLayout is just a layout manager, somewhat like a table in HTML. It does not itself do any scrolling, to have something that scrolls you must put the TableLayout in a ScrollView. This implies that all of the data you are displaying must be populated into the TableLayout up-front, so the ScrollView knows the total space it is to scroll in.

Table layout is useful if someone have low amount of data to display because every row of table layout will have to be instantiated and it won’t be recycled.

Grid Layout : A GridView is basically like a ListView, whose items are arranged in a strict grid. It is attached to an Adapter, and retrieves views from the Adapter has the user scrolls through it. All elements in the grid must be of same size. The user can move a visible selector through each item. The goal of a GridLayout is to display the data from an Adapter and let the user navigate and select each of the displayed items. The only difference from a ListView is that the items are put in a grid instead of in a vertical list.

An Adapter-based view should be used for any situation where you have a significant amount of and the user wants scrolling view, this is a lot more efficient than having to create the entire view hierarchy up-front to display your data.For the same UI, a GridLayout will generally be faster and take less memory than than a TableLayout.

Let’s take an example,

define a RecyclerView inside your Activity Layout,

<android.support.v7.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    />

create single grid cell Layout,

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding=".5dp">

    <TextView
        android:id="@+id/textview"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:background="@color/colorAccent"
        android:gravity="center" />


</RelativeLayout>

define and RecyclerView, LayoutManager and Adapter in your Activity,

private RecyclerView recycler;
private RecyclerView.LayoutManager manager;
private Adapter adapter;
private ArrayList<String> list=new ArrayList<>();

initialize all views in OnCreate,

recycler = findViewById(R.id.recyclerView);
recycler.setHasFixedSize(true);
manager = new GridLayoutManager(this, 5, GridLayoutManager.VERTICAL, false);
recycler.setLayoutManager(manager);
getList();    //initialize your list in this method
adapter = new Adapter(list,this);
recycler.setAdapter(adapter);

Create Adapter class,

public class Adapter extends RecyclerView.Adapter<Adapter.ViewHolder> {

    private ArrayList<String> list = new ArrayList<>();
    private Context context;

    public Adapter(ArrayList<String> list, Context context) {
        this.list = list;
        this.context = context;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(context).inflate(R.layout.single_unit, parent, false);
        ViewHolder holder = new ViewHolder(view);
        return holder;
    }
    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        holder.textView.setText(list.get(position));
    }
    @Override
    public int getItemCount() {
        return list.size();
    }

    public static class ViewHolder extends RecyclerView.ViewHolder {
        private TextView textView;
        public ViewHolder(View itemView) {
            super(itemView);
            textView = itemView.findViewById(R.id.textview);
        }
    }
}

on running your project you can see table view like this, I have modified some grids for a better understanding.

Conclusion : If the amount of data is low, fixed and don’t require scrolling then TableLayout should be used but if the data is large and require scrolling to access, GridLayout with RecyclerView should be used.