likeanowl likeanowl - 3 months ago 19
Android Question

Messing up with a calculator using a GridLayout

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 LinearLayout to place Buttons under text fields.

Here is the source of my layout.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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"
android:weightSum="100">

<TextView
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:text="0"
android:layout_weight="30"/>

<GridLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:columnCount="4"
android:rowCount="5"
android:orientation="horizontal"
android:useDefaultMargins="false"
android:layout_weight="70">

<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"
android:layout_rowSpan="2"
android:text="=" />
<Button
android:layout_gravity="fill"
android:layout_columnSpan="2"
android:text="0" />
<Button
android:text="." />
</GridLayout>

</LinearLayout>


How to make this layout fill the screen?

current app

And make my app looking like this

want to look like

Hoping for quick answers.

[EDIT]: So, now things are way better, but I got new questions.
Now my main activity looks like this

this

Quite nice, in my opinion, but:


  1. How to remove empty space on the right side of keyboard?

  2. How to make keyboard and text view taking like 70 and 30 percents of screen respectively?



Also, new layout code is:

<?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"
tools:context="android.calcandroid.MainActivity">

<TextView
android:background="@drawable/shape"
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="fill_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:background="@drawable/shape"
android:text="C" />

<Button
android:background="@drawable/shape"
android:text="BS" />

<Button
android:background="@drawable/shape"
android:text="/" />

<Button
android:background="@drawable/shape"
android:text="x" />

<Button
android:background="@drawable/shape"
android:text="7" />

<Button
android:background="@drawable/shape"
android:text="8" />

<Button
android:background="@drawable/shape"
android:text="9" />

<Button
android:background="@drawable/shape"
android:text="-" />

<Button
android:background="@drawable/shape"
android:text="4" />

<Button
android:background="@drawable/shape"
android:text="5" />

<Button
android:background="@drawable/shape"
android:text="6" />

<Button
android:background="@drawable/shape"
android:text="+" />

<Button
android:background="@drawable/shape"
android:text="1" />

<Button
android:background="@drawable/shape"
android:text="2" />

<Button
android:background="@drawable/shape"
android:text="3" />

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

</RelativeLayout>

Answer

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>"

emulator

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>
Comments