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" />
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