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:

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

score 3 · Answer 1 · answered Jan 09 '17 at 09:24

3

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

answered Jan 09 '17 at 09:24

Aditya Vyas-Lakhan

13,409
16
61
96

If we use GridLayout, the symbols (right most with 5 rows ) column in the display wont match with the numbers having 4 rows, the desired layout [Required Layout](https://i.stack.imgur.com/Sennl.png) cannot be obtained.Please help, what to do? – Anil Jan 10 '17 at 05:26
you can create seperate layout for (right most with 5 rows ) – Aditya Vyas-Lakhan Jan 10 '17 at 05:29

score 1 · Answer 2 · edited Jan 09 '17 at 09:21

1

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.

edited Jan 09 '17 at 09:21

W4R10CK

5,502
2
19
30

answered Jan 08 '17 at 17:37

GreyBeardedGeek

29,460
2
47
67

Thanks @GreyBeardedGeek. Giving fixed height to the children works. Will it work on every screen size? – Rubik Jan 10 '17 at 04:49

score 1 · Accepted Answer · answered Jan 09 '17 at 06:55

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>

score 1 · Answer 4 · answered Jan 09 '17 at 09:29

1

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

answered Jan 09 '17 at 09:29

Sandeep Dhull

1,638
2
18
30

Setting up layout of calculator buttons on android

4 Answers4