Design help for Calculator App

Question

I am trying to design a calculator. I want my calculator to look like the android's default. enter image description here

I used linear layout for this. I tried GridLayout and TableLayout but well, it sucked.

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

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

    <EditText
        android:id="@+id/RawDataET"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="80"
        android:maxLines="1"
        android:textColor="@android:color/black" />

    <Button
        android:id="@+id/BackSpaceButton"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="20" />
</LinearLayout>

<TextView
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="13"
    android:background="@android:color/white"
    android:textColor="@android:color/black"
    android:textSize="35sp" />

<TableLayout

    style="?android:attr/buttonBarStyle"
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:layout_weight="75"
    android:dividerPadding="2dp"
    android:stretchColumns="*" >

    <TableRow>

        <Button
            style="?android:attr/buttonBarButtonStyle"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="UP" />

        <Button
            style="?android:attr/buttonBarButtonStyle"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="!" />

        <Button
            style="?android:attr/buttonBarButtonStyle"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="e" />

        <Button
            style="?android:attr/buttonBarButtonStyle"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="^" />
    </TableRow>

    <TableRow>

        <Button
            style="?android:attr/buttonBarButtonStyle"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="7" />

        <Button
            style="?android:attr/buttonBarButtonStyle"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="8" />

        <Button
            style="?android:attr/buttonBarButtonStyle"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="9" />

        <Button
            style="?android:attr/buttonBarButtonStyle"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="+" />
    </TableRow>

    <TableRow>

        <Button
            style="?android:attr/buttonBarButtonStyle"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="4" />

        <Button
            style="?android:attr/buttonBarButtonStyle"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="5" />

        <Button
            style="?android:attr/buttonBarButtonStyle"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="6" />

        <Button
            style="?android:attr/buttonBarButtonStyle"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="-" />
    </TableRow>

    <TableRow>

        <Button
            style="?android:attr/buttonBarButtonStyle"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="1" />

        <Button
            style="?android:attr/buttonBarButtonStyle"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="2" />

        <Button
            style="?android:attr/buttonBarButtonStyle"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="3" />

        <Button
            style="?android:attr/buttonBarButtonStyle"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="/" />
    </TableRow>

    <TableRow>

        <Button
            style="?android:attr/buttonBarButtonStyle"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="." />

        <Button
            style="?android:attr/buttonBarButtonStyle"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="0" />

        <Button
            style="?android:attr/buttonBarButtonStyle"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="=" />

        <Button
            style="?android:attr/buttonBarButtonStyle"
            android:layout_width="0dp"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="*" />
    </TableRow>
</TableLayout>

It looks like shit.

enter image description here

I really need help here. Have no idea how to get it look good.

score 0 · Answer 1 · answered Jun 08 '14 at 11:26

0

You can use RelativeLayout. With RelativeLayout, you can design it freely

answered Jun 08 '14 at 11:26

Oğuzhan Döngül

7,856
4
38
52

score 0 · Answer 2 · answered Jun 11 '14 at 16:54

0

Ok I used LinearLayout and the answer was to use background for buttons.

answered Jun 11 '14 at 16:54

Kartik Sharma

723
8
19

score 0 · Answer 3 · answered Nov 15 '15 at 10:40

use this code in every button for white text and black background

        android:background="#c6010101"
        android:textColor="#FFFFFCFC"

like

   <Button
        style="?android:attr/buttonBarButtonStyle"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:text="^"
        android:background="#c6010101"
        android:textColor="#FFFFFCFC" />

Design help for Calculator App

3 Answers3

Linked