Setting up layout of calculator buttons on android

Question

I have just started learning Android. To start with,I just wanted to create a Calculator application similar to what we get in stock android phones. I used the following layouts:

1. Vertical Layout contining two rows which are:
   • Text view to display the result as a horizontal layout
   • Horizontal layout with two columns:
     • Table layout containing buttons 0-9, '.' and '=' with 3 buttons in each row
     • Table layout containing DEL, + , - , x and / buttons.

I want proper alignment of 4 rows of the first table layout and 5 rows of the second table layout. Shall I remove the padding space? Or do I need to manually set the minimum size of the buttons? Are the layouts set by me correct?

`

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

        <TextView
            android:layout_width="match_parent"
            android:layout_height="112dp"
            android:id="@+id/textView" />
    </LinearLayout>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TableLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_alignParentEnd="true"
            android:layout_alignParentTop="true">

            <TableRow android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <Button
                    android:text="7"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:id="@+id/button7" />

                <Button
                    android:text="8"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:id="@+id/button8" />

                <Button
                    android:text="9"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:id="@+id/button9"
                    android:elevation="0dp" />

            </TableRow>

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

                <Button
                    android:text="4"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:id="@+id/button4" />

                <Button
                    android:text="5"
                    android:id="@+id/button5"
                    android:layout_height="match_parent" />

                <Button
                    android:text="6"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:id="@+id/button6" />

            </TableRow>

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

                <Button
                    android:text="1"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:id="@+id/button1" />

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

                <Button
                    android:text="3"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:id="@+id/button3" />

            </TableRow>

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

                <Button
                    android:text="."
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:id="@+id/buttonDot"
                    android:minHeight="48dp" />

                <Button
                    android:text="0"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:id="@+id/button0" />

                <Button
                    android:text="="
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:id="@+id/buttonequals"/>

            </TableRow>
        </TableLayout>

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

            <TableRow
                android:layout_width="match_parent"
                android:layout_height="match_parent" >

                <Button
                    android:text="DEL"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/buttonDelete" />
            </TableRow>

            <TableRow
                android:layout_width="match_parent"
                android:layout_height="match_parent" >

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

            <TableRow
                android:layout_width="match_parent"
                android:layout_height="match_parent" >

                <Button
                    android:text="x"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/buttonMultiply" />
            </TableRow>

            <TableRow
                android:layout_width="match_parent"
                android:layout_height="match_parent" >

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

            </TableRow>

            <TableRow
                android:layout_width="match_parent"
                android:layout_height="match_parent" >

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

    </LinearLayout>

</LinearLayout>

`

Current Layout

Required layout

Answer 1

Below code can do the job i guess,

