Tuesday, 29 January 2013

Rework the Layout | Android Tutorial pdf

Rework the Layout

First, we need to change our layout around, to introduce the tabs and split our UI between a list tab and a details tab. This involves:
=> Removing the RelativeLayout and the layout attributes leveraging it, as that was how we had the list and form on a single screen
=> Add in a TabHost, TabWidget, and FrameLayout, the latter of which is parent to the list and details
To accomplish this, replace your current LunchList/res/layout/main.xml with the following:
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TabWidget android:id="@android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<FrameLayout android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ListView android:id="@+id/restaurants"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
<TableLayout android:id="@+id/details"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:stretchColumns="1"
android:paddingTop="4dip"
>
<TableRow>
<TextView android:text="Name:" />
<EditText android:id="@+id/name" />
</TableRow>
<TableRow>
<TextView android:text="Address:" />
<EditText android:id="@+id/addr" />
</TableRow>
<TableRow>
<TextView android:text="Type:" />
<RadioGroup android:id="@+id/types">
<RadioButton android:id="@+id/take_out"
android:text="Take-Out"
/>
<RadioButton android:id="@+id/sit_down"
android:text="Sit-Down"
/>
<RadioButton android:id="@+id/delivery"
android:text="Delivery"
/>
</RadioGroup>
</TableRow>
<Button android:id="@+id/save"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Save"
/>
</TableLayout>
</FrameLayout>
</LinearLayout>
</TabHost>

No comments: