Android multiple buttons alignment

Question

I'm testing Android Studio and I'm trying to write a simple calculator just to test it andl learn Android.

What I'd like to achieve is something like this:

and I'd like to have this behavior with every device, either portrait or landscape.

What I've though is to make everything relative to the string "Result is 0:", so something like this:

<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:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context="org.mennini.mycalc.MainActivity$PlaceholderFragment">

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:text="Sum is: 0"
    android:id="@+id/textView"
    android:onClick="onButtonClick"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true" />

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="8"
    android:id="@+id/button"
    android:layout_marginTop="40dp"
    android:layout_below="@+id/textView"
    android:layout_centerHorizontal="true"
    android:onClick="onButtonClick" />

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="7"
    android:id="@+id/button2"
    android:layout_alignTop="@+id/button"
    android:layout_toLeftOf="@+id/button"
    android:onClick="onButtonClick" />

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="9"
    android:id="@+id/button3"
    android:layout_alignTop="@+id/button"
    android:layout_toRightOf="@+id/button"
    android:onClick="onButtonClick" />

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="5"
    android:id="@+id/button4"
    android:layout_below="@+id/button"
    android:layout_toRightOf="@+id/button2"
    android:layout_marginTop="19dp"
    android:onClick="onButtonClick" />

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="4"
    android:id="@+id/button5"
    android:layout_alignTop="@+id/button4"
    android:layout_toLeftOf="@+id/button4"
    android:onClick="onButtonClick" />

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="6"
    android:id="@+id/button6"
    android:layout_alignTop="@+id/button4"
    android:layout_toRightOf="@+id/button4"
    android:onClick="onButtonClick" />

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="2"
    android:id="@+id/button7"
    android:layout_below="@+id/button4"
    android:layout_toRightOf="@+id/button5"
    android:layout_marginTop="19dp"
    android:onClick="onButtonClick" />

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="1"
    android:id="@+id/button8"
    android:layout_alignTop="@+id/button7"
    android:layout_toLeftOf="@+id/button7"
    android:onClick="onButtonClick" />

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="3"
    android:id="@+id/button9"
    android:layout_alignTop="@+id/button7"
    android:layout_toRightOf="@+id/button7"
    android:onClick="onButtonClick" />

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="0"
    android:id="@+id/button10"
    android:layout_below="@+id/button7"
    android:layout_alignLeft="@+id/button8"
    android:layout_alignStart="@+id/button8"
    android:layout_marginTop="19dp"
    android:layout_toLeftOf="@+id/button9"
    android:onClick="onButtonClick" />

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="."
    android:id="@+id/button11"
    android:layout_alignTop="@+id/button10"
    android:layout_toRightOf="@+id/button10"
    android:onClick="onButtonClick" />

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="C"
    android:id="@+id/button12"
    android:layout_below="@+id/button10"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="30dp"
    android:onClick="onButtonClick" />

With an off number of columns is easy, but how can I deal with an even number, such in the example?

More, with Android Studio I've tried to use Table Layout and Grid Layout, but I haven't understood how to set a grid with specific number of rows and cols, i.e. a 5 rows x 4 columns grid, i.e. I can drag a GridLayout and set the number of rows and columns, but as I drag over it some controls, say a Button, I see underneath a green grid with a lot more cells than expected, so my intention to draw button on my 5x4 grid and have the grid itself horizontally centered gets frustrated.

Finally (thanks for reading up to here) the question: how can I deal with this situation? Is my idea of using all buttons relative to textview good or stupid? Is my idea of using a GridLayout a good or stupid idea?

In which smart way can I deal with this problem????

Thanks a lot

Answer 1

you can use linearLayout and give needed weight. here is my code which I gave 1/5=0.2 weight for each row and 1/4=0.25 for each column.

<androidx.constraintlayout.widget.ConstraintLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
>

<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:onClick="onButtonClick"
    android:text="Sum is: 0"
    android:textAppearance="?android:attr/textAppearanceLarge"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:layout_marginTop="32dp"
    android:orientation="horizontal"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/textView">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="0.5"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="0.2"
            android:orientation="horizontal">

            <Button
                android:id="@+id/button14"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.25"
                android:text="+" />

            <Button
                android:id="@+id/button15"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.25"
                android:text="-" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="0.2"
            android:orientation="horizontal">

            <Button
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.25"
                android:text="7" />

            <Button
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.25"
                android:text="8" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="0.2"
            android:orientation="horizontal">

            <Button
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.25"
                android:text="4" />

            <Button
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.25"
                android:text="5" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="0.2"
            android:orientation="horizontal">

            <Button
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.25"
                android:text="1" />

            <Button
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.25"
                android:text="2" />
        </LinearLayout>

        <Button
            android:id="@+id/button17"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="0.2"
            android:text="0" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="0.25"
        android:orientation="vertical">

        <Button
            android:id="@+id/button6"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="0.2"
            android:text="*" />

        <Button
            android:id="@+id/button7"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="0.2"
            android:text="9" />

        <Button
            android:id="@+id/button8"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="0.2"
            android:text="6" />

        <Button
            android:id="@+id/button9"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="0.2"
            android:text="3" />

        <Button
            android:id="@+id/button10"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="0.2"
            android:text="." />
    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="0.25"
        android:orientation="vertical">

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

        <Button
            android:id="@+id/button5"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="0.8"
            android:text="Enter"
            android:textSize="12sp"/>
    </LinearLayout>
