How to make a GridLayout fit screen size

Question

The GridLayout API docs is very difficult to learn        is there any one who can teach me how to set child Views to have something like  weight  of LinearLayout    Right now it looks like all are placed on the left hand side  I have tried many times and still can not make it like each one the half width of the screen   Edited    I don t know what can I do for when the childen are all wrap content            even if I want to set some image in specific size   this class helps me to make ImageView wrap content          it cannot operate normal   did I miss some setting

User · Answer

After many attempts I found what I was looking for in this layout. Even spaced LinearLayouts with automatically fitted ImageViews, with maintained aspect ratio. Works with landscape and portrait with any screen and image resolution.

Nexus 7 Nexus 5 Nexus 10

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffcc5d00" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical">


        <LinearLayout
            android:orientation="vertical"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">

            <LinearLayout
                android:orientation="horizontal"
                android:layout_width="fill_parent"
                android:layout_weight="1"
                android:layout_height="wrap_content">

                <LinearLayout
                    android:orientation="vertical"
                    android:layout_width="0dp"
                    android:layout_weight="1"
                    android:padding="10dip"
                    android:layout_height="fill_parent">

                    <ImageView
                        android:id="@+id/image1"
                        android:layout_height="fill_parent"
                        android:adjustViewBounds="true"
                        android:scaleType="fitCenter"
                        android:src="@drawable/stackoverflow"
                        android:layout_width="fill_parent"
                        android:layout_gravity="center" />
                </LinearLayout>

                <LinearLayout
                    android:orientation="vertical"
                    android:layout_width="0dp"
                    android:layout_weight="1"
                    android:padding="10dip"
                    android:layout_height="fill_parent">

                    <ImageView
                        android:id="@+id/image2"
                        android:layout_height="fill_parent"
                        android:adjustViewBounds="true"
                        android:scaleType="fitCenter"
                        android:src="@drawable/stackoverflow"
                        android:layout_width="fill_parent"
                        android:layout_gravity="center" />
                </LinearLayout>
            </LinearLayout>

            <LinearLayout
                android:orientation="horizontal"
                android:layout_weight="1"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content">

                <LinearLayout
                    android:orientation="vertical"
                    android:layout_width="0dp"
                    android:layout_weight="1"
                    android:padding="10dip"
                    android:layout_height="fill_parent">

                    <ImageView
                        android:id="@+id/image3"
                        android:layout_height="fill_parent"
                        android:adjustViewBounds="true"
                        android:scaleType="fitCenter"
                        android:src="@drawable/stackoverflow"
                        android:layout_width="fill_parent"
                        android:layout_gravity="center" />
                </LinearLayout>

                <LinearLayout
                    android:orientation="vertical"
                    android:layout_width="0dp"
                    android:layout_weight="1"
                    android:padding="10dip"
                    android:layout_height="fill_parent">

                    <ImageView
                        android:id="@+id/image4"
                        android:layout_height="fill_parent"
                        android:adjustViewBounds="true"
                        android:scaleType="fitCenter"
                        android:src="@drawable/stackoverflow"
                        android:layout_width="fill_parent"
                        android:layout_gravity="center" />
                </LinearLayout>
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>
</FrameLayout>

User · Answer

