Saturday, May 12, 2012

Using ListView as Part of Android Layout

I've written other posts about using a ListView.  This one covers using a ListView as part of an overall layout.  The first screen of the Connexions for Android app has a ListView for the bottom half of the screen.  The top half is an image and a search box.  To get the layout correct, I had to nest several layouts.

The layout for the screen is in the landing.xml file.  The nesting of the layout is

Linear Layout
    Linear Layout
        Relative Layout
    Relative Layout
    Linear Layout
   
The ListView is in the last LinearLayout.  The Layout for the ListView is pretty straightforward.
...
<LinearLayout
    android:id="@+id/relativeLayout2"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" 
    android:background="@color/blue_background">

    <ListView
        android:id="@+id/landingList"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:cacheColorHint="#00000000"
        android:fastScrollEnabled="true"
        android:smoothScrollbar="true" />
</LinearLayout>

...
The list layout is in the landing_list.xml file.  It is somewhat similar to the List layout for the booklists with the exception of there is only one line of text which is centered in the list item.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@color/blue_background"
    android:cacheColorHint="#00000000">
    
  <LinearLayout
      android:id="@+id/LinearLayout01"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:orientation="vertical"
      android:gravity="center"
      android:layout_alignParentLeft="true"
      android:layout_toLeftOf="@+id/arrowView">
        <TextView
               android:id="@+id/optionName"
               android:layout_width="fill_parent"
               android:layout_height="wrap_content"
               android:layout_marginTop="15dip"
               android:layout_marginBottom="15dip"
               android:layout_marginLeft="3dip"
            style="@style/TextAppearance.Title.Landing" />
      
  </LinearLayout>
    <ImageView
           android:id="@+id/arrowView"
      android:layout_width="24sp"
      android:layout_height="24sp"
      android:layout_alignParentRight="true"
          android:layout_centerVertical="true"
        android:layout_margin="6sp" 
      android:layout_toRightOf="@id/lensOther"
      android:src="@drawable/arrow"/>
</RelativeLayout>

As always, you can browse the source or download a zip file of the source. Connexions for Android is available in Google Play or from the Connexions website.