Messing up with a calculator using a GridLayout

Question

I\'m facing troubles with making layouts look nice.

To understand basics, I\'ve decided to create a simple calculator app.
So, I\'m using a GridLayout nested in a Li

Answer 1

Finally, after almost ten hours I'm satisfied. Now its looks like this

based on @cricket_007 suggestion, my code is

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:grid="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:weightSum="100"
    tools:context="android.calcandroid.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="20">

        <TextView
            android:layout_height="match_parent"
            android:layout_width="match_parent"
            android:text="0"
            android:gravity="bottom|end"
            android:singleLine="true"
            android:textAppearance="@style/TextAppearance.AppCompat.Headline"
            android:textSize="48sp"
            android:background="#e3e7ea"
            android:paddingBottom="32dp"
            android:padding="16dp"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="80">

        <android.support.v7.widget.GridLayout
            android:id="@+id/gridLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            grid:useDefaultMargins="false"
            grid:alignmentMode="alignBounds"
            grid:columnCount="7"
            grid:rowCount="9">

            <!-- Row 1 -->
            <Button
                android:text="C"
                android:background="@drawable/shape"
                grid:layout_row="0"
                grid:layout_column="0"
                style="@style/calcAction"
                android:textStyle="bold"
                android:textColor="@color/calcAccent"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1"/>

            <ImageButton
                android:background="@drawable/shape"
                android:src="@android:drawable/ic_input_delete"
                grid:layout_row="0"
                grid:layout_column="2"
                style="@style/calcAction"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1" />

            <Button
                android:background="@drawable/shape"
                android:text="&#247;"
                grid:layout_row="0"
                style="@style/calcAction"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1"
                grid:layout_column="4"/>

            <Button
                android:background="@drawable/shape"
                android:text="x"
                grid:layout_row="0"
                grid:layout_column="6"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1"
                style="@style/calcAction"/>

            <!-- Row 2 -->
            <View
                grid:layout_gravity="fill_horizontal"
                android:layout_height="1dp"
                grid:layout_row="1"
                grid:layout_column="0"
                grid:layout_columnSpan="7"
                android:background="#eee"/>

            <Button
                android:background="@drawable/shape"
                android:text="7"
                grid:layout_row="2"
                grid:layout_column="0"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1"
                style="@style/calcNumber"/>

            <Button
                android:background="@drawable/shape"
                android:text="8"
                grid:layout_row="2"
                grid:layout_column="2"
                style="@style/calcNumber"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1"/>

            <Button
                android:background="@drawable/shape"
                android:text="9"
                grid:layout_row="2"
                grid:layout_column="4"
                style="@style/calcNumber"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1"/>

            <Button
                android:background="@drawable/shape"
                android:text="-"
                grid:layout_row="2"
                grid:layout_column="6"
                style="@style/calcAction"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1"/>

            <!-- Row 3 -->

            <View
                grid:layout_gravity="fill_horizontal"
                android:layout_height="1dp"
                grid:layout_row="3"
                grid:layout_column="0"
                grid:layout_columnSpan="7"
                android:background="#eee"/>

            <Button
                android:background="@drawable/shape"
                android:text="4"
                grid:layout_row="4"
                grid:layout_column="0"
                style="@style/calcNumber"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1"/>

            <Button
                android:background="@drawable/shape"
                android:text="5"
                grid:layout_row="4"
                grid:layout_column="2"
                style="@style/calcNumber"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1"/>

            <Button
                android:background="@drawable/shape"
                android:text="6"
                grid:layout_row="4"
                grid:layout_column="4"
                style="@style/calcNumber"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1"/>

            <Button
                android:background="@drawable/shape"
                android:text="+"
                grid:layout_row="4"
                grid:layout_column="6"
                style="@style/calcAction"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1"/>

            <View
                grid:layout_gravity="fill_horizontal"
                android:layout_height="1dp"
                grid:layout_row="7"
                grid:layout_column="0"
                grid:layout_columnSpan="7"
                android:background="#eee"/>

            <!-- Row 4 -->

            <Button
                android:background="@drawable/shape"
                android:text="1"
                grid:layout_row="6"
                grid:layout_column="0"
                style="@style/calcNumber"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1"/>

            <Button
                android:background="@drawable/shape"
                android:text="2"
                grid:layout_row="6"
                grid:layout_column="2"
                style="@style/calcNumber"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1"/>

            <Button
                android:background="@drawable/shape"
                grid:layout_row="6"
                grid:layout_column="4"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1"
                android:text="3"
                style="@style/calcNumber"/>

            <Button
                grid:layout_row="6"
                grid:layout_column="6"
                grid:layout_rowSpan="3"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1"
                android:background="@color/calcAccent"
                android:textAppearance="@style/TextAppearance.AppCompat.Large"
                android:textColor="@color/primary_material_light"
                android:textStyle="bold"
                android:textSize="22sp"
                android:gravity="center_vertical|center_horizontal"
                android:padding="8dp"
                android:text="="
                style="@style/calcNumber"/>
            <!-- Row 5 -->

            <Button
                android:background="@drawable/shape"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1"
                grid:layout_row="8"
                grid:layout_column="0"
                grid:layout_columnSpan="3"
                style="@style/calcNumber"
                android:text="0"/>

            <Button
                android:background="@drawable/shape"
                grid:layout_row="8"
                grid:layout_column="4"
                grid:layout_columnWeight="1"
                grid:layout_rowWeight="1"
                style="@style/calcNumber"
                android:text="."/>

            <!-- Horizontal Grid -->
            <View
                grid:layout_gravity="fill_horizontal"
                android:layout_height="1dp"
                grid:layout_row="5" grid:layout_column="0" grid:layout_columnSpan="7"
                android:background="#eee"/>


        </android.support.v7.widget.GridLayout>

    </LinearLayout>

