CODEWITHSUNDEEP
androidxmlandroid-layoutandroid-linearlayout
Jayizzle
Jayizzle

Reputation: 532

Android/XML layout, grid of buttons

I am trying to get an activity with many buttons on it in a sort of grid-like fashion. I have only paired up one LinearLayout with three buttons but cannot get a second button row below it. How do I get this grid of buttons to exist?

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
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=".MainActivity" >

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/linearLayout1"
    android:layout_alignRight="@+id/linearLayout1" >

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="19dp"
        android:text="Button" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/button1"
        android:layout_alignBottom="@+id/button1"
        android:layout_toRightOf="@+id/button1"
        android:text="Button" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/button2"
        android:layout_alignBottom="@+id/button2"
        android:layout_toRightOf="@+id/button2"
        android:text="Button" />
</LinearLayout>

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/linearLayout1" >

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="19dp"
        android:text="Button" />

    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/button1"
        android:layout_alignBottom="@+id/button1"
        android:layout_toRightOf="@+id/button1"
        android:text="Button" />

    <Button
        android:id="@+id/button6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/button2"
        android:layout_alignBottom="@+id/button2"
        android:layout_toRightOf="@+id/button2"
        android:text="Button" />
</LinearLayout>

</RelativeLayout>

Upvotes: 0

Views: 1730

Answers (4)

user18271507
user18271507

Reputation:

You could try it the hard-ish way:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:id="@+id/x3Layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".three_by_three_grid">

<Button
    android:id="@+id/x3button_2"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_marginTop="144dp"
    
    android:backgroundTint="#DAD8D8"
    android:onClick="button2_clicked"
    android:text="2"
    android:textSize="34sp"
    android:textStyle="bold"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.501"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:id="@+id/x3button_6"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_marginStart="20dp"
    android:layout_marginTop="24dp"
    
    android:backgroundTint="#DAD8D8"
    android:onClick="button6_clicked"
    android:text="6"
    android:textSize="34sp"
    android:textStyle="bold"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/x3button_5"
    app:layout_constraintTop_toBottomOf="@+id/x3button_3" />

<Button
    android:id="@+id/x3button_4"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_marginTop="24dp"
    android:layout_marginEnd="24dp"
    
    android:backgroundTint="#DAD8D8"
    android:onClick="button4_clicked"
    android:text="4"
    android:textSize="34sp"
    android:textStyle="bold"
    app:layout_constraintEnd_toStartOf="@+id/x3button_5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/x3button_1" />

<Button
    android:id="@+id/x3button_5"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_marginTop="24dp"
    
    android:backgroundTint="#DAD8D8"
    android:onClick="button5_clicked"
    android:text="5"
    android:textSize="34sp"
    android:textStyle="bold"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.498"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/x3button_2" />

<Button
    android:id="@+id/x3button_8"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_marginTop="152dp"
    
    android:backgroundTint="#DAD8D8"
    android:onClick="button8_clicked"
    android:text="8"
    android:textSize="34sp"
    android:textStyle="bold"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/x3button_2" />

<Button
    android:id="@+id/x3button_9"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_marginStart="20dp"
    android:layout_marginTop="152dp"
    
    android:backgroundTint="#DAD8D8"
    android:onClick="button9_clicked"
    android:text="9"
    android:textSize="34sp"
    android:textStyle="bold"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/x3button_5"
    app:layout_constraintTop_toBottomOf="@+id/x3button_3" />

<Button
    android:id="@+id/x3button_7"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_marginTop="152dp"
    android:layout_marginEnd="24dp"
    
    android:backgroundTint="#DAD8D8"
    android:onClick="button7_clicked"
    android:text="7"
    android:textSize="34sp"
    android:textStyle="bold"
    app:layout_constraintEnd_toStartOf="@+id/x3button_5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/x3button_1" />

<Button
    android:id="@+id/x3button_3"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_marginStart="20dp"
    android:layout_marginTop="144dp"
    
    android:backgroundTint="#DAD8D8"
    android:onClick="button3_clicked"
    android:text="3"
    android:textSize="34sp"
    android:textStyle="bold"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/x3button_2"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:id="@+id/x3button_1"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_marginTop="144dp"
    android:layout_marginEnd="24dp"
    
    android:backgroundTint="#DAD8D8"
    android:onClick="button1_clicked"
    android:text="1"
    android:textSize="34sp"
    android:textStyle="bold"
    app:layout_constraintEnd_toStartOf="@+id/x3button_2"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Upvotes: 0

Hareshkumar Chhelana
Hareshkumar Chhelana

Reputation: 24848

Try this way,hope this will help you to solve your problem.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    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"
    android:orientation="vertical"
    tools:context=".MainActivity" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Button
            android:id="@+id/button1"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:text="Button" />

        <Button
            android:id="@+id/button2"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:text="Button" />

        <Button
            android:id="@+id/button3"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:text="Button" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Button
            android:id="@+id/button4"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:text="Button" />

        <Button
            android:id="@+id/button5"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:text="Button" />

        <Button
            android:id="@+id/button6"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:text="Button" />
    </LinearLayout>

</LinearLayout>

Upvotes: 0

yanliu
yanliu

Reputation: 11

  1. linearLayout1 is lost.
  2. android:layout_alignBottom="@+id/linearLayout1" must change to " android:layout_below"
  3. "android:layout_toRightOf,android:layout_alignBaseline,android:layout_alignBottom" is useless in the LinearLayout.
<LinearLayout
    android:id="@+id/linearLayout1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="19dp"
        android:text="Button" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />
</LinearLayout>

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/linearLayout1" >

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="19dp"
        android:text="Button" />

    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

    <Button
        android:id="@+id/button6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />
</LinearLayout>

Upvotes: 1

Jayizzle
Jayizzle

Reputation: 532

I managed to get a solution by framing the overarching LinearLayout for the activity with orienting it with a vertical design.

android:orientation="vertical"

Upvotes: 2

Related Questions