j-maas
j-maas

Reputation: 906

What's a good structure for my UI?

I am new to developing an Android app in preparation for a bigger personal project.
After looking up Google's introduction pages I still struggle to figure out, how to design a clean user interface. It just feels a bit patched together...

The app is supposed to be a counter that can increment and decrement. The user should also be allowed to define what value should be added or subtracted to the counter via a text box.
Here's how the UI layout looks like:
Counter UI
At the top is the counter value, with a little margin below that is the manual intervall input and clear button, and finally at the bottom a button to increment and one to decrement the counter.

I have the following hierarchie:

My code is as follows:

<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" android:paddingLeft="50dp"
    android:paddingRight="50dp"
    android:paddingTop="20dp"
    android:paddingBottom="50dp" tools:context=".Count"
    android:gravity="center"
    android:focusableInTouchMode="false">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="0000"
            android:id="@+id/txvCounter"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:textSize="70sp"
            android:textStyle="bold"
            android:layout_gravity="center"
            android:layout_marginBottom="50dp"
            android:digits="4"
            android:editable="false" />

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="bottom"
            android:layout_marginBottom="50dp">

            <EditText
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:inputType="numberSigned"
                android:ems="10"
                android:id="@+id/txbOffset"
                android:gravity="center_horizontal"
                android:textSize="40sp"
                android:layout_gravity="bottom"
                android:layout_weight="1"
                android:textIsSelectable="true"
                android:text="0001"
                android:editable="true"
                android:digits="4"
                android:elegantTextHeight="false"
                android:enabled="true"
                android:autoText="false"
                android:clickable="false" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="C"
                android:id="@+id/btnApplyOffset"
                android:textSize="40sp"
                android:onClick="clearOffset" />
        </LinearLayout>

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

            <Button
                android:layout_width="100sp"
                android:layout_height="wrap_content"
                android:text="-"
                android:id="@+id/btnDecr"
                android:textSize="70sp"
                android:layout_marginRight="25dp"
                android:layout_gravity="left"
                android:layout_weight="1"
                android:onClick="decrCount" />

            <Button
                android:layout_width="100sp"
                android:layout_height="wrap_content"
                android:text="+"
                android:id="@+id/btnIncr"
                android:textSize="70sp"
                android:layout_marginLeft="25dp"
                android:layout_weight="1"
                android:onClick="incrCount" />
        </LinearLayout>

    </LinearLayout>

</RelativeLayout>

I know there are a few minor pitfalls like hardcoding the strings etc. I'm more concerned with the general layout.
Is there a cleaner or more elegant way of laying out the design?

Upvotes: 0

Views: 105

Answers (1)

rahul.ramanujam
rahul.ramanujam

Reputation: 5618

Get rid of the top linear layout to avoid nester linear layout

<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" android:paddingLeft="50dp"
    android:paddingRight="50dp"
    android:paddingTop="20dp"
    android:paddingBottom="50dp" tools:context=".Count"
    android:gravity="center"
    android:focusableInTouchMode="false">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="0000"
            android:id="@+id/txvCounter"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:textSize="70sp"
            android:textStyle="bold"
            android:layout_gravity="center"
            android:layout_marginBottom="50dp"
            android:digits="4"
            android:editable="false" />

        <LinearLayout
            android:orientation="horizontal"
             **android:id="@+id/layout1"
            android:layout_below = "@+id/txvCounter"**
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="bottom"
            android:layout_marginBottom="50dp">

            <EditText
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:inputType="numberSigned"
                android:ems="10"
                android:id="@+id/txbOffset"
                android:gravity="center_horizontal"
                android:textSize="40sp"
                android:layout_gravity="bottom"
                android:layout_weight="1"
                android:textIsSelectable="true"
                android:text="0001"
                android:editable="true"
                android:digits="4"
                android:elegantTextHeight="false"
                android:enabled="true"
                android:autoText="false"
                android:clickable="false" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="C"
                android:id="@+id/btnApplyOffset"
                android:textSize="40sp"
                android:onClick="clearOffset" />
        </LinearLayout>

        <LinearLayout
            android:orientation="horizontal"
            **android:id="@+id/layout2"
            android:layout_below = "@+id/layout1"**
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <Button
                android:layout_width="100sp"
                android:layout_height="wrap_content"
                android:text="-"
                android:id="@+id/btnDecr"
                android:textSize="70sp"
                android:layout_marginRight="25dp"
                android:layout_gravity="left"
                android:layout_weight="1"
                android:onClick="decrCount" />

            <Button
                android:layout_width="100sp"
                android:layout_height="wrap_content"
                android:text="+"
                android:id="@+id/btnIncr"
                android:textSize="70sp"
                android:layout_marginLeft="25dp"
                android:layout_weight="1"
                android:onClick="incrCount" />
        </LinearLayout>

</RelativeLayout>

Upvotes: 1

Related Questions