Note  The information below the horizontal line is no longer accurate with the introduction of Android  Lollipop  5  as GridLayout does accommodate the principle of weights since API level 21    Quoted from the Javadoc      Excess Space Distribution      As of API 21  GridLayout s distribution of excess space accomodates   the principle of weight  In the event that no weights are specified    the previous conventions are respected and columns and rows are taken   as flexible if their views specify some form of alignment within their   groups  The flexibility of a view is therefore influenced by its   alignment which is  in turn  typically defined by setting the gravity   property of the child s layout parameters  If either a weight or   alignment were defined along a given axis then the component is taken   as flexible in that direction  If no weight or alignment was set  the   component is instead assumed to be inflexible       Multiple components in the same row or column group are considered to   act in parallel  Such a group is flexible only if all of the   components within it are flexible  Row and column groups that sit   either side of a common boundary are instead considered to act in   series  The composite group made of these two elements is flexible if   one of its elements is flexible       To make a column stretch  make sure all of the components inside it   define a weight or a gravity  To prevent a column from stretching    ensure that one of the components in the column does not define a   weight or a gravity       When the principle of flexibility does not provide complete   disambiguation  GridLayout s algorithms favour rows and columns that   are closer to its right and bottom edges  To be more precise    GridLayout treats each of its layout parameters as a constraint in the   a set of variables that define the grid-lines along a given axis    During layout  GridLayout solves the constraints so as to return the   unique solution to those constraints for which all variables are   less-than-or-equal-to the corresponding value in any other valid   solution    It s also worth noting that android support v7 widget GridLayout contains the same information  Unfortunately it doesn t mention which version of the support library it was introduced with  but the commit that adds the functionality can be tracked back to July 2014  In November 2014  improvements in weight calculation and a bug was fixed   To be safe  make sure to import the latest version of the gridlayout-v7 library     The principle of  weights   as you re describing it  does not exist with GridLayout  This limitation is clearly mentioned in the documentation  excerpt below  That being said  there are some possibilities to use  gravity  for excess space distribution  I suggest you have  read through the linked documentation      Limitations      GridLayout does not provide support for the principle of weight  as   defined in weight  In general  it is not therefore possible to   configure a GridLayout to distribute excess space in non-trivial   proportions between multiple rows or columns  Some common use-cases   may nevertheless be accommodated as follows  To place equal amounts of   space around a component in a cell group  use CENTER alignment  or   gravity   For complete control over excess space distribution in a row   or column  use a LinearLayout subview to hold the components in the   associated cell group  When using either of these techniques  bear in   mind that cell groups may be defined to overlap    For an example and some practical pointers  take a look at last year s blog post introducing the GridLayout widget     Edit  I don t think there s an xml-based approach to scaling the tiles like in the Google Play app to  squares  or  rectangles  twice the length of those squares  However  it is certainly possible if you build your layout programmatically  All you really need to know in order two accomplish that is the device s screen dimensions   Below a  very   quick  n dirty approximation of the tiled layout in the Google Play app   Point size   new Point    getWindowManager   getDefaultDisplay   getSize size   int screenWidth   size x  int screenHeight   size y  int halfScreenWidth    int  screenWidth  0 5   int quarterScreenWidth    int  halfScreenWidth   0 5    Spec row1   GridLayout spec 0  2   Spec row2   GridLayout spec 2   Spec row3   GridLayout spec 3   Spec row4   GridLayout spec 4  2    Spec col0   GridLayout spec 0   Spec col1   GridLayout spec 1    Spec colspan2   GridLayout spec 0  2    GridLayout gridLayout   new GridLayout this   gridLayout setColumnCount 2   gridLayout setRowCount 15    TextView twoByTwo1   new TextView this   GridLayout LayoutParams first   new GridLayout LayoutParams row1  colspan2   first width   screenWidth  first height   quarterScreenWidth   2  twoByTwo1 setLayoutParams first   twoByTwo1 setGravity Gravity CENTER   twoByTwo1 setBackgroundColor Color RED   twoByTwo1 setText  TOP    twoByTwo1 setTextAppearance this  android R style TextAppearance Large   gridLayout addView twoByTwo1  first    TextView twoByOne1   new TextView this   GridLayout LayoutParams second   new GridLayout LayoutParams row2  col0   second width   halfScreenWidth  second height   quarterScreenWidth  twoByOne1 setLayoutParams second   twoByOne1 setBackgroundColor Color BLUE   twoByOne1 setText  Staff Choices    twoByOne1 setTextAppearance this  android R style TextAppearance Large   gridLayout addView twoByOne1  second    TextView twoByOne2   new TextView this   GridLayout LayoutParams third   new GridLayout LayoutParams row2  col1   third width   halfScreenWidth  third height   quarterScreenWidth  twoByOne2 setLayoutParams third   twoByOne2 setBackgroundColor Color GREEN   twoByOne2 setText  Games    twoByOne2 setTextAppearance this  android R style TextAppearance Large   gridLayout addView twoByOne2  third    TextView twoByOne3   new TextView this   GridLayout LayoutParams fourth   new GridLayout LayoutParams row3  col0   fourth width   halfScreenWidth  fourth height   quarterScreenWidth  twoByOne3 setLayoutParams fourth   twoByOne3 setBackgroundColor Color YELLOW   twoByOne3 setText  Editor s Choices    twoByOne3 setTextAppearance this  android R style TextAppearance Large Inverse   gridLayout addView twoByOne3  fourth    TextView twoByOne4   new TextView this   GridLayout LayoutParams fifth   new GridLayout LayoutParams row3  col1   fifth width   halfScreenWidth  fifth height   quarterScreenWidth  twoByOne4 setLayoutParams fifth   twoByOne4 setBackgroundColor Color MAGENTA   twoByOne4 setText  Something Else    twoByOne4 setTextAppearance this  android R style TextAppearance Large   gridLayout addView twoByOne4  fifth    TextView twoByTwo2   new TextView this   GridLayout LayoutParams sixth   new GridLayout LayoutParams row4  colspan2   sixth width   screenWidth  sixth height   quarterScreenWidth   2  twoByTwo2 setLayoutParams sixth   twoByTwo2 setGravity Gravity CENTER   twoByTwo2 setBackgroundColor Color WHITE   twoByTwo2 setText  BOTOM    twoByTwo2 setTextAppearance this  android R style TextAppearance Large Inverse   gridLayout addView twoByTwo2  sixth     The result will look somewhat like this  on my Galaxy Nexus

