How can I make a GridLayout universal for all devices?

Question

I'm working on an XML activity with 12 buttons in a GridLayout (3x4), and I want these buttons to be equally distributed (if that's the right term) on the screen for all devices.

Here is the XML code

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".UnitsActivity">

<android.support.v7.widget.GridLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:columnCount="3"
    app:rowCount="4">

    <Button
        android:id="@+id/unit1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"
        android:background="@drawable/unit_one_button"
        app:layout_column="0"
        app:layout_row="0" />

    <Button
        android:id="@+id/unit2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"
        android:background="@drawable/unit_two_button"
        app:layout_column="1"
        app:layout_row="0" />

    <Button
        android:id="@+id/unit3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"
        android:background="@drawable/unit_three_button"
        app:layout_column="2"
        app:layout_row="0" />

    <Button
        android:id="@+id/unit4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"
        android:background="@drawable/unit_four_button"
        app:layout_column="0"
        app:layout_row="1" />

    <Button
        android:id="@+id/unit5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"
        android:background="@drawable/unit_five_button"
        app:layout_column="1"
        app:layout_row="1" />

    <Button
        android:id="@+id/unit6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"
        android:background="@drawable/unit_six_button"
        app:layout_column="2"
        app:layout_row="1" />

    <Button
        android:id="@+id/unit7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"
        android:background="@drawable/unit_seven_button"
        app:layout_column="0"
        app:layout_row="2" />

    <Button
        android:id="@+id/unit8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"
        android:background="@drawable/unit_eight_button"
        app:layout_column="1"
        app:layout_row="2" />

    <Button
        android:id="@+id/unit9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"
        android:background="@drawable/unit_nine_button"
        app:layout_column="2"
        app:layout_row="2" />

    <Button
        android:id="@+id/unit10"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"
        android:background="@drawable/unit_ten_button"
        app:layout_column="0"
        app:layout_row="3" />

    <Button
        android:id="@+id/unit11"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"
        android:background="@drawable/unit_eleven_button"
        app:layout_column="1"
        app:layout_row="3" />

    <Button
        android:id="@+id/unit12"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"
        android:background="@drawable/unit_twelve_button"
        app:layout_column="2"
        app:layout_row="3" />
</android.support.v7.widget.GridLayout>

as you can see I'm using Margin to distribute them but that is specific for a certain device, in this case a Samsung Galaxy S7.

Maybe this [SO post](https://stackoverflow.com/a/34381245/5015207) is helpful? — Bö macht Blau, Aug 27 '18 at 16:25

score 1 · Accepted Answer · answered Aug 27 '18 at 16:40

For using equally distributed buttons, You can use Linear Layout for this.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:layout_margin="15dp"
        android:layout_weight="1">


        <Button
            android:id="@+id/unit1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight=".3" />

        <Button
            android:id="@+id/unit2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight=".3"
            />

        <Button
            android:id="@+id/unit3"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight=".3"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:layout_weight="1"
        android:layout_margin="15dp">


        <Button
            android:id="@+id/unit4"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight=".3"
            />

        <Button
            android:id="@+id/unit5"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight=".3"/>

        <Button
            android:id="@+id/unit6"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight=".3"
            />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:layout_weight="1"
        android:layout_margin="15dp">


        <Button
            android:id="@+id/unit7"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight=".3" />

        <Button
            android:id="@+id/unit8"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight=".3"/>

        <Button
            android:id="@+id/unit9"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight=".3"
            />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:layout_margin="15dp"
        android:layout_weight="1">

        <Button
            android:id="@+id/unit10"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight=".3" />

        <Button
            android:id="@+id/unit11"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight=".3" />

        <Button
            android:id="@+id/unit12"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight=".3"
            />

    </LinearLayout>


</LinearLayout>
</android.support.constraint.ConstraintLayout>

Hope, this will works for you.

Thanks, I thought of doing this but I saw posts saying it's not efficient. However I think for a simple activity it won't matter — Wild_MJ, Aug 27 '18 at 17:32

score 0 · Answer 2 · edited Aug 27 '18 at 16:29

0

You can try to use:

android:layout_width="0dp"
android:weightSum="0.25"`

edited Aug 27 '18 at 16:29

jle

686
1
8
24

answered Aug 27 '18 at 15:55

hossam scott

466
5
28

it didn't affect the layout – Wild_MJ Aug 27 '18 at 16:01

How can I make a GridLayout universal for all devices?

2 Answers2