<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"
        xmlns:andriod="http://schemas.android.com/apk/res-auto"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        android:orientation="horizontal"
        android:paddingBottom="@dimen/activity_vertical_margin"
        tools:context=".MainActivity">

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

            <TextView
                android:layout_width="match_parent"
                android:layout_height="120dp"
                android:id="@+id/textView" />
        </LinearLayout>
        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_below="@+id/resultview"
            android:layout_alignParentBottom="true"
            android:layout_height="wrap_content">

            <TableLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_alignParentTop="false"
                android:layout_alignParentBottom="true"
                android:background="#000000">



                <TableRow android:layout_width="match_parent"
                    android:minHeight="100dp"
                    android:orientation="vertical"
                    android:id="@+id/row1"
                    android:background="#000000">
                    <Button
                        android:text="7"
                        android:background="#000000"
                        android:textColor="#ffffff"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:id="@+id/button7" />
                    <Button
                        android:text="8"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:background="#000000"
                        android:textColor="#ffffff"
                        android:id="@+id/button8" />

                    <Button
                        android:text="9"
                        android:background="#000000"
                        android:textColor="#ffffff"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:id="@+id/button9"
                        android:elevation="0dp" />

                </TableRow>
                <TableRow android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:id="@+id/row2"
                    android:minHeight="100dp"
                    android:layout_below="@+id/row1">

                    <Button
                        android:text="4"
                        android:background="#000000"
                        android:textColor="#ffffff"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:id="@+id/button4" />

                    <Button
                        android:text="5"
                        android:background="#000000"
                        android:textColor="#ffffff"
                        android:id="@+id/button5"
                        android:layout_height="match_parent" />

                    <Button
                        android:text="6"
                        android:background="#000000"
                        android:textColor="#ffffff"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:id="@+id/button6" />

                </TableRow>

                <TableRow android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:minHeight="100dp">

                    <Button
                        android:text="1"
                        android:background="#000000"
                        android:textColor="#ffffff"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:id="@+id/button1" />

                    <Button
                        android:text="2"
                        android:background="#000000"
                        android:textColor="#ffffff"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:id="@+id/button2" />

                    <Button
                        android:text="3"
                        android:background="#000000"
                        android:textColor="#ffffff"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:id="@+id/button3" />

                </TableRow>

                <TableRow android:layout_height="wrap_content"
                    android:layout_width="match_parent"
                    android:background="#000000">

                    <Button
                        android:text="."
                        android:background="#000000"
                        android:textColor="#ffffff"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:id="@+id/buttonDot"
                        android:minHeight="48dp" />

                    <Button
                        android:text="0"
                        android:background="#000000"
                        android:textColor="#ffffff"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:id="@+id/button0" />

                    <Button
                        android:text="="
                        android:background="#000000"
                        android:textColor="#ffffff"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:id="@+id/buttonequals"/>

                </TableRow>
            </TableLayout>

            <TableLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:background="#000000">

                <TableRow
                    android:layout_width="match_parent"
                    android:layout_height="10dp"
                    android:minHeight="80dp">

                    <Button
                        android:text="DEL"
                        android:background="#000000"
                        android:textColor="#ffffff"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:id="@+id/buttonDelete" />

                </TableRow>

                <TableRow
                    android:layout_width="match_parent"
                    android:layout_height="10dp"
                    android:minHeight="80dp">

                    <Button
                        android:text="/"
                        android:background="#000000"
                        android:textColor="#ffffff"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:id="@+id/buttonDivide" />
                </TableRow>

                <TableRow
                    android:layout_width="match_parent"
                    android:layout_height="10dp"
                    android:minHeight="80dp">

                    <Button
                        android:text="x"
                        android:background="#000000"
                        android:textColor="#ffffff"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:id="@+id/buttonMultiply" />
                </TableRow>

                <TableRow
                    android:layout_width="match_parent"
                    android:layout_height="10dp"
                    android:minHeight="60dp">

                    <Button
                        android:text="+"
                        android:background="#000000"
                        android:textColor="#ffffff"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:id="@+id/buttonPlus" />

                </TableRow>

                <TableRow
                    android:layout_width="match_parent"
                    android:layout_height="10dp" >

                    <Button
                        android:text="-"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:background="#000000"
                        android:textColor="#ffffff"
                        android:id="@+id/buttonSubtract" />
                </TableRow>
            </TableLayout>
        </LinearLayout>
    </RelativeLayout>

Answer 2

I suggest that you can use GridLayout for that view

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:columnCount="4"
    android:orientation="horizontal" >
</GridLayout>

https://code.tutsplus.com/tutorials/android-user-interface-design-creating-a-numeric-keypad-with-gridlayout--mobile-8677

http://sampleprogramz.com/android/gridlayout.php

Answer 3

Go for Custom ViewGroup and Custom Views as child. You will have much more flexibility and control over performance also learn for your good..

Btw, Creating custom components are easy.

Thanks

Answer 4

You could either set the height of the buttons, or add padding.

BTW, a parent with height of wrap_content and children with height match_parent is legal, I suppose, but a bit odd. I'd give the children either a fixed height, or wrap_content with a sufficient padding to get the look that you want.