How to divide tables evenly in a gridview?

Question

I'm trying to recreate the following layout in Android:

The grid does not have to grow dynamically, it will always be 5 columns & 2 rows. The orientation is fixed to landscape. Each cell has the exact same layout, just the data in the TextViews can change.

My current approach is to fill a GridLayout with TableLayouts and setting appropriate layout_row & layout_column for each TableLayout. Like so :

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:rowCount="2" 
    android:columnCount="4" 
    android:orientation="vertical">

<TableLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_row="0"
    android:layout_column="0"
    android:background="@color/colorAccent">

Which results in this:

Code from picture above : https://pastebin.com/khr9aGWf

I'm running into a few problems.

• I cannot get the cells to automatically scale to fit the screen.
• The size of this layout file is starting to become very large and hard to manage

Perhaps my approach is completely wrong and I need to go towards something where I define the layout of a cell once and dynamically fill a grid with it?

Any help would be greatly appreciated.

Answer 1

You can create this kind of layout using GridView

<GridView
android:id="@+id/list"
android:numColumns="5"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"/>

your gridview item layout

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_row="1"
    android:layout_column="0"
    android:background="@color/colorPrimary">

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView" />
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/textView5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView" />
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/textView4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView" />

    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/textView7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView" />
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/textView8"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView" />

        <TextView
            android:id="@+id/textView9"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView" />
    </TableRow>
</TableLayout>

GridviewAdapter.java

    public class GridviewAdapter extends BaseAdapter {

    Activity context;
    private LayoutInflater mInflater;
    TableLayout.LayoutParams params;

    public GridviewAdapter(Activity context)
    {
        this.context=context;
        mInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        params=new TableLayout.LayoutParams(new TableLayout.LayoutParams(
                ViewGroup.LayoutParams.WRAP_CONTENT,
                (int) ((getDeviceHeight(context)-getStatusBarHeight()) / 2)));

    }

    @NonNull
    @Override
    public View getView(final int position, View convertView, ViewGroup parent) {

        final ViewHolder holder;

        if (convertView == null) {
            convertView = mInflater.inflate(R.layout.list_item, null);

            holder = new ViewHolder();

            convertView.setTag(holder);
        } else {
            holder = (ViewHolder) convertView.getTag();
        }

        if(position%2==0)
        {
            convertView.setBackgroundColor(context.getResources().getColor(R.color.colorAccent));
        }else{
            convertView.setBackgroundColor(context.getResources().getColor(R.color.colorPrimary));
        }

        convertView.setLayoutParams(params);


        return convertView;
    }
    @Override
    public int getCount() {
        return 10;
    }

    @Override
    public String getItem(int position) {
        return "";
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    private class ViewHolder {

    }

    public static int getDeviceHeight(Context context) {

        WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
            Point point = new Point();
            wm.getDefaultDisplay().getSize(point);
            return point.y;
        } else {
            return wm.getDefaultDisplay().getHeight();
        }
    }

    public int getStatusBarHeight() {
        int result = 0;
        int resourceId = context.getResources().getIdentifier("status_bar_height", "dimen", "android");
        if (resourceId > 0) {
            result = context.getResources().getDimensionPixelSize(resourceId);
        }
        return result;
    }

}

and in your activity class add code like this

GridviewAdapter itemsAdapter = new GridviewAdapter(this);
 GridView listView = (GridView) findViewById(R.id.list);
 listView.setAdapter(itemsAdapter);

your output look like this