ListView

Want to design a vertically scrollable menu? ListView is the answer.

In Android, ListView lets you arrange components in a vertical scrolling list.

In this tutorial, we shall learn how to create two different types of ListView:

1.    Standard way to display components in ListView.

2.    Using custom array adapter to customize the item display.

1. Standard ListView example

In this example, we shall demonstrate how to display a list of programming languages with the help of ListView. This example is simple and easy to understand.

Step 1: Android Layout file

Create a new layout file in your project’s res folder.

File : res/layout/list_proglang.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical" >

   

    <TextView

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:padding="10dp"

    android:textSize="25sp" >

    </TextView>

</LinearLayout>

Step 2: ListView

Create a Java file in your project’s src folder.

File : src/com.example.android/ListProglangActivity.java

package com.endeavour.listviewsample;

import android.app.ListActivity;

import android.os.Bundle;

import android.view.View;

import android.widget.AdapterView;

import android.widget.AdapterView.OnItemClickListener;

import android.widget.ArrayAdapter;

import android.widget.ListView;

import android.widget.TextView;

import android.widget.Toast;

public class ListProglangActivity extends ListActivity{

        static final String[] Proglang = new String[] { "Java", "Objective-C", "C Sharp","JavaScript"};

@Override

public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setListAdapter(new ArrayAdapter<String> (this, R.layout.list_proglang, Proglang));

        ListView listView = getListView();

        listView.setTextFilterEnabled(true);

        listView.setOnItemClickListener(new OnItemClickListener() {

        public void onItemClick(AdapterView<?> parent, View view,

        int position, long id) {

        // When clicked, show a toast with the TextView text

            Toast.makeText(getApplicationContext(),

            ((TextView) view).getText(), Toast.LENGTH_SHORT).show();

        }

        });

}

}

Step 3: Output

Running the project shall display the following result.

2. Using Custom ArrayAdapter

In this example, we shall demonstrate how to create 4 items in the ListView, and use a custom “ArrayAdapter” to display different images based on the “item name” in the list.

Step1: Images
Choose 4 images for the demonstration purpose.

Step 2: Android Layout file
File : res/layout/list_proglang.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical" >

    <TextView 

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:padding="10dp"

    android:textSize="25sp" >

    </TextView>

</LinearLayout>

Step 3: Custom ArrayAdapter
Create a class that extends ArrayAdapter and customize the item display in the getView() method.

package com.endeavour.listviewsample;

import android.content.Context;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ArrayAdapter;

import android.widget.ImageView;

import android.widget.TextView;

public class MobileArrayAdapter extends ArrayAdapter<String> 

{

        private final Context context;

        private final String[] values;

        public MobileArrayAdapter(Context context, String[] values)

        {

               super(context, R.layout.list_mobile, values);

               this.context = context;

               this.values = values;

        }

        @Override

        public View getView(int position, View convertView, ViewGroup parent) 

        {

               LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

               View rowView = inflater.inflate(R.layout.list_mobile, parent,false);

               TextView textView = (TextView) rowView.findViewById(R.id.label);

               ImageView imageView = (ImageView) rowView.findViewById(R.id.logo);

               textView.setText(values[position]);

               // Change image based on name

               String s = values[position];

               System.out.println(s);

               if (s.equals("C Sharp")) {

                                       imageView.setImageResource(R.drawable.windowsmobile_logo);

                               } 

               else if (s.equals("Objective-C")) {

                                      imageView.setImageResource(R.drawable.ios_logo);

                               } 

               else if (s.equals("Java")) {

                                      imageView.setImageResource(R.drawable.android_logo);

                               } 

               else {

                                      imageView.setImageResource(R.drawable.blackberry_logo);

                               }

               return rowView;

        }

}

Step 4: ListView
Create a ListView but use the above custom adapter to display the list.

package com.endeavour.listviewsample;

import android.app.ListActivity;

import android.content.Intent;

import android.os.Bundle;

import android.view.View;

import android.widget.ListView;

import android.widget.Toast;

public class ListMobileActivity extends ListActivity

{

        static final String[] ProgLang = new String[] { "Java", "Objective-C","C Sharp", "JavaScript"};

        @Override

        public void onCreate(Bundle savedInstanceState) 

        {

               super.onCreate(savedInstanceState);

               setListAdapter(new MobileArrayAdapter(this, ProgLang));

        }

        @Override

        protected void onListItemClick(ListView l, View v, int position, long id) 

        {

               //get selected items

               String selectedValue = (String) getListAdapter().getItem(position);

               Toast.makeText(this, selectedValue, Toast.LENGTH_SHORT).show();

               Intent i = new Intent(this, Temp.class);

               startActivity(i);

        }

}

Step 5: Output

Running the project shall display the following result.