GridView children should stretch out to fill their GridView parent

Question

I use a GridView in order to add 9 ImageButtons that work as a menu in a screen. The ImageButtons have fixed dimensions. The problem is that these buttons do not stretch out to fill their GridView parent. I want them stretched out in order to fill the remaining space.

Is there a property I am missing?

Is there a way I can implement this from the adapter?

Or should I take the hard way of extending the GridView on my own?

score 0 · Answer 1 · answered May 24 '15 at 10:03

0

It sounds like you need to set the stretchMode property of your GridView. If I understand correctly you want the ImageButtons to stay the same size but be spread out across the GridView. For that you would need something like:

    <GridView
    android:id="@+id/grid_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:numColumns="3"
    android:columnWidth="80dp"
    android:stretchMode="spacingWidthUniform"
    >

See: Android Developer - Grid View - stretchMode for the different options

answered May 24 '15 at 10:03

Jahnold

7,623
2
37
31

Yes thats what I thought so too. But check this out http://imgur.com/GhQhH1y . I still get the same problem – George Daramouskas May 24 '15 at 10:05
Ah, you want them to fill the vertical space as well as horizontal? – Jahnold May 24 '15 at 10:07
Is there a particular reason you're using a GridView here rather than just having three LinearLayouts nested in a larger LinearLayout and using layoutWeight? – Jahnold May 24 '15 at 10:13
No reason. I just want to create the UI in that exact way and GridView seemed an appropriate selection and the stretching an appropriate property the GridView should have. Which I guess it doesn't? – George Daramouskas May 24 '15 at 10:17
Unfortunately it doesn't as far as I'm aware. GridView is more for loading datasets and displaying them as a grid such as files in a folder, or photos in a gallery. I think you'd be better using nested LinearLayouts and setting the layoutWeight property to make them stretch equally. – Jahnold May 24 '15 at 10:24
Before I head on to using your implementation i will take a shot with https://developer.android.com/reference/android/widget/GridLayout.html Checking the `Excess Space Distribution` paragraph hinted that this will probably be a solution. If that is not the case I am going with `LinearLayouts` and will be accepting your answer. – George Daramouskas May 24 '15 at 10:35

score 0 · Accepted Answer · edited May 23 '17 at 11:51

I wasn't able to find out a straightforward solution to my problem using GridView so I used GridLayout and with the help of the accepted answer:

GridLayout (not GridView) how to stretch all children evenly

I modified my layout to have 9 buttons that stretch appropriately I am posting the layout for further reference:

<GridLayout
    android:id="@+id/hotelHomeGridview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@+id/footerContainer"
    android:layout_below="@id/hotel_logo"
    android:columnCount="2"
    android:columnWidth="90dp"
    android:horizontalSpacing="10dp"
    android:numColumns="auto_fit"
    android:stretchMode="spacingWidthUniform"
    android:verticalSpacing="10dp" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <Space
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button 1" />

        <Space
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="start"
            android:text="Button 2" />

        <Space
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="start"
            android:text="Button 3" />

        <Space
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_column="0"
        android:layout_gravity="left|center_vertical"
        android:layout_row="0"
        android:orientation="horizontal" >

        <Space
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button 4" />

        <Space
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button 5" />

        <Space
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="start"
            android:text="Button 6" />

        <Space
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_column="0"
        android:layout_gravity="left|bottom"
        android:layout_row="0"
        android:orientation="horizontal" >

        <Space
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button 7" />

        <Space
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button 8" />

        <Space
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="start"
            android:text="Button 9" />

        <Space
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1" />
    </LinearLayout>
</GridLayout>

GridView children should stretch out to fill their GridView parent

2 Answers2