</LinearLayout>

    </androidx.constraintlayout.widget.ConstraintLayout>

Answer 2

<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:orientation="vertical" 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=".Home" android:background="#fff" > <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/disp" android:id = "@+id/display" android:hint="@string/dispHint" /> <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:gravity="center" android:paddingTop="20dp"> <Button android:layout_width="55dp" android:layout_height="wrap_content" android:id = "@+id/seven" android:text="@string/seven" /> <Button android:layout_width="55dp" android:layout_height="wrap_content" android:id = "@+id/eight" android:text="@string/eight" /> <Button android:layout_width="55dp" android:layout_height="wrap_content" android:id = "@+id/nine" android:text="@string/nine" /> <Button android:layout_width="55dp" android:layout_height="wrap_content" android:id = "@+id/div" android:text="@string/div" /> </LinearLayout> <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:gravity="center" android:paddingTop="20dp"> <Button android:layout_width="55dp" android:layout_height="wrap_content" android:id = "@+id/four" android:text="@string/four" /> <Button android:layout_width="55dp" android:layout_height="wrap_content" android:id = "@+id/five" android:text="@string/five" /> <Button android:layout_width="55dp" android:layout_height="wrap_content" android:id = "@+id/six" android:text="@string/six" /> <Button android:layout_width="55dp" android:layout_height="wrap_content" android:id = "@+id/mul" android:text="@string/mul" /> </LinearLayout> <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:gravity="center" android:paddingTop="20dp"> <Button android:layout_width="55dp" android:layout_height="wrap_content" android:id = "@+id/one" android:text="@string/one" /> <Button android:layout_width="55dp" android:layout_height="wrap_content" android:id = "@+id/two" android:text="@string/two" /> <Button android:layout_width="55dp" android:layout_height="wrap_content" android:id = "@+id/three" android:text="@string/three" /> <Button android:layout_width="55dp" android:layout_height="wrap_content" android:id = "@+id/sub" android:text="@string/sub" /> </LinearLayout> <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:gravity="center" android:paddingTop="20dp"> <Button android:layout_width="55dp" android:layout_height="wrap_content" android:id = "@+id/cancel" android:text="@string/cancel" /> <Button android:layout_width="55dp" android:layout_height="wrap_content" android:id = "@+id/zero" android:text="@string/zero" /> <Button android:layout_width="55dp" android:layout_height="wrap_content" android:id = "@+id/equal" android:text="@string/equal" /> <Button android:layout_width="55dp" android:layout_height="wrap_content" android:id = "@+id/add" android:text="@string/add" /> </LinearLayout> </LinearLayout>

Answer 3

you can thought about Linear Layout with vertical orientation for first three columns (each row added to individual linear layout with Horizontal orientation, which means that you need for four linear layouts, then all added to first layout which Linear Layout with vertical orientation), then add the first Linear layout and the last column (which added first to another vertical layout) to another linear layout with Horizontal orientation!

Here also you can find good example: http://mrbool.com/how-to-create-a-calculator-app-for-android/28100

Also here full xml code:

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

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

         <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal" >
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id = "@+id/plus"
            android:text="+"
        />

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

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

      </LinearLayout>




         <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal" >
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id = "@+id/seven"
            android:text="7"
        />

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

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

      </LinearLayout>

          <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal" >
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id = "@+id/four"
            android:text="4"
        />

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

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

      </LinearLayout>

        <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal" >
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id = "@+id/one"
            android:text="1"
        />

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

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

      </LinearLayout>


        <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal" >
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id = "@+id/one"
            android:text="1"
        />

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

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

      </LinearLayout>

        <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal" >
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id = "@+id/zero"
            android:layout_weight="2"
            android:text="0"
        />

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

      </LinearLayout>

   </LinearLayout>
     <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id = "@+id/slash"

            android:text="/"
        />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id = "@+id/enter"
            android:layout_weight="2"
            android:text="Enter"
        />

      </LinearLayout>


</LinearLayout>

regards @Sandman42,

Answer 4

Have you ever thought about using TableLayout?