User · Answer

lt GridLayout         android layout width  match parent          android layout weight  3          android columnCount  2          android padding  10dp          android rowCount  3          android background   drawable background down          android layout height  0dp  gt             lt androidx cardview widget CardView             android layout height  0dp              android layout width  0dp              android layout columnWeight  1              android layout rowWeight  1              android layout margin  10dp              android elevation  10dp              app cardCornerRadius  15dp               gt               lt LinearLayout                 android weightSum  3                  android layout width  match parent                  android layout height  match parent                  android orientation  vertical                   gt                    lt ImageView                     android layout weight  2                      android layout width  50dp                      android layout height  50dp                      android layout margin  15dp                      android src   drawable user    gt                    lt TextView                     android layout width  wrap content                      android layout height  wrap content                      android text  Users                      android textSize  16sp                      android layout marginStart  15dp                      android layout marginLeft  15dp    gt               lt  LinearLayout gt            lt  androidx cardview widget CardView gt           lt androidx cardview widget CardView             android layout height  0dp              android layout width  0dp              android layout columnWeight  1              android layout rowWeight  1              android layout margin  10dp              android elevation  10dp              app cardCornerRadius  15dp               gt               lt LinearLayout                 android weightSum  3                  android layout width  match parent                  android layout height  match parent                  android orientation  vertical                   gt                    lt ImageView                     android layout weight  2                      android layout width  50dp                      android layout height  50dp                      android layout margin  15dp                      android src   drawable addusers    gt                    lt TextView                     android layout width  wrap content                      android layout height  wrap content                      android text  Add Users                      android textSize  16sp                      android layout marginStart  15dp                      android layout marginLeft  15dp    gt               lt  LinearLayout gt             lt  androidx cardview widget CardView gt            lt androidx cardview widget CardView             android layout height  0dp              android layout width  0dp              android layout columnWeight  1              android layout rowWeight  1              android layout margin  10dp              android elevation  10dp              app cardCornerRadius  15dp               gt               lt LinearLayout                 android weightSum  3                  android layout width  match parent                  android layout height  match parent                  android orientation  vertical                   gt                    lt ImageView                     android layout weight  2                      android layout width  50dp                      android layout height  50dp                      android layout margin  15dp                      android src   drawable newspaper    gt                    lt TextView                     android layout width  wrap content                      android layout height  wrap content                      android text  Report                      android textSize  16sp                      android layout marginStart  15dp                      android layout marginLeft  15dp    gt               lt  LinearLayout gt              lt  androidx cardview widget CardView gt           lt androidx cardview widget CardView             android layout height  0dp              android layout width  0dp              android layout columnWeight  1              android layout rowWeight  1              android layout margin  10dp              android elevation  10dp              app cardCornerRadius  5dp               gt               lt LinearLayout                 android weightSum  3                  android layout width  match parent                  android layout height  match parent                  android orientation  vertical                   gt                    lt ImageView                     android layout weight  2                      android layout width  50dp                      android layout height  50dp                      android layout margin  15dp                      android src   drawable settings    gt                    lt TextView                     android layout width  wrap content                      android layout height  wrap content                      android text  Settings                      android textSize  16sp                      android layout marginStart  15dp                      android layout marginLeft  15dp    gt               lt  LinearLayout gt             lt  androidx cardview widget CardView gt        lt  GridLayout gt    Full tutorials can be found here     Android Grid Layout With CardView and OnItemClickListener  2

User · Answer

For other peeps  If you have to use GridLayout due to project requirements then use it but I would suggest trying out TableLayout as it seems much easier to work with and achieves a similar result   Docs  https   developer android com reference android widget TableLayout html  Example    lt TableLayout     android layout width  match parent      android layout height  wrap content  gt        lt TableRow gt            lt Button             android id    id test1              android layout width  wrap content              android layout height  90dp              android text  Test 1              android drawableTop   mipmap android launcher                gt            lt Button             android id    id test2              android layout width  wrap content              android layout height  90dp              android text  Test 2              android drawableTop   mipmap android launcher                gt            lt Button             android id    id test3              android layout width  wrap content              android layout height  90dp              android text  Test 3              android drawableTop   mipmap android launcher                gt            lt Button             android id    id test4              android layout width  wrap content              android layout height  90dp              android text  Test 4              android drawableTop   mipmap android launcher                gt        lt  TableRow gt        lt TableRow gt            lt Button             android id    id test5              android layout width  wrap content              android layout height  90dp              android text  Test 5              android drawableTop   mipmap android launcher                gt            lt Button             android id    id test6              android layout width  wrap content              android layout height  90dp              android text  Test 6              android drawableTop   mipmap android launcher                gt        lt  TableRow gt    lt  TableLayout gt

User · Answer

