Reputation: 906
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:
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
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