Equal Column Widths for GridLayout

Nathan Sokalski 4,111

I have a 2x2 GridLayout that contains 3 TextView(s). The first one spans both columns in the first row, and the other two use the columns in the second row. I want both columns to be of equal width. I have tried doing this using layout_columnWeight as follows:

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="wrap_content" android:layout_height="wrap_content"
android:columnCount="2" android:rowCount="2" tools:ignore="HardcodedText,HardcodedSize,Suspicious0dp,MissingDimension">
    <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" style="@style/ScoreLabelTextViewStyle"
android:layout_column="0" android:layout_row="0" android:layout_columnSpan="2" android:background="@color/Silver" tools:text="Player One"/>

    <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" style="@style/ScoreLabelTextViewStyle"
android:layout_column="0" android:layout_row="1" android:layout_columnWeight="1"
android:textSize="12dp" android:background="@color/Silver" android:text="Count"/>

    <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" style="@style/ScoreLabelTextViewStyle"
android:layout_column="1" android:layout_row="1" android:layout_columnWeight="1"
android:textSize="12dp" android:background="@color/Silver" android:text="Points"/>
</GridLayout>

However, this just causes the second column to use the remaining space. If I change layout_width to 0dp, only the second column is displayed. How can I make the columns equal?

Nathan Sokalski 4,111 Reputation points

2021-08-26T00:56:10.29+00:00

I noticed that if I set the layout_width of the GridLayout to a fixed width then it works, but if I use wrap_content it does not. Is there a way to do it without calculating the width?

JarvanZhang 23,961

For this function, try using android:layout_columnWeight property to adjust the taking space of each column.

<GridLayout 
    xmlns:android=" http://schemas.android.com/apk/res/android" 
    android:columnCount="2" 
    android:rowCount="2" 
    android:layout_width="match_parent" android:layout_height="match_parent"> 
    <Button 
        android:layout_row="0"
        android:layout_columnSpan="2" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content"/> 
    <TextView 
        android:text="testing"
        android:layout_column="0" 
        android:layout_columnWeight="1" 
        android:layout_gravity="center_horizontal" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content"/> 
    <TextView 
        android:text="testing" 
        android:layout_column="1" 
        android:layout_columnWeight="1" 
        android:layout_gravity="wrap_content" 
        android:layout_height="wrap_content"/> 
</GridLayout>

Nathan Sokalski 4,111 Reputation points

2021-08-26T03:02:12.36+00:00

Isn't that what I did on lines 8 & 12? I also noticed that your code does not have a layout_row in the TextView(s), wouldn't that put them on top of the Button (which is a TextView in my scenario)? I also cannot use match_parent for the GridLayout in my scenario.
JarvanZhang 23,961 Reputation points

2021-08-26T04:09:15.613+00:00

I also noticed that your code does not have a layout_row in the TextView(s), wouldn't that put them on top of the Button

@Nathan Sokalski Because I've set the row and columnSpan for the button, the textViews will be placed at the following row and column automatically. This is a mechanism, you could see this doc.

this just causes the second column to use the remaining space.

Please see the following screenshot. I add background for each textView for test, we can see that the last textView doesn't take all the remaining space.

I also cannot use match_parent for the GridLayout in my scenario.

It doesn't matter to set layout_width to match_parent or wrap_content. To make the columns have the euqal width, we need to let each row to take the entire width of the gridLayout which means seting layout_columnWeight for each row of the gridLayout. Please set layout_columnWeight for all the views in the gridLayout.

I add android:layout_columnWeight="1" to the first textView and it works as shown.
Nathan Sokalski 4,111 Reputation points

2021-08-26T15:51:49.94+00:00

Even when I include layout_columnWeight for all TextView(s) I get the following:
JarvanZhang 23,961 Reputation points

2021-08-27T01:14:03.12+00:00

The result may be related to the 'ScoreLabelTextViewStyle'. Because this part of the code is not available, I removed the style for test and it works fine. How do you define the style? Please post the related code about the style.

Nathan Sokalski 4,111

Here is the style:

<style name="ScoreLabelTextViewStyle">
    <item name="android:layout_height">30dp</item>
    <item name="android:layout_margin">0dp</item>
    <item name="android:padding">0px</item>
    <item name="android:layout_gravity">fill</item>
    <item name="android:gravity">center</item>
    <item name="android:includeFontPadding">false</item>
    <item name="android:fontFamily">@font/arialfamily</item>
    <item name="android:textStyle">bold</item>
    <item name="android:textSize">24dp</item>
    <item name="android:textColor">@color/Black</item>
</style>

1 answer

JarvanZhang 23,961

Hello,

Welcome to our Microsoft Q&A platform!

Hi, njsokalski. I reproduced the problem on my side. To avoid the issue, try using a LinearLayout to wrap the second row. Then setting layout_weight to specify the same width the two textViews. We also need to set android:layout_gravity to fill_horizontal for each row of the gridLayout.

Please check the code:

   <GridLayout   
       xmlns:android="http://schemas.android.com/apk/res/android"   
       xmlns:tools="http://schemas.android.com/tools"  
       xmlns:app="http://schemas.android.com/apk/res-auto"   
       android:layout_width="wrap_content" android:layout_height="wrap_content"  
       android:columnCount="2" android:rowCount="2"   
       android:id="@id/root"  
       tools:ignore="HardcodedText,HardcodedSize,Suspicious0dp,MissingDimension">  
       <TextView   
           android:layout_width="wrap_content"   
           android:layout_height="wrap_content"   
           style="@style/ScoreLabelTextViewStyle"  
           android:layout_row="0"   
           android:layout_columnSpan="2"    
           android:background="#ff00"  
           android:layout_gravity="fill_horizontal"  
           tools:text="Player One"  
           android:text="Player One"/>  
       <LinearLayout  
           android:orientation="horizontal"  
           android:layout_width="wrap_content"  
           android:layout_height="wrap_content"  
           android:layout_columnSpan="2"  
           android:layout_gravity="fill_horizontal">  
         <TextView  
             android:text="Counts"  
             style="@style/ScoreLabelTextViewStyle"  
             android:gravity="center_horizontal"  
             android:background="#aa0000"  
             android:layout_width="wrap_content"  
             android:layout_height="fill_parent"  
             android:layout_weight="1"  
             android:textSize="12sp"  
             android:textColor="#ffffff" />  
         <TextView  
             android:text="Points"  
             style="@style/ScoreLabelTextViewStyle"  
             android:gravity="center_horizontal"  
             android:background="#00aa00"  
             android:textSize="12sp"  
             android:layout_width="wrap_content"  
             android:layout_height="fill_parent"  
             android:layout_weight="1"  
             android:textColor="#ffffff" />  
       </LinearLayout>  
    </GridLayout>

Best Regards,

Jarvan Zhang

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

JarvanZhang 23,961 Reputation points

2021-08-31T05:31:43.077+00:00

Hi, @Nathan Sokalski
May I know whether your issue has been solved or not? If not, please share it in here. We can work together to figure it out.
Nathan Sokalski 4,111 Reputation points

2021-08-31T14:33:25.237+00:00

No, I haven't, but I basically stopped worrying about it since my app explicitly calculates & sets a fixed width anyway, so I guess my specific scenario was never really a "problem", but other scenarios where I do not do that could exist in the future (or with other people reading this post).
JarvanZhang 23,961 Reputation points

2021-09-01T01:07:54.42+00:00

Thanks for sharing the details.

Share via

Equal Column Widths for GridLayout

1 answer

Your answer