Introduction to ListView

 In our previous tutorial, we saw how we can arrange different views in the screen using various Layouts. Now, we will see how we can arrange the views in a vertically scrollable List. 

Let’s begin with creating an Android Application with a blank Activity. (If you are new to Android development please follow this tutorial to see how to create an android project)

Now in the layout file (activity_main.xml), add a ListView. With mandatory attributes, layout_width and layout_height, let’s also add id attribute so that we can access this ListView from Java code.

1:  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2:    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"  
3:    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"  
4:    android:paddingRight="@dimen/activity_horizontal_margin"  
5:    android:paddingTop="@dimen/activity_vertical_margin"  
6:    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">  
7:    
8:    <ListView  
9:      android:id="@+id/listView"  
10:      android:layout_width="match_parent"  
11:      android:layout_height="match_parent"/>  
12:    
13:  </RelativeLayout>  
14:    

Now lets access this ListView from MainActivity.java and add some data to it. For this we define a ListView and an array of item to display in the listView.

 public class MainActivity extends AppCompatActivity {  
   
   private ListView mListView;  
   
       private  String[] items = {"Cupcake", "Donut", "Froyo", "GingerBread", 
            "Honeyomb", "IceCream Sandwich", "Jelly Bean", "Kitkat", "Lollipop", 
            "Android M", "Android N", "Android O", "Android P", "Android Q", "Anroid R", 
            "Android S", "Android T", "Android U", "Android V", "Android W", "Android X",
             "Android Y", "Android Z"};
 ...  
   
 ....  

Next we will set data to the ListView using an ArrayAdapter class. Add following code to onCreate() Method.

     mListView = (ListView)findViewById(R.id.listView);  
   
     ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, items);  
     mListView.setAdapter(adapter);  
   

Here, we assigned the ListView that we declared in xml file to mListView. And then created an instance of an ArrayAdapter with the items we created before. ArrayAdapter acts as the man in the middle between the list and data. It inflates the Layout of each item and populates the defined data in the view.

Let's run the application.

We can see the list items populated in the ListView which is vertically scrollable. But when we select list items nothing happens. Let's add a click listener to the listView to add some actions to click event.

 mListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {  
       @Override  
       public void onItemClick(AdapterView<?> adapterView, View view, int position, long l) {  
         Toast.makeText(MainActivity.this, "You clicked :" + items[position], Toast.LENGTH_SHORT).show();  
       }  
     });  

We set the OnItemClickListener to the ListView where we override onItemClick method which will be called when any of the list item is selected. Which has position of the selected item as third argument. We can use that to display the selected item from our array.

When we run the app and press any list item we see a Toast message as seen on the screenshot above.

Find Full Source code of this example on GitHub


In the next tutorial we will see how we can use a custom adapter to display more complex data in a ListView.