Android Tech

The more we share, the more we get

ListView (Part 2) – Display list item with custom style


In the previous post, I have create a very simple list view control just display text for each item. In fact, the needs is more than that. So, in this post, we will create a list view with a custom row (have some other controls or layout…)

The final result will look like this:

The main idea of this method is: we will create a layout for a list item (one row) and apply it to the list view.

1. Create a file contain layout of list item as follow:

<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout
xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
android:layout_width=”match_parent”
android:layout_height=”match_parent”>

<TextView android:text=”Hello1″
android:id=”@+id/TextView01″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_marginRight=”30dip”/>

<TextView android:text=”Hello2″
android:id=”@+id/TextView02″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_marginRight=”30dip”/>

<Button android:id=”@+id/close”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:layout_alignParentBottom=”true”
android:text=”buy” />

</LinearLayout>

2. Insert a ListView control to your main screen (main.xml)

<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout android:id=”@+id/LinearLayout01″
android:layout_width=”fill_parent” android:layout_height=”fill_parent”
xmlns:android=”http://schemas.android.com/apk/res/android”&gt;

<ListView android:id=”@+id/ListView01″
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”>
</ListView>
</LinearLayout>

3. Finally, load data from your object to item list in your main activity

package android.listview;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class MainActivity extends Activity {

private ListView lv1;
private String lv_arr[] = { “Android”, “iPhone”, “BlackBerry”, “AndroidPeople” };

@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);
lv1 = (ListView) findViewById(R.id.ListView01);
lv1.setAdapter(new ArrayAdapter<String>(this, R.layout.listitem, R.id.TextView01, lv_arr));
}
}

Note:

” lv1.setAdapter(new ArrayAdapter<String>(this, R.layout.listitem, R.id.TextView01, lv_arr))” means that you load data from array named “lv_arr” to text view object id “TextView01” placed in layout “listitem”

“ArrayAdapter<String>” means data type of variable “lv_arr” is String

You can download the source code from here

You can set background image to your application to make it more nice

android:background=”@drawable/bk”

The result look like this:

or you can replace the default divider by set the attribute “android:divider” as follow:

android:divider=”@drawable/divider2″

And the result:

If you want to align items in a list item, you first should modify the attribute “android:layout_width” from “wrap_content” to value “fill_parent”, reason why we do this is Android just align item in its control, not it’s parent. And after that insert one more attribute “android:gravity=”right” “.

Here is the result before modify:

And this is the result after modify:

You can download the source code from here

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: