5 Minute Snippets: How to Build an Android ListView

When learning Android development, it’s imperative that you learn how to implement the basic UI controls. One of the most common practices in any mobile platform is to take a collection of data and display it in a list. In the Android ecosystem, we can get this done with a component called a ListView.

Step One – Create Empty Activity

Open Android Studio and then create an Empty Activity.

At its basic level, an activity controls what’s going on in the current screen and what content is placed on that screen.

Step Two – Create the XML Layout

The presentation portion of you listview is created using an XML layout. These are stored in the layout directory under res

When you open the file activity_main.xml file, you’ll see either the default XML or the Designer.

Erase the TextView XML and replace it with a ListView

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"/>

<ListView
android:id="@+id/mobile_list"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</ListView>

Inside of the ListView, you’ll see that we have a property called android:id. This property will allow for us to select this control later on from our Java activity file.

Step Three -Part 2

Next we want to create the XML for each individual element. These are the cells that will show up for each item in our ListView.
Create an XML layout file with a TextView. I named mine activity_listview.xml

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/label"
android:padding="10dp"
android:textSize="16sp"
android:textStyle="bold">
</TextView>

 

Step Three – Adding and Array Adapter

As we move over to out MainActivty file, you’ll see that we have an OnCreate method. This method is called once the Activity is created. In order to display out ListView, first, we are going to need some data. Right above the OnCreate method, create an array of String. This can contain anything that you want.

languageArray = {"Spanish","Italian","French","German","Russian","English","Portuguese","Japanese"};

Now, inside of the OnCreate method, we are going to create what is called an ArrayAdapter. This takes the context of the activity, the layout that we want to display for each item and the array of items.

ArrayAdapter adapter = new ArrayAdapter<String>(this, R.layout.activity_listview, languageArray);

We then get this ListView by the id that we gave it in our layout file.

ListView listView = (ListView) findViewById(R.id.mobile_list);

After that, we call the method on our setAdapter. This passes our adapter into the ListView and allows for it to be displayed to the user.

listView.setAdapter(adapter);

The finished Activity file should look like this.

public class MainActivity extends AppCompatActivity {
// Array of strings...
String[] languageArray = {"Spanish","Italian","French","German","Russian","English","Portuguese","Japanese"};

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);

  ArrayAdapter adapter = new ArrayAdapter<String>(this, R.layout.activity_listview, languageArray);

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

 

We can now build the application and our array of items should be displayed.