ListView with custom layout in Android

In the article titled A ListView application in Android, we have used a built in layout to render the items in listview widget. In this article we are going to list items in a listview widget using a custom layout.

1. Create an Android project named ListViewCustomLayout

Figure 1 : Creating new Android Project

2. Select build target for this application

Figure 2 : Select API Level

3. Enter application details

Figure 3: Application Details

4. Create a new layout file,  named “listview_layout” with TextView as the root element

Figure 4 : Create new layout file called listview_layout

5. Open the file /res/layout/listview_layout.xml and update the contents with the given below code :

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id = "@+id/listview_item"
    android:padding="20dp"
    android:gravity="center"
    android:textStyle="bold|italic"
>
</TextView>

6. Open the file /res/layout/main.xml and update the contents with the given below code

<?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:orientation="vertical" >

    <ListView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/listView"
    />
</LinearLayout>

7. Open the file /src/in/wptrafficanalyzer/listviewcustomlayout/MainActivity.java and update the contents with the given below code:

package in.wptrafficanalyzer.listviewcustomlayout;

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

public class MainActivity extends Activity {

    String[] country = new String[] {
        "India",
        "Pakistan",
        "Sri Lanka",
        "China",
        "Bangladesh",
        "Nepal",
        "Afghanistan",
        "North Korea",
        "South Korea",
        "Japan"
    };

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        // R.layout.listview_layout is the custom layout
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, R.layout.listview_layout, country);

        ListView listView = (ListView) findViewById(R.id.listView);
        listView.setAdapter(adapter);
    }
}

8. Execute the application in Android Virtual Machine

Figure 4 : Application in execution

9. Download the application source code

ListView with CustomLayout 150.05 KB

Download Source

10. Testing with Android Testing Framework

Only the 50% of the application development is completed now. The remaining 50% is with the testing of the application and it is discussed in the article  titled “Android Testing Framework – Testing ListView with Custom Layout Application” .

11. Reference

http://developer.android.com/guide/index.html

How to hire me?

I am George Mathew, working as software architect and Android app developer at wptrafficanalyzer.in

You can hire me on hourly basis or on project basis for Android applications development.

For hiring me, please mail your requirements to info@wptrafficanalyzer.in.

My other blogs
store4js.blogspot.com

---

Android Knowledge Quiz

Ready to test your knowledge in Android? Take this quiz :

---

Tags: listview