Hello World Hello World - 17 days ago 4
Android Question

Stretch GridView to fit full screen

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.

enter image description here

This is what I am getting

enter image description here

Any Help will be appreciated. Thanks in advance!

Answer

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:

Test GridLayout

Comments