question

njsokalski avatar image
0 Votes"
njsokalski asked RobCaplan edited

GridLayout Not Resizing Buttons

I have a GridLayout with a columnCount of 6, in which I want to place several Button(s). However, the Buttons are not being resized correctly. Here is the code for the Button(s) (the only difference between the Button(s) is the layout_column and text properties):

 <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_column="0" android:layout_row="0"
     android:background="@drawable/tabborder" android:textColor="@color/Black" android:textSize="16dp" android:fontFamily="@font/arialfamily"
     android:layout_marginLeft="3dp" android:layout_marginRight="3dp" android:layout_marginTop="3dp" android:layout_marginBottom="0dp"
     android:paddingLeft="0dp" android:paddingRight="0dp" android:paddingTop="0dp" android:paddingBottom="0dp"
     android:textStyle="bold" android:textAllCaps="false" android:stateListAnimator="@null" android:includeFontPadding="false" tools:text="Names"/>

And the tabborder (used for the background property) is the following:

 <?xml version="1.0" encoding="utf-8" ?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
     <solid android:color="@color/Gray"/>
     <corners android:bottomLeftRadius="0dp" android:bottomRightRadius="0dp" android:topLeftRadius="6dp" android:topRightRadius="6dp"/>
 </shape>

And here are the screenshots:

111455-screenshot-2021-07-03-123102.png

111563-screenshot-2021-07-03-123713.png

It seems like the Button(s) have a minimum size (although you can see in the code that they do not). Also notice that the Button(s) are cropped on the right, although the width of the other stuff is appropriately resized. Why are the Button(s) not being appropriately resized?




dotnet-xamarin
· 4
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.

You can set android:layout_width="0" and android:layout_columnWeight="1" for every Button, Here is running screeshot.

111823-image.png

But if you have a button with a long text, this height will be adjusted.

111729-image.png


0 Votes 0 ·
image.png (36.1 KiB)
image.png (22.1 KiB)

That is great if I want all buttons to be the same width & use the total width of the screen, but what about varying widths & only using the minimum width? I have 5 buttons, so I gave my GridLayout a columnCount of 6 (so that I could a leftover blank column at the end). I want the buttons to use only the minimum width (I know my example has buttons similar in width that fit nicely to fill the total width, but that is just coincidence) so that unused space is empty. I also noticed in your screenshot that your code has a columnCount of 5, but you have 6 buttons. Is that correct (I assumed it was supposed to be columnCount of 6)?

0 Votes 0 ·

If you use same android:layout_columnWeight="1" for every button, Your width will be divided equally. No matter your Button's text length. If you add a new Button to this GridLayout, width will be divided equally again.

I also noticed in your screenshot that your code has a columnCount of 5, but you have 6 buttons. Is that correct (I assumed it was supposed to be columnCount of 6)?

Actually, If you do not set columnCount , you can get same result. you can try it, because you have used android:layout_columnWeight="1" to divide screen equally. Here is my code.


0 Votes 0 ·
layout.txt (1.3 KiB)
Show more comments
LeonLu-MSFT avatar image
0 Votes"
LeonLu-MSFT answered LeonLu-MSFT commented

Hello,​

Welcome to our Microsoft Q&A platform!

Do you want to achieve the result like following screenshot?

112390-image.png

If you are leaving extra space at the end, we cannot use Api to achieve if using android:layout_columnWeight="1", but we can add new button in the GridLayout and set the background to transparent, here is code.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <GridLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:columnCount="6"
        android:rowCount="1"
        >
        <Button
            android:layout_column="0"
            android:layout_row="0"
            android:layout_width="0px"
            android:layout_height="wrap_content"
            android:text="Btn1"
            android:layout_columnWeight="1"
            />
        <Button
            android:layout_column="1"
              android:layout_row="0"
            android:layout_width="0px"
            android:layout_height="wrap_content"
            android:text="Btn2"
            android:layout_columnWeight="1"
            />
        <Button
            android:layout_column="2"
              android:layout_row="0"
            android:layout_width="0px"
            android:layout_height="wrap_content"
            android:text="Btn3"
            android:layout_columnWeight="1"
            />
        <Button
            android:layout_column="3"
              android:layout_row="0"
            android:layout_width="0px"
            android:layout_height="wrap_content"
            android:text="Btn4"
            android:layout_columnWeight="1"
            />
        <Button
            android:text="Btn5"
              android:layout_row="0"
            android:layout_column="4"
            android:layout_width="0px"
            android:layout_height="wrap_content"
           
            android:layout_columnWeight="1"
            />
          <Button
            android:text="Btn6"
            android:layout_row="0"
            android:layout_column="5"
            android:layout_width="0px"
            android:layout_height="wrap_content"
           android:background="@android:color/transparent"
            android:layout_columnWeight="1"
            />

    </GridLayout>
</LinearLayout>




Best Regards,

Leon Lu



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.



image.png (17.6 KiB)
· 2
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.

That will achieve the empty space like I want, but it still forces all buttons to be the same width rather than only using the minimum width.

0 Votes 0 ·

Yes, Based on my research, I think GridLayout cannot meet your requirement. using the minimum width of button, I think you want to set the width to the wrap_content, But all of Button set to the wrap_content, it will over the screen. So we can do not use gridlayout, just set specific with for all of buttons, then put the buttons to the horizontal`LinearLayout`.

0 Votes 0 ·
njsokalski avatar image
0 Votes"
njsokalski answered LeonLu-MSFT commented

Thank you for that information, I will try to hopefully find some other combination of layouts & properties that will hopefully do what I need. Thank you again for your help.

· 1
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.

You are welcome.

0 Votes 0 ·