Equal Column Widths for GridLayout

Nathan Sokalski 4,121 Reputation points
2021-08-25T22:55:58.83+00:00

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?

Xamarin
Xamarin
A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
5,301 questions
{count} votes

1 answer

Sort by: Most helpful
  1. JarvanZhang 23,951 Reputation points
    2021-08-27T08:22:29.75+00:00

    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.