GridLayout Column width

Question

I have 2 columns in my GridLayout. What I want to do is make those columns take up half of the width of the screen each and then have its child contents fill their own cells width/height. I tried setting the children to fill_parent but that just causes the first one to take over the entire layout. And it seems GridLayout doesn't support weight? Maybe there is a better layout to use, but I want a Grid style layout so that seems like the natural choice.

Solution 1

This code is available on pre API21 with support library!

I have a simple piece of code to show 4 buttons in a gridLayout of 2 columns that take 50% of the available space: perhaps it can help

<GridLayout
    android:id="@+id/grid"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:columnCount="2"
    >


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

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

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

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



</GridLayout>

Solution is perhaps this :

android:layout_gravity="fill"
android:layout_columnWeight="1"

Solution 2

For pre API 21, use support library:

add

compile 'com.android.support:appcompat-v7:23.1.1'
compile 'com.android.support:design:23.1.1'

to your dependencies.

Then in your xml file:

<android.support.v7.widget.GridLayout
                    xmlns:app="http://schemas.android.com/apk/res-auto"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    app:columnCount="2"
                    app:orientation="horizontal"
                    app:rowCount="1">

                    <TextView
                        android:text="1"
                        android:textStyle="bold"
                        app:layout_columnWeight="1"
                        />

                    <TextView
                        android:text="2"
                        android:textStyle="bold"
                        app:layout_columnWeight="1" />

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

Here note the use of "app" prefix and dont forget to add

xmlns:app="http://schemas.android.com/apk/res-auto"

to your xml file

Solution 3

adding views dynamically in a grid Layout of 2 columns that take 50% of the available space:

GridLayout gridLayout = new GridLayout();

View view; //it can be any view

GridLayout.LayoutParams param = new GridLayout.LayoutParams();

param.columnSpec = GridLayout.spec(GridLayout.UNDEFINED,GridLayout.FILL,1f);

param.width = 0;

view.setLayoutParams(param);

gridLayout.add(view);

in static way (in .xml file).

<android.support.v7.widget.GridLayout
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   app:alignmentMode="alignBounds"
   app:columnCount="2"
   app:columnOrderPreserved="false"
   app:orientation="horizontal"
   android:layout_margin="20dp"
   android:layout_marginBottom="30dp"
   android:padding="4dp"
   app:rowCount="2">

<TextView
    android:layout_marginTop="2dp"
    android:id="@+id/edit_profile_username"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_column="0"
    app:layout_row="0"
    app:layout_gravity="fill"
    app:layout_columnWeight="1"
    android:text="@string/user_name" />

<TextView
    android:layout_marginTop="2dp"
    android:id="@+id/edit_profile_first_name"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_column="1"
    app:layout_row="0"
    app:layout_gravity="fill"
    app:layout_columnWeight="1"
    android:text="@string/first_name" />

<TextView
    android:layout_marginTop="2dp"
    android:id="@+id/edit_profile_middle_name"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_column="0"
    app:layout_gravity="fill"
    app:layout_columnWeight="1"
    app:layout_row="1"
    android:text="@string/middle_name" />

<TextView
    android:layout_marginTop="2dp"
    android:id="@+id/edit_profile_last_name" 
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_column="1"
    app:layout_gravity="fill"
    app:layout_columnWeight="1"
    app:layout_row="1"
    android:text="@string/last_name" />

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

Solution 4

Ok, so I gave up on the grid view and just used a some linear layouts. I made a vertical one and then added 2 horizontals. It's slightly more involved than the grid view... but until I figure that out at least this works.

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical" >

        <ImageButton
            android:id="@+id/btn_mybutton"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:background="@color/pomegranate"
            android:contentDescription="@string/contentDescriptionmybutton"
            android:src="@drawable/ic_launcher" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical" >

        <ImageButton
            android:id="@+id/btn_prefs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:background="@color/pomegranate"
            android:contentDescription="@string/contentDescriptionSettings"
            android:src="@drawable/ic_settings" />

    </LinearLayout>

</LinearLayout>

And then i add this to make the buttons square :)

@Override
 public void onWindowFocusChanged(boolean hasFocus) {
  super.onWindowFocusChanged(hasFocus);

  btnPrefs.setMinimumHeight(btnPrefs.getWidth());
  btnVerse.setMinimumHeight(btnMyButton.getWidth());

 }

View more solutions

Comments

[MikkoP]

I wanted to make my buttons as high as long and I used the code you provided. It works, but I wonder why it doesn't have effect in onCreate in an Activity. Any ideas?

[oznus]

I it now available one pre API 21 with the support library latest release. Just add the dependency - com.android.support:gridlayout-v7:22.0.0

[Nigam Patro]

@oznus I tried with with this, still no use. Its not taking weight property.

[r3flss ExlUtr]

When using the new GridLayout you should use the app namespace, so it would be app:layout_gravity="fill"

[netimen]

In my experience for the weights to work properly you have to set layot_width to 0dp @NigamPatro hope this helps

[DerDerrr]

Just a heads up because this took me forever to figure out. If you are developping for API 28 or higher there is a new support library called AndroidX available. If android.useAndroidX is set to true in your gradle.properties file, the old support libraries will not work. For some reason this was the case for me. But all you have to do to fix that is use androidx.gridlayout.widget.GridLayout instead of android.support.v7.widget.GridLayout and youre good to go.

[Rob Rouse Jr.]

This is great. Also, remember to use android:layout_rowWeight="1" if you have multiple rows that you want to be the same

[FrankKrumnow]

Works like a charm! There is also a layout_rowWeight to be combined with layout_height="0dp".

[SK. Fuad]

Programmatical part works for me.

[HUSSENI ABDULHAKEEM]

with the programmatical solution, how can i make it stay within the confine of an specific height? keep taking the whole screen