question

njsokalski avatar image
0 Votes"
njsokalski asked RobCaplan edited

Equal Column Widths for GridLayout

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?

dotnet-xamarin
· 7
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

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?

0 Votes 0 ·

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>
0 Votes 0 ·

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.

0 Votes 0 ·

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

@njsokalski 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.
126538-image.png

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.

126555-image.png


0 Votes 0 ·
image.png (2.0 KiB)
Show more comments

1 Answer

JarvanZhang-MSFT avatar image
0 Votes"
JarvanZhang-MSFT answered JarvanZhang-MSFT commented

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.



· 3
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi, @njsokalski
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.

0 Votes 0 ·

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).

0 Votes 0 ·

Thanks for sharing the details.

0 Votes 0 ·