ListView in Android

ListView is used when you have to show items in a vertically scrolling list. Best example of it is our device's Contact List. With ListView, user can easily browse the information, while scrolling up and down. You can set divider between every item and set its height and color as per your UI design.

Inside a ListView, we can show list of Text items by using TextView, or pictures using ImageView, or any other view or a combination of views.

As ListView is generally used to display a large set of data, hence it is not feasible to manually create list items for the complete data, hence Android provides us with special Adapter classes which can be used to supply data from datasets to ListView.

Following are some of the main attributes that are most commonly used:

Below we have shown how you can add a ListView to your android app using the layout XML.

<ListView
    android:id="@+id/listView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:divider="@android:color/black"
    android:dividerHeight="1dp"/>

Output Screen

Using Adapter with ListView

Let's see how we can use an Adapter to read data from an array, and display it in form of a List.

We will define a ListView in the main layout XML file activity_main.xml.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFEB3B"
    tools:context="com.example.android.studytonightandroid.MainActivity">
    
    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:divider="@android:color/black"
        android:dividerHeight="1dp"/>
        
</android.support.constraint.ConstraintLayout>

So by doing this, we have defined a ListView to be created in our MainActivity, but what data it will show? and in what format? Where will we declare and define that?

As we specified in the last tutorial, that an Adapter is used to covert data items into view objects which can be used to display as UI components.

So we need a dataset and a View into which the dataset will be converted by the Adapter.

Here we have a simple Array with festivals names in it:

String[] festivals = {
    "Diwali",
    "Holi",
    "Christmas",
    "Eid",
    "Baisakhi",
    "Halloween"
};

As our data set has simple text values, so we can define a simple TextView to hold these values and populate the ListView. Does it sound confusing? Let it sink in.

If our dataset would have had, an image and some text along with it, then we can also define a TextView along with an ImageView to display the data in the List.

So now we will create a new XML file, with name list_item.xml in the layout folder, and add a TextView in it like this,

<?xml version="1.0" encoding="utf-8"?> 
  
<TextView xmlns:android="http://schemas.android.com/apk/res/android"  
    android:id="@+id/textView"  
    android:layout_width="wrap_content"  
    android:layout_height="wrap_content"
    android:textStyle="bold" 
    android:layout_marginLeft="10dp"  
    android:layout_marginTop="5dp"  
    android:padding="4dp"  
    android:textColor="#000000"  
    />

Now its time for the finale, below we have the MainActivity.java class, in which we have used an ArrayAdapter to create text views from the data in the array, and create a list by supplying those view objects to the ListView.

package listview.studytonightexample.com.listview;  
  
import android.support.v7.app.AppCompatActivity;  
import android.os.Bundle;  
import android.view.View;  
import android.widget.AdapterView;  
import android.widget.ArrayAdapter;  
import android.widget.ListView;  
import android.widget.TextView;  
import android.widget.Toast;  
  
public class MainActivity extends AppCompatActivity {  
    ListView listView;  
    TextView textView;  
    String[] festivals = {
        "Diwali",
        "Holi",
        "Christmas",
        "Eid",
        "Baisakhi",
        "Halloween"
    };
    
    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_main);  
  
        listView = (ListView)findViewById(R.id.listView);  
        textView = (TextView)findViewById(R.id.textView);  
         
        final ArrayAdapter adapter = new ArrayAdapter(this,  
                R.layout.list_item, android.R.id.textView, festivals);  
                
        listView.setAdapter(adapter);  
  
        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {  
            @Override  
            public void onItemClick(AdapterView<?> adapterView, View view, int position, long l) {  
                // TODO Auto-generated method stub  
                
                /* appending Happy with festival name */
                String value = "Happy " + adapter.getItem(position);  
                /* Display the Toast */
                Toast.makeText(getApplicationContext(), value, Toast.LENGTH_SHORT).show();  
            }  
        });  
    }  
}

Output Screen