How to center image buttons inside of a Grid Layout - Android Studio

Question

I have looked at various solutions, including gravity, but have not found the answer to the problem that I am having, which is that the image buttons inside of the grid layout are not spanning the width of the screen - looking like this picture below. They are more clumped up towards the left. I would like the spacing to be even across the screen. Thanks for the help.

Here is the XML file:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:id="@+id/activity_admin_control"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.myname.myproject.AdminControl">

    <Button
        android:text="Switch to User"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"

        android:layout_centerHorizontal="true"
        android:layout_gravity="center"
        android:id="@+id/userSwitch" />

    <GridLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/userSwitch"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:rowCount="2"
        android:columnCount="3"
        android:alignmentMode="alignMargins">

        <ImageButton

            app:srcCompat="@drawable/common_google_signin_btn_icon_dark"
            android:layout_row="0"
            android:layout_column="0"
            android:layout_width="118dp"
            android:layout_height="118dp"
            android:scaleType="fitCenter"/>

        <ImageButton

            app:srcCompat="@drawable/common_google_signin_btn_icon_dark"
            android:id="@+id/imageButton5"
            android:layout_row="0"
            android:layout_column="1"
            android:layout_width="118dp"
            android:layout_height="118dp"
            android:scaleType="fitCenter"/>

        <ImageButton

            app:srcCompat="@drawable/common_google_signin_btn_icon_dark"
            android:id="@+id/imageButton6"
            android:layout_row="0"
            android:layout_column="2"
            android:layout_width="118dp"
            android:layout_height="118dp"
            android:scaleType="fitCenter"/>

        <ImageButton

            app:srcCompat="@drawable/common_google_signin_btn_icon_dark"
            android:id="@+id/imageButton7"
            android:layout_row="1"
            android:layout_column="0"
            android:layout_width="118dp"
            android:layout_height="118dp"
            android:scaleType="fitCenter"/>

        <ImageButton

            app:srcCompat="@drawable/common_google_signin_btn_icon_dark"
            android:id="@+id/imageButton8"
            android:layout_row="1"
            android:layout_column="1"
            android:layout_width="118dp"
            android:layout_height="118dp"
            android:scaleType="fitCenter"/>

        <ImageButton

            app:srcCompat="@drawable/common_google_signin_btn_icon_dark"
            android:id="@+id/imageButton9"
            android:layout_row="1"
            android:layout_column="2"
            android:layout_width="118dp"
            android:layout_height="118dp"
            android:scaleType="fitCenter"/>

    </GridLayout>


</RelativeLayout>

score 3 · Accepted Answer · answered Feb 17 '17 at 04:24

Don't define width yourself. Let GridLayout do this task. Set all width and height to 0dp and all weights to 1.

This might work for you. I didn't check it, but it should work.

<GridLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@+id/userSwitch"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"
    android:rowCount="2"
    android:columnCount="3"
    android:alignmentMode="alignMargins">

    <ImageButton

        app:srcCompat="@drawable/common_google_signin_btn_icon_dark"
        android:layout_row="0"
        android:layout_column="0"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:scaleType="fitCenter"/>

    <ImageButton

        app:srcCompat="@drawable/common_google_signin_btn_icon_dark"
        android:id="@+id/imageButton5"
        android:layout_row="0"
        android:layout_column="1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:scaleType="fitCenter"/>

    <ImageButton

        app:srcCompat="@drawable/common_google_signin_btn_icon_dark"
        android:id="@+id/imageButton6"
        android:layout_row="0"
        android:layout_column="2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:scaleType="fitCenter"/>

    <ImageButton

        app:srcCompat="@drawable/common_google_signin_btn_icon_dark"
        android:id="@+id/imageButton7"
        android:layout_row="1"
        android:layout_column="0"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:scaleType="fitCenter"/>

    <ImageButton

        app:srcCompat="@drawable/common_google_signin_btn_icon_dark"
        android:id="@+id/imageButton8"
        android:layout_row="1"
        android:layout_column="1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:scaleType="fitCenter"/>

    <ImageButton

        app:srcCompat="@drawable/common_google_signin_btn_icon_dark"
        android:id="@+id/imageButton9"
        android:layout_row="1"
        android:layout_column="2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_columnWeight="1"
        android:layout_rowWeight="1"
        android:scaleType="fitCenter"/>

</GridLayout>

Thank you, it works. Just one thing - the height of the Grid Layout was the whole screen, but I want it to be smaller as shown in the picture above. I manually set the layout:height parameter for the grid layout to 300 dp. Is there a better way to do this? — kmindspark, Feb 17 '17 at 06:01
If you want to use defined `height` or `width`, you can do so. But it may effect layout on different screen sizes. It's good to use `weights` if you can do it efficiently. If you want to set `height` of `GridLayout` half the size of screen, you can put `layout:height=0dp` and `layout:weight=1`. And for this, parent should be `LinearLayout` with `vertical orientation` — Waqas Ahmed Ansari, Feb 17 '17 at 07:24

score 0 · Answer 2 · answered Feb 17 '17 at 04:23

Try this,

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

        <Button
            android:id="@+id/userSwitch"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:layout_gravity="center"
            android:text="Switch to User" />

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_above="@+id/userSwitch"
            android:layout_centerHorizontal="true">

            <GridLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"

                android:layout_centerHorizontal="true"
                android:alignmentMode="alignMargins"
                android:columnCount="3"
                android:rowCount="2">

                <ImageButton

                    android:layout_width="118dp"
                    android:layout_height="118dp"
                    android:layout_column="0"
                    android:layout_row="0"
                    android:scaleType="fitCenter"
                    app:srcCompat="@drawable/common_google_signin_btn_icon_dark" />

                <ImageButton

                    android:id="@+id/imageButton5"
                    android:layout_width="118dp"
                    android:layout_height="118dp"
                    android:layout_column="1"
                    android:layout_row="0"
                    android:scaleType="fitCenter"
                    app:srcCompat="@drawable/common_google_signin_btn_icon_dark" />

                <ImageButton

                    android:id="@+id/imageButton6"
                    android:layout_width="118dp"
                    android:layout_height="118dp"
                    android:layout_column="2"
                    android:layout_row="0"
                    android:scaleType="fitCenter"
                    app:srcCompat="@drawable/common_google_signin_btn_icon_dark" />

                <ImageButton

                    android:id="@+id/imageButton7"
                    android:layout_width="118dp"
                    android:layout_height="118dp"
                    android:layout_column="0"
                    android:layout_row="1"
                    android:scaleType="fitCenter"
                    app:srcCompat="@drawable/common_google_signin_btn_icon_dark" />

                <ImageButton

                    android:id="@+id/imageButton8"
                    android:layout_width="118dp"
                    android:layout_height="118dp"
                    android:layout_column="1"
                    android:layout_row="1"
                    android:scaleType="fitCenter"
                    app:srcCompat="@drawable/common_google_signin_btn_icon_dark" />

                <ImageButton

                    android:id="@+id/imageButton9"
                    android:layout_width="118dp"
                    android:layout_height="118dp"
                    android:layout_column="2"
                    android:layout_row="1"
                    android:scaleType="fitCenter"
                    app:srcCompat="@drawable/common_google_signin_btn_icon_dark" />

            </GridLayout>
        </RelativeLayout>

        </RelativeLayout>

score 0 · Answer 3 · edited May 23 '17 at 12:16

0

I find out that it's not possible to center GridView horizontally with .xml So I had to do it programmatically... This answer helped me a lot: link

edited May 23 '17 at 12:16

Community

1
1

answered Feb 17 '17 at 04:28

Alvin Varghese

679
2
9
17

score 0 · Answer 4 · answered Feb 17 '17 at 04:44

you can try this width and height is harcoded you need to fix either row or column or you can use margin.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:id="@+id/activity_admin_control"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.myname.myproject.AdminControl">

    <Button
        android:text="Switch to User"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"

        android:layout_centerHorizontal="true"
        android:layout_gravity="center"
        android:id="@+id/userSwitch" />

    <GridLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/userSwitch"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:layout_marginLeft="@dimen/activity_vertical_margin"
        android:layout_marginRight="@dimen/activity_vertical_margin"
        android:rowCount="2"
        android:columnCount="3"
        android:alignmentMode="alignMargins">

        <ImageButton

            app:srcCompat="@drawable/common_google_signin_btn_icon_dark"
            android:layout_row="0"
            android:layout_column="0"
            android:layout_width="118dp"
            android:layout_height="118dp"
            android:scaleType="fitCenter"/>

        <ImageButton

            app:srcCompat="@drawable/common_google_signin_btn_icon_dark"
            android:id="@+id/imageButton5"
            android:layout_row="0"
            android:layout_column="1"
            android:layout_width="118dp"
            android:layout_height="118dp"
            android:scaleType="fitCenter"/>

        <ImageButton

            app:srcCompat="@drawable/common_google_signin_btn_icon_dark"
            android:id="@+id/imageButton6"
            android:layout_row="0"
            android:layout_column="2"
            android:layout_width="118dp"
            android:layout_height="118dp"
            android:scaleType="fitCenter"/>

        <ImageButton

            app:srcCompat="@drawable/common_google_signin_btn_icon_dark"
            android:id="@+id/imageButton7"
            android:layout_row="1"
            android:layout_column="0"
            android:layout_width="118dp"
            android:layout_height="118dp"
            android:scaleType="fitCenter"/>

        <ImageButton

            app:srcCompat="@drawable/common_google_signin_btn_icon_dark"
            android:id="@+id/imageButton8"
            android:layout_row="1"
            android:layout_column="1"
            android:layout_width="118dp"
            android:layout_height="118dp"
            android:scaleType="fitCenter"/>

        <ImageButton

            app:srcCompat="@drawable/common_google_signin_btn_icon_dark"
            android:id="@+id/imageButton9"
            android:layout_row="1"
            android:layout_column="2"
            android:layout_width="118dp"
            android:layout_height="118dp"
            android:scaleType="fitCenter"/>

    </GridLayout>


</RelativeLayout>

How to center image buttons inside of a Grid Layout - Android Studio

4 Answers4