Design Our Row | Android Tutorial pdf

Design Our Row

Next, we want to design a row that incorporates all three of our model elements: name, address, and type. For the type, we will use three icons, one for each specific type (sit down, take-out, delivery). You can use whatever icons you wish, or you can get the icons used in this tutorial from the tutorial ZIP file that you can download. They need to be named ball_red.png, ball_yellow.png, and ball_green.png, all located in res/drawable/ in your project.
NOTE: If your project has no res/drawable/ directory, but does have res/drawable-ldpi/ and others with similar suffixes, rename res/drawablemdpi/ to res/drawable/ directory for use in this project, and delete the other res/drawable-* directories.
The general layout is to have the icon on the left and the name stacked atop the address to the right:

                                           A fancy row for our fancy list
To achieve this look, we use a nested pair of LinearLayout containers. Use the following XML as the basis for LunchList/res/layout/row.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="4dip"
>
<ImageView android:id="@+id/icon"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:layout_alignParentBottom="true"
android:layout_marginRight="4dip"
/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<TextView android:id="@+id/title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_vertical"
android:textStyle="bold"
android:singleLine="true"
android:ellipsize="end"
/>
<TextView android:id="@+id/address"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_vertical"
android:singleLine="true"
android:ellipsize="end"
/>
</LinearLayout>
</LinearLayout>
Some of the unusual attributes applied in this layout include:
=> android:padding, which arranges for some whitespace to be put outside the actual widget contents but still be considered part of the widget (or container) itself when calculating its size
=> android:textStyle, where we can indicate that some text is in bold or italics
=> android:singleLine, which, if true, indicates that text should not word-wrap if it extends past one line
=> android:ellipsize, which indicates where text should be truncated and ellipsized if it is too long for the available space.