</LinearLayout>

Maybe it's a bit messy, but it's fine I think.

Answer 2

Change your = and 0 buttons to:

<Button
    android:layout_rowSpan="2"
    android:layout_gravity="fill_vertical"
    android:text="=" />
<Button
    android:layout_columnSpan="2"
    android:layout_gravity="fill_horizontal"
    android:text="0" />

[EDIT]

I realised from your comment that the = button was protruding to the bottom of the screen. This will be because you assigned a high weight to the calculator so using fill_vertical would do that.

I am assuming (but correct me if I'm wrong) from the desired graphic you showed that you want the calculator to be aligned to the bottom of the screen. If that's the case, here's my suggested amendment to your layout (tldr: use RelativeLayout instead of LinearLayout):

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

    <TextView
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:text="0"
        android:layout_above="@+id/gridLayout" />

    <GridLayout
        android:id="@+id/gridLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_alignParentBottom="true"
        android:columnCount="4"
        android:rowCount="5"
        android:orientation="horizontal"
        android:useDefaultMargins="false">

        <Button
            android:text="C" />

        <Button
            android:text="BS" />

        <Button
            android:text="/" />

        <Button
            android:text="x" />

        <Button
            android:text="7" />

        <Button
            android:text="8" />

        <Button
            android:text="9" />

        <Button
            android:text="-" />

        <Button
            android:text="4" />

        <Button
            android:text="5" />

        <Button
            android:text="6" />

        <Button
            android:text="+" />

        <Button
            android:text="1" />

        <Button
            android:text="2" />

        <Button
            android:text="3" />

        <Button
            android:layout_gravity="fill_vertical"
            android:layout_rowSpan="2"
            android:text="=" />
        <Button
            android:layout_gravity="fill_horizontal"
            android:layout_columnSpan="2"
            android:text="0" />
        <Button
            android:text="." />
    </GridLayout>

</RelativeLayout>

Answer 3

Got pretty close. Not sure how to handle the vertical dividers. For some reason putting a 1dp View between each column that spanned each row causes the GridLayout to expand the entire View.

And to use this, you need this dependency for your support library version

compile "com.android.support:gridlayout-v7:<support library number>"

color.xml

<color name="calcAccent">#ef6c00</color>

styles.xml

<style name="calcAction">
    <item name="android:background">#f7f8fa</item>
</style>
<style name="calcNumber">
    <item name="android:background">#fafbfd</item>
</style>

Layout XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:grid="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <TextView
            android:layout_height="match_parent"
            android:layout_width="match_parent"
            android:text="0"
            android:layout_above="@+id/gridLayout" android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true" android:gravity="bottom|end"
            android:singleLine="true" android:textAppearance="@style/TextAppearance.AppCompat.Headline"
            android:textSize="48sp" android:background="#e3e7ea" android:paddingBottom="32dp"
            android:padding="16dp"/>

    <android.support.v7.widget.GridLayout
            android:id="@+id/gridLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true" android:layout_centerHorizontal="true"
            grid:useDefaultMargins="false" grid:alignmentMode="alignBounds" grid:columnCount="7" grid:rowCount="9">

        <!-- Row 1 -->
        <Button
                android:text="C"
                grid:layout_row="0" grid:layout_column="0"
                style="@style/calcAction" android:textStyle="bold" android:textColor="@color/calcAccent"
                grid:layout_columnWeight="1" grid:layout_rowWeight="1"/>
        <ImageButton
                android:src="@android:drawable/ic_input_delete"
                grid:layout_row="0" grid:layout_column="2"
                style="@style/calcAction"
                grid:layout_columnWeight="1" grid:layout_rowWeight="1" />
        <Button
                android:text="&#247;"
                grid:layout_row="0"
                style="@style/calcAction"
                grid:layout_columnWeight="1" grid:layout_rowWeight="1" grid:layout_column="4"/>
        <Button
                android:text="x"
                grid:layout_row="0" grid:layout_column="6"
                grid:layout_columnWeight="1" grid:layout_rowWeight="1"
                style="@style/calcAction"/>

        <!-- Row 2 -->
        <View
                grid:layout_gravity="fill_horizontal"
                android:layout_height="1dp"
                grid:layout_row="1" grid:layout_column="0" grid:layout_columnSpan="7"
                android:background="#eee"/>
        <Button
                android:text="7" grid:layout_row="2" grid:layout_column="0"
                grid:layout_columnWeight="1" grid:layout_rowWeight="1"
                style="@style/calcNumber"/>
        <Button
                android:text="8" grid:layout_row="2" grid:layout_column="2"
                style="@style/calcNumber"
                grid:layout_columnWeight="1" grid:layout_rowWeight="1"/>
        <Button
                android:text="9" grid:layout_row="2" grid:layout_column="4"
                style="@style/calcNumber"
                grid:layout_columnWeight="1" grid:layout_rowWeight="1"/>
        <Button
                android:text="-" grid:layout_row="2" grid:layout_column="6"
                style="@style/calcAction"
                grid:layout_columnWeight="1" grid:layout_rowWeight="1"/>

        <!-- Row 3 -->
        <View
                grid:layout_gravity="fill_horizontal"
                android:layout_height="1dp"
                grid:layout_row="3" grid:layout_column="0" grid:layout_columnSpan="7"
                android:background="#eee"/>
        <Button
                android:text="4" grid:layout_row="4" grid:layout_column="0"
                style="@style/calcNumber"
                grid:layout_columnWeight="1" grid:layout_rowWeight="1"/>
        <Button
                android:text="5" grid:layout_row="4" grid:layout_column="2"
                style="@style/calcNumber"
                grid:layout_columnWeight="1" grid:layout_rowWeight="1"/>
        <Button
                android:text="6" grid:layout_row="4" grid:layout_column="4"
                style="@style/calcNumber"
                grid:layout_columnWeight="1" grid:layout_rowWeight="1"/>
        <Button
                android:text="+" grid:layout_row="4" grid:layout_column="6"
                style="@style/calcAction"
                grid:layout_columnWeight="1" grid:layout_rowWeight="1"/>

        <View
                grid:layout_gravity="fill_horizontal"
                android:layout_height="1dp"
                grid:layout_row="7" grid:layout_column="0" grid:layout_columnSpan="7"
                android:background="#eee"/>

        <!-- Row 4 -->
        <Button
                android:text="1" grid:layout_row="6" grid:layout_column="0"
                style="@style/calcNumber"
                grid:layout_columnWeight="1" grid:layout_rowWeight="1"/>
        <Button
                android:text="2" grid:layout_row="6" grid:layout_column="2"
                style="@style/calcNumber"
                grid:layout_columnWeight="1" grid:layout_rowWeight="1"/>
        <Button
                android:text="3" grid:layout_row="6" grid:layout_column="4"
                style="@style/calcNumber"
                grid:layout_columnWeight="1" grid:layout_rowWeight="1"/>
        <Button
                android:text="=" grid:layout_row="6" grid:layout_column="6"
                style="@style/calcNumber" android:background="@color/calcAccent"
                grid:layout_rowSpan="3"
                grid:layout_columnWeight="1" grid:layout_rowWeight="1"
                android:textAppearance="@style/TextAppearance.AppCompat.Large"
                android:textColor="@color/primary_material_light" android:textStyle="bold" android:textSize="22sp"
                android:gravity="bottom|center_horizontal" android:padding="8dp"/>
        <!-- Row 5 -->

        <Button
                grid:layout_columnWeight="1" grid:layout_rowWeight="1"
                android:text="0"
                grid:layout_row="8" grid:layout_column="0" grid:layout_columnSpan="3"
                style="@style/calcNumber"/>
        <Button
                android:text="."
                grid:layout_row="8" grid:layout_column="4"
                grid:layout_columnWeight="1" style="@style/calcNumber"/>

        <!-- Horizontal Grid -->
        <View
                grid:layout_gravity="fill_horizontal"
                android:layout_height="1dp"
                grid:layout_row="5" grid:layout_column="0" grid:layout_columnSpan="7"
                android:background="#eee"/>


    </android.support.v7.widget.GridLayout>

</RelativeLayout>