Stretch GridView to fit full screen

Question

I want to stretch my GridView, which contains an ImageView and a TextView inside each grid, to cover the complete screen of a phone.

I have already tried lots of solutions given online, but none of them worked for me. Some of the answers which I have already tried are:

How can I force a GridView to use the whole screen (regardless of display size)?

android How to stretch rows in the gridview to fill screen?

Here is my code:

activity_layout.xml

<FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/gaming">
    <GridView
        android:id="@+id/categoryGridView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:verticalSpacing="1dp"
        android:horizontalSpacing="1dp"
        android:background="@android:color/transparent"
        android:numColumns="2"
        android:stretchMode="columnWidth"
        android:layout_weight="1" />
</FrameLayout>

category_grid_single.xml

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/relativelayout"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<ImageView
    android:id="@+id/gridImageView"
    android:layout_width="60dip"
    android:layout_height="60dip"
    android:scaleType="centerCrop"
    android:gravity="center"
    android:layout_centerInParent="true"
    android:layout_margin="1dp"/>
<TextView
    android:id="@+id/gridImageViewText"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/gridImageView"
    android:layout_margin="5dp"
    android:gravity="center"
    android:textSize="20sp"
    android:textStyle="bold"
    android:layout_centerHorizontal="true"
    android:textColor="@color/colorWhite" />
</RelativeLayout>

CustomAdapter.java

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    // TODO Auto-generated method stub
    View grid;
    if (convertView == null) {

        LayoutInflater inflater = (LayoutInflater) mContext
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        grid = inflater.inflate(R.layout.main_category_grid_single, null);
        grid.setMinimumHeight(mheight/3);//mheight is the Height of the screen

    } else {
        grid = convertView;
    }
    TextView textView = (TextView) grid.findViewById(R.id.gridImageViewText);
    ImageView imageView = (ImageView)grid.findViewById(R.id.gridImageView);
    textView.setText(category[position]);
    imageView.setImageResource(ImageId[position]);
    return grid;
}

I am trying to achieve a GridView similar to below Image. But currently after setting up my GridView I am getting empty space in the bottom. If there is any better way to achieve it other than the GridView then please suggest that too.

This is what I am getting

Any Help will be appreciated. Thanks in advance!

Answer 1

Checklist to recap main points for the grid described in Bryan's nice solution:

1. Add the compile directive

   • currently using: compile 'com.android.support:gridlayout-v7:25.3.1'

2. Update the layout to be android.support.v7.widget.GridLayout

   • watch out here, I missed this at first and made the mistake of omitting the full package name

3. Set app:columnCount="2"

4. Set each grid element with:

   app:layout_columnWeight="1" 
   app:layout_rowWeight="1"
   

---

demo xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.GridLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:columnCount="2"
    app:rowCount="2"
    app:orientation="horizontal"
    >

    <TextView
        android:id="@+id/m1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_gravity="center"
        app:layout_columnWeight="1"
        app:layout_rowWeight="1"
        android:text="m1"/>


    <TextView
        android:id="@+id/m2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_gravity="center"
        app:layout_columnWeight="1"
        app:layout_rowWeight="1"
        android:text="m2"/>


    <TextView
        android:id="@+id/m3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_gravity="center"
        app:layout_columnWeight="1"
        app:layout_rowWeight="1"
        android:text="m3"/>


    <TextView
        android:id="@+id/m4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_gravity="center"
        app:layout_columnWeight="1"
        app:layout_rowWeight="1"
        android:text="m4"/>


</android.support.v7.widget.GridLayout>

Answer 2

You can achieve this with a GridLayout, instead of a GridView, by using the layout_columnWeight and layout_rowWeight attributes. GridLayout was added in API level 14, but these attributes were not added until API level 21. But you can make use of the GridLayout as well as the layout_columnWeight and layout_rowWeight attributes back to API level 7 by using the v7 GridLayout Support Library:

compile 'com.android.support:gridlayout-v7:25.0.1'

Then, all you have to do is make sure every cell in the GridLayout has an equal layout_columnWeight and layout_rowWeight:

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent" android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout android:id="@+id/app_bar"
        android:layout_width="match_parent" android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar android:id="@+id/toolbar"
            android:layout_width="match_parent" android:layout_height="?attr/actionBarSize"
            app:popupTheme="@style/AppTheme.PopupOverlay"/>

    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.GridLayout
        android:id="@+id/recycler"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:columnCount="2"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <FrameLayout
            app:layout_columnWeight="1"
            app:layout_rowWeight="1"
            android:background="@color/black_alpha_26">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:text="YouTube"/>

        </FrameLayout>

        <FrameLayout
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:text="Videos"/>

        </FrameLayout>

        <FrameLayout
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:text="VR Apps"/>

        </FrameLayout>

        <FrameLayout
            app:layout_columnWeight="1"
            app:layout_rowWeight="1"
            android:background="@color/black_alpha_26">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:text="VR Movies"/>

        </FrameLayout>

        <FrameLayout
            app:layout_columnWeight="1"
            app:layout_rowWeight="1"
            android:background="@color/black_alpha_26">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:text="VR Games"/>

        </FrameLayout>

        <FrameLayout
            app:layout_columnWeight="1"
            app:layout_rowWeight="1">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:text="Shop"/>

        </FrameLayout>

    </android.support.v7.widget.GridLayout>

</android.support.design.widget.CoordinatorLayout>

This is the result I got: