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!

for your text view do android:layout_width="match_parent" if that doesn't work give weight as 1 and see — Manohar, Nov 16 '16 at 13:21
can you keep the screenshot of how you are getting it might help? — Manohar, Nov 16 '16 at 13:35
did you try this? http://stackoverflow.com/a/11049803/6952986 — JuLes, Nov 16 '16 at 13:41
try using debug, check the height before and after setting the `grid.setMinimumHeight` — JuLes, Nov 16 '16 at 13:58
The picture above that you use as an example actually *does* have extra space at the bottom (you have to look closely). I assume you want the views to take up the entire space of the screen? Will there always be six views in the grid? — Bryan, Nov 16 '16 at 19:53

score 4 · Accepted Answer · answered Nov 16 '16 at 20:30

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:

score 1 · Answer 2 · answered May 31 '17 at 04:27

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

Add the compile directive
- currently using: compile 'com.android.support:gridlayout-v7:25.3.1'
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
Set app:columnCount="2"

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>

Stretch GridView to fit full screen

2 Answers2