GridLayout & Automatic Cell Sizing

Question

In UWP & Xamarin.Forms, grid layouts defined using widths & heights, including the possible values of Auto & *. However, in Xamarin.Android's GridLayout, they are defined by specifying the number of columns & rows. This is fine if the grid contents have predetermined explicit sizes, but when the contents have dynamic or unknown sizes, it makes it hard to use. In my particular case, I want an EditText with 2 Buttons to the right. I want the containing GridLayout to use the full width of the screen (so I specified android:layout_width="match_parent"). The Buttons have fixed widths & heights, and are in columns 1 & 2). However, the EditText has (almost) no width when empty, and if I specify android:layout_width="match_parent" it does not leave space for the Buttons. In UWP or Xamarin.Forms I would have specified widths of *,Auto,Auto, but this is not an option in Xamarin.Android. I'm not exactly sure how to use properties such as android:layout_columnWeight, or what any other solutions might be. How do I get layouts like this? Are there any good tutorials or examples of how to use GridLayout when sizes need to be dynamic? I find the layout system in Xamarin.Android very hard to use. Thanks.

Answer 1

Hello,​

Welcome to our Microsoft Q&A platform!

Are there any good tutorials or examples of how to use GridLayout when sizes need to be dynamic?

For this function, try the two solution below:

1.Try to set android:layout_columnWeight for each cell and set android:layout_width to wrap_content. The width of the editText will be changed when inputting words to it continously.

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

2.Or using a LinearLayout to wrap the views of the row cells, the views's width will work like the Auto style

   <GridLayout xmlns:android="http://schemas.android.com/apk/res/android"  
           android:layout_width="match_parent"  
           android:layout_height="match_parent"      
           android:rowCount="1"  
           android:columnCount="2">  
       <LinearLayout  
           android:layout_columnSpan="2"  
           android:layout_row="0"  
           android:layout_width="match_parent"  
           android:layout_height="wrap_content"  
           android:orientation="horizontal">  
           <Button  
               android:text="button"  
               android:layout_width="wrap_content"  
               android:layout_height="wrap_content" />  
           <EditText  
               android:hint="edit test"  
               android:gravity="center_horizontal"  
               android:layout_width="wrap_content"  
               android:layout_height="wrap_content" />  
       </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.