This post is part of the Android UI series. While designing my app I was searching for a GUI which had a) an edit box where user can type in stuff. More than one line i.e a multi line edit text box. b) The edit text box is scrollable c) A bottom panel or footer of 2 buttons which can say OK or Cancel.
One unique requirement I have seen on stackoverflow is this edit text box to grow as much as possible but stops short of blocking the panel of buttons. i.e the buttons will be shown irrespective of the amount of text in the box.The UI needed is as show below.
a) UI with buttons panel. Edit Text has not filled the view adequately.
b) UI with scrollable Edit Text and Button panel. Text box has a lot of content but will not block the Button panel.
The layout 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" >
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/note_taker_title_prompt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="6dip"
android:paddingRight="6dip"
android:paddingTop="6dip"
android:text="@string/note_taker_title_prompt" />
<EditText
android:id="@+id/notetaker_title_et"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:layout_marginTop="16dp"
android:gravity="center"
android:singleLine="true" />
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<EditText
android:id="@+id/notetaker_text_et"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollHorizontally="false"
android:scrollbars="vertical"
android:layout_weight="1"
android:layout_marginBottom="4dp"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:layout_marginTop="16dp"
android:singleLine="false" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center">
<View
android:layout_width="match_parent"
android:layout_height="1dip"
android:background="#393b3e"
android:layout_alignParentTop="true"/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal">
<Button
android:id="@+id/notetaker_cancel_btn"
style="?android:attr/borderlessButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_weight="1"
android:gravity="center"
android:paddingLeft="6dip"
android:paddingRight="6dip"
android:paddingTop="6dip"
android:text="@string/get_btn_back" />
<View
android:layout_width="1dip"
android:layout_height="match_parent"
android:background="#393b3e"
android:layout_centerHorizontal="true"/>
<Button
android:id="@+id/notetaker_save_btn"
style="?android:attr/borderlessButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_weight="1"
android:gravity="center"
android:paddingLeft="6dip"
android:paddingRight="6dip"
android:paddingTop="6dip"
android:text="@string/note_taker_save_btn" />
</LinearLayout>
<View android:layout_width="match_parent"
android:layout_height="1dip"
android:background="#393b3e"
android:layout_alignParentBottom="true"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
One unique requirement I have seen on stackoverflow is this edit text box to grow as much as possible but stops short of blocking the panel of buttons. i.e the buttons will be shown irrespective of the amount of text in the box.The UI needed is as show below.
a) UI with buttons panel. Edit Text has not filled the view adequately.
b) UI with scrollable Edit Text and Button panel. Text box has a lot of content but will not block the Button panel.
The layout 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" >
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="@+id/note_taker_title_prompt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="6dip"
android:paddingRight="6dip"
android:paddingTop="6dip"
android:text="@string/note_taker_title_prompt" />
<EditText
android:id="@+id/notetaker_title_et"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:layout_marginTop="16dp"
android:gravity="center"
android:singleLine="true" />
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<EditText
android:id="@+id/notetaker_text_et"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollHorizontally="false"
android:scrollbars="vertical"
android:layout_weight="1"
android:layout_marginBottom="4dp"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:layout_marginTop="16dp"
android:singleLine="false" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center">
<View
android:layout_width="match_parent"
android:layout_height="1dip"
android:background="#393b3e"
android:layout_alignParentTop="true"/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal">
<Button
android:id="@+id/notetaker_cancel_btn"
style="?android:attr/borderlessButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_weight="1"
android:gravity="center"
android:paddingLeft="6dip"
android:paddingRight="6dip"
android:paddingTop="6dip"
android:text="@string/get_btn_back" />
<View
android:layout_width="1dip"
android:layout_height="match_parent"
android:background="#393b3e"
android:layout_centerHorizontal="true"/>
<Button
android:id="@+id/notetaker_save_btn"
style="?android:attr/borderlessButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_weight="1"
android:gravity="center"
android:paddingLeft="6dip"
android:paddingRight="6dip"
android:paddingTop="6dip"
android:text="@string/note_taker_save_btn" />
</LinearLayout>
<View android:layout_width="match_parent"
android:layout_height="1dip"
android:background="#393b3e"
android:layout_alignParentBottom="true"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
No comments:
Post a Comment