Friday, September 16, 2011

Android Programming - ListView, ListActivity with Header

Have been playing around with Android for 2 months maybe, I think ListView very important for me, I used it in my application, and help me build the UI faster. I like to use list adapter and ListActivity, it is simple and great for presenting data (my company app is about showing data :p). It simplify the onClick function, I can use the overriding method of onListItemClick, generating single reusable function for every list item, with ease of access to the data.
The idea to have listview with header is using a relative layout to positioning the listview below the header layout. It seems simple, but for the first time I need some trial and error before succedd.
This my example layout :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#585861"
    android:id="@+id/top_bar">
        <TextView android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="HEADER" ></TextView>
    </LinearLayout>
    <ListView android:id="@android:id/list"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/top_bar"
        >
    </ListView>
    <TextView android:id="@android:id/empty"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Nothing, it's empty" 
        android:layout_below="@id/top_bar" />
</RelativeLayout>

That for header, this is the ListView layout :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"
    android:id="@+id/header_list">
    <TextView android:id="@+id/text1"
        android:textSize="16sp"
        android:layout_width="30dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:layout_column="0"/>
    <TextView android:id="@+id/text2"
        android:layout_width="30dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:layout_column="1"/>
</LinearLayout>
You can also use default List layout from android, for example simple_list_item1, or the other, I just want to show you how to make your custom layout for ListView.
And finally this is the activity code :
@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.header);
        dbHelper = new GSDbAdapter(this); //this is my database helper
        dbHelper.open(); //don't just copy it, use your own db helper
    ListAdapter adapter = new SimpleCursorAdapter(this, R.layout.list_main, cGrid, new String[]{"dataDb1", "dataDb2" }, new int[] {R.id.text1, R.id.text2});
        this.setListAdapter(adapter); //dataDb1 and dataDb2 is query from Db and then placed to textview with Id text1 and text2 in layout list_main, cGrid is cursor from my database, use your own too
}

@Override
    protected void onListItemClick(ListView l, View v, int position, long id) {
    super.onListItemClick(l, v, position, id);
    //your code here
}
Don't forget to extend ListActivity instead of Activity. I hope this will help you a little bit, any comment and suggestion will be appreciated.
Thanks.

Categories: , , , , ,

0 komentar:

Copyright © Johannes Dwi Cahyo | Powered by Blogger

Design by Anders Noren | Blogger Theme by NewBloggerThemes.com | BTheme.net      Up ↑