Starting in API 21 the notion of weight was added to GridLayout   To support older android devices  you can use the GridLayout from the v7 support library   compile  com android support gridlayout-v7 22 2 1    The following XML gives an example of how you can use weights to fill the screen width    lt  xml version  1 0  encoding  utf-8   gt   lt android support v7 widget GridLayout     xmlns android  http   schemas android com apk res android      xmlns grid  http   schemas android com apk res-auto       android id    id choice grid      android layout width  fill parent      android layout height  wrap content      android layout centerHorizontal  true      android padding  4dp       grid alignmentMode  alignBounds      grid columnCount  2      grid rowOrderPreserved  false      grid useDefaultMargins  true  gt        lt TextView         android layout width  0dp          android layout height  100dp          grid layout columnWeight  1          grid layout gravity  fill horizontal          android gravity  center          android background   FF33B5E5          android text  Tile1    gt        lt TextView         android layout width  0dp          android layout height  100dp          grid layout columnWeight  1          grid layout gravity  fill horizontal          android gravity  center          android background   FF33B5E5          android text  Tile2    gt        lt TextView         android layout width  0dp          android layout height  100dp          grid layout columnWeight  1          grid layout gravity  fill horizontal          android gravity  center          android background   FF33B5E5          android text  Tile3    gt        lt TextView         android layout width  0dp          android layout height  100dp          grid layout columnWeight  1          grid layout gravity  fill horizontal          android gravity  center          android background   FF33B5E5          android text  Tile4    gt    lt  android support v7 widget GridLayout gt

User · Answer

Just a quick follow up and note that it is possible now to use the support library with weighted spacing in GridLayout to achieve what you want  see      As of API 21  GridLayout s distribution of excess space accomodates the principle of weight  In the event that no weights are specified  the previous conventions are respected and columns and rows are taken as flexible if their views specify some form of alignment within their groups    The flexibility of a view is therefore influenced by its alignment which is  in turn  typically defined by setting the gravity property of the child s layout parameters  If either a weight or alignment were defined along a given axis then the component is taken as flexible in that direction  If no weight or alignment was set  the component is instead assumed to be inflexible

User · Answer

If you use fragments you can prepare XML layout and than stratch critical elements programmatically  int thirdScreenWidth    int  screenWidth  0 33    View view   inflater inflate R layout fragment second  null   View  container   view findViewById R id rim1container    container getLayoutParams   width   thirdScreenWidth   2    container   view findViewById R id rim2container    container getLayoutParams   width   screenWidth - thirdScreenWidth   2    container   view findViewById R id rim3container    container getLayoutParams   width   screenWidth - thirdScreenWidth   2    This layout for 3 equal columns  First element takes 2x2 Result in the picture

User · Answer

I archive this using LinearLayout   lt  xml version  1 0  encoding  utf-8   gt   lt LinearLayout android layout width  match parent      android layout height  wrap content      android orientation  vertical      xmlns android  http   schemas android com apk res android  gt        lt LinearLayout         android layout width  fill parent          android layout height  wrap content  gt           lt TextView             android layout width  fill parent              android layout height  wrap content              android height  166dp              android text  Tile1              android gravity  center              android background   6f19e5   gt       lt  LinearLayout gt       lt LinearLayout         android layout width  match parent          android layout height  wrap content  gt           lt TextView             android text  Tile2              android layout width  0dp              android layout height  wrap content              android height  126dp              android gravity  center              android layout weight   50              android background   f1d600   gt            lt TextView             android text  Tile3              android layout width  0dp              android layout height  wrap content              android height  126dp              android gravity  center              android layout weight   50              android background   e75548   gt        lt  LinearLayout gt       lt LinearLayout         android layout width  match parent          android layout height  wrap content  gt           lt TextView             android text  Tile4              android layout width  0dp              android layout height  wrap content              android height  126dp              android gravity  center              android layout weight   50              android background   29d217   gt            lt TextView             android text  Tile5              android layout width  0dp              android layout height  wrap content              android height  126dp              android gravity  center              android layout weight   50              android background   e519cb   gt        lt  LinearLayout gt       lt LinearLayout         android layout width  fill parent          android layout height  fill parent  gt           lt TextView             android layout width  fill parent              android layout height  wrap content              android height  176dp              android text  Tile6              android gravity  center              android background   09eadd   gt       lt  LinearLayout gt   lt  LinearLayout gt

User · Answer

Do you know View getViewTreeObserver   addOnGlobalLayoutListener    By this you can calculate the sizes   I achieve your UI effect by GridView   GridView g  g setNumColumns 2   g setStretchMode GridView STRETCH SPACING UNIFORM

User · Answer

Giving match parent to inflated items will do the trick  GridLayout will automatically divide max parent length based on given column number and inflate those items fitting the whole screen

[android] How to make a GridLayout fit screen size

Examples related to android

Examples related to widget