How to align view in grid cells of GridLayout center?

Question

I have a simple gridlayout of 2x2. 3 of them have a view of red, green and blue. I want them to be center aligned in the grid's cells. My layout is as below, but the view are top-left aligned even when I have put layout_gravity for all the views as center. How could I solve this?

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.elyeproj.griddrag.MainActivity">

    <GridLayout
        android:id="@+id/container_grid"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:columnCount="2"
        android:rowCount="2"
        android:orientation="horizontal">
        <View
            android:id="@+id/view_red"
            android:layout_height="100dp"
            android:layout_width="100dp"
            android:layout_gravity="center"
            android:background="#ff0000" />

        <View
            android:id="@+id/view_green"
            android:layout_height="100dp"
            android:layout_width="100dp"
            android:layout_gravity="center"
            android:background="#00ff00" />

        <View
            android:id="@+id/view_blue"
            android:layout_height="100dp"
            android:layout_width="100dp"
            android:layout_gravity="center"
            android:background="#0000ff" />
    </GridLayout>
</RelativeLayout>

score 1 · Accepted Answer · edited May 23 '17 at 12:33

1

the grid layout items are wrap so you better to use weight to align them properly as you want. below xml is what you want:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
>

<GridLayout
    android:id="@+id/container_grid"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnCount="2"
    android:rowCount="3"
    android:orientation="horizontal">

    <View
        android:id="@+id/view_red"
        android:layout_height="100dp"
        android:layout_width="100dp"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:layout_gravity="center"
        android:background="#ff0000"
        android:layout_row="0"
        android:layout_column="0" />

    <View
        android:id="@+id/view_green"
        android:layout_height="100dp"
        android:layout_width="100dp"
        android:layout_columnWeight="1"
        android:layout_gravity="center"
        android:background="#00ff00"
        android:layout_row="0"
        android:layout_column="1" />

    <View
        android:id="@+id/view_blue"
        android:layout_height="100dp"
        android:layout_width="100dp"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:layout_gravity="center"
        android:background="#0000ff"
        android:layout_row="1"
        android:layout_column="0" />
    </GridLayout>
</RelativeLayout>

see the link below for another solution using linearlayout for api below 21: GridLayout (not GridView) how to stretch all children evenly

edited May 23 '17 at 12:33

Community

1
1

answered Oct 09 '16 at 05:56

Amir Ziarati

14,248
11
47
52

Great! Unfortunately it only works on API21 :(. What if I want it to supported earlier version? – Elye Oct 09 '16 at 06:37
yes, for lower apis you must do it in java code. just calculating the size of GridLayout and then setting the size of view precisely (by pixel) instead of using weight ;) accept the answer if it was helpful – Amir Ziarati Oct 09 '16 at 06:46
see this page for a better solution under 21 : http://stackoverflow.com/questions/10016343/gridlayout-not-gridview-how-to-stretch-all-children-evenly – Amir Ziarati Oct 09 '16 at 06:50
Thanks. checkout the site, and can't find a good solution for pre-21. If you have that solution proposed, I will definitely tick this as the answer. I have upvote your answer though as it helps. – Elye Oct 09 '16 at 07:38
look the url i sent you. it shows a good way to do it with linearlayout its so damn easy. – Amir Ziarati Oct 09 '16 at 07:40
Agreed that LinearLayout would solve what I want here. But I have other intent for the Gridlayout which will not be solvable using LinearLayout. I just simplify my Gridlayout on this, to explore on solving this first. – Elye Oct 09 '16 at 07:59
I have posted the question of pre-v 21 support in http://stackoverflow.com/questions/39954438/how-to-support-layout-columnweight-and-layout-rowweight-in-pre-api-21. So this answer has fulfill my question here. Thanks! – Elye Oct 10 '16 at 08:45

score 1 · Answer 2 · answered Oct 09 '16 at 06:07

1

hey just add these lines to each view.

android:layout_columnWeight="1"
android:layout_rowWeight="1"

Hope this helps.

answered Oct 09 '16 at 06:07

Harv

446
5
12

Great! Unfortunately it only works on API21 :(. What if I want it to supported earlier version? – Elye Oct 09 '16 at 06:38
try to run this on API19 device, check if it is working or not. I guess it will work. – Harv Oct 09 '16 at 06:41

How to align view in grid cells of GridLayout center?

2 Answers2