Align Buttons as a Grid Layout in Android Studio

Question

I am making an app with Android Studio and want to display buttons side by side with three columns per row. I managed to achieve this on the first row but the second row is all messed up.. this is what I am looking for:

this is what I have tried:

<ScrollView
    android:id="@+id/scrollablContent"
    android:layout_width="match_parent"
    android:layout_height="fill_parent"
    android:layout_weight="1">


    <RelativeLayout
        android:id="@+id/relativeLayout1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">


        <Button
            android:id="@+id/englishstatus"
            android:layout_width="120dp"
            android:layout_height="120dp"
            android:text="Download Code"
            android:textSize="20sp"
            android:padding="15dp"
            android:textStyle="bold|italic"
            android:layout_alignParentLeft="true"
            android:layout_marginLeft="1dp"
            android:background="@drawable/bg" />

        <Button
            android:id="@+id/linestatus"
            android:layout_toRightOf="@id/englishstatus"
            android:layout_width="120dp"
            android:layout_height="120dp"
            android:text="Download Code"
            android:layout_centerInParent="true"
            android:background="@drawable/bg" />

        <Button
            android:id="@+id/attitude"
            android:layout_width="120dp"
            android:layout_height="120dp"
            android:text="Download Code"
            android:layout_alignParentRight="true"
            android:layout_marginRight="1dp"
            android:background="@drawable/bg" />

i am getting this as output

Possible Duplicate of https://stackoverflow.com/questions/40587168/simple-android-grid-example-using-recyclerview-with-gridlayoutmanager-like-the — A S M Sayem, Sep 26 '19 at 06:21

AskNilesh · Accepted Answer · 2019-09-26T06:18:55.027

There are multiple ways to achieve your requirement

First using Linear layout

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="10dp">

        <ImageView
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:contentDescription="@string/app_name"
            android:src="@drawable/ic_launcher_background" />

        <ImageView
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:contentDescription="@string/app_name"
            android:src="@drawable/ic_launcher_background" />

        <ImageView
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:contentDescription="@string/app_name"
            android:src="@drawable/ic_launcher_background" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="10dp">

        <ImageView
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:contentDescription="@string/app_name"
            android:src="@drawable/ic_launcher_background" />

        <ImageView
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:contentDescription="@string/app_name"
            android:src="@drawable/ic_launcher_background" />

        <ImageView
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:contentDescription="@string/app_name"
            android:src="@drawable/ic_launcher_background" />

    </LinearLayout>

</LinearLayout>

OUTPUT

Second way

You can use RecyclerView with GridLayoutManager

GridLayoutManager  gridLayoutManager = new GridLayoutManager(YourActivity.this, 3);
recyclerView.setLayoutManager(gridLayoutManager);

Check out this article for RecyclerView with GridLayoutManager

Third way you can use a GridView

Check out this article for Android Grid View

score 0 · Answer 2 · answered Sep 26 '19 at 06:12

0

You have to use Recyclerview with SquareRelativeLayout as item, please check this link

answered Sep 26 '19 at 06:12

jay shah

300
1
8

score 0 · Answer 3 · answered Sep 26 '19 at 06:19

0

You can use TableLayout and you can add buttons to rows and columns. Check this link.

answered Sep 26 '19 at 06:19

Wooz12345

159
10

score -1 · Answer 4 · answered Sep 26 '19 at 06:18

-1

In my opinion, you'd better provide complete layout code.

btw, it's better to use RecyclerView and GridLayoutManager in this situation.

answered Sep 26 '19 at 06:18

Kevin

139
6

Align Buttons as a Grid Layout in Android Studio

4 Answers4