How to Use an Android Custom Adapter

Android Custom Lists: 1 2 3 4 5 6 7 8

Let's now turn to the MainActivity.java file. We'll display the images from here. We've produced some flag images for you to use. There are five small flag images, and five big images. All are PNG files. The small ones are 64 by 32 pixels and the large ones are 600 by 300 pixels. Download then here (a ZIP file):

Download the Flag Images (22KB)

Once you've downloaded the images, copy and paste them to your res > drawable folder. Your Explorer on the left should look like this when you're done:

Images in the res > drawable folder

In your MainActivity.java file, add these two variables to the top of your code:

ListView myListView;
ArrayList<RowItem> myRowItems;

The first one will hold a reference to the ListView on the layout; the second one will store an array of row items. We'll add these soon. Your code window should look like this:

The MainActivity Java code in Android Studio

Inside the onCreate method, set up a new array of Row Items, with this line:

myRowItems = new ArrayList<RowItem>();

Next, get a reference to the ListView on the main layout:

myListView = (ListView) findViewById(R.id.flagListView);

What we'll do now is to set up a method to add items to the ArrayList. Add this line, then:

fillArrayList( ) ;

Your onCreate method should look like this (the red text is because we haven't added the method yet):

Setting up variables in the onCreate method

An easy way to add the method to your code is to click your cursor inside of the red text. Now press ALT + ENTER on your keyboard. You see this appear:

Create method menu in Android Studio

Click the menu item that says Create method fillArrayList. Android Studio will then add the method stub for you:

private void fillArrayList( ) {

}

To add items to our array, we can create new RowItem objects. We can then use those setters we created in our RowItem Class.

Add the following line between the curly brackets of your fillArrayList method:

RowItem row_one = new RowItem( );

This sets up a new RowItem object called row_one. Now add this line:

row_one.setHeading("Flag of France");

When you type the dot after the row_one variable, you should see a list appear:

Menu showing a list of getters and setters

Select setHeading from the list, which was one of the setters we added to our RowItem Class. You can then type some text between the round brackets of setHeading. (You don't have to use the same text as ours.)

Now do the same for setSubHeading:

row_one.setSubHeading("France");

To add the small image for the ImageView, this line is this:

row_one.setSmallImageName( R.drawable.small_france );

The setSmallImageName setter is, again, from our RowItem Class. This time between the round brackets of the method, we have this:

R.drawable.small_france

R.drawable refers to the res > drawable folder in your project. Inside of this folder is an image called small_france.

Add this line for the big image that we'll use later:

row_one.setBigImageName( R.drawable.big_france );

Your fillArrayList method should look like this:

Add a row item to the ArrayList

Notice the two flag images in the margins. If you get everything right, you should see the same on your screen.

To add this row to the array you set up at the top of the code, you need this line:

myRowItems.add( row_one );

Now that we've added one row to our array, we need to add more. We'll add four more, one for each flag. See if you can do this for yourself. Set up new RowItem objects called row_two, row_three, row_four, etc. Add the headings and sub headings. Set the flags for the small and big versions of the image. Don't forget to add each item to the array. When you're done, your code should look like this:

Java code to add items to an ArrayList in Android

Before you can try it out, you need two more lines of code below the fillArrayList call in onCreate. The first one is where we set up the CustomAdapter. Add this line:

CustomAdapter myAdapter = new CustomAdapter(getApplicationContext(), myRowItems);

This passes to our CutomAdapter constructor two things; a context, and our myRowItems ArrayList. The context is getApplicationContext. As its name suggests this gets the context for the whole application, and not just a particular part of it.

The final line to add before you can try it out is this one:

myListView.setAdapter( myAdapter );

This sets our custom adapter as the adapter for this ListView.

Your onCreate method should look like this:

Java code creating and setting a Custom Adapter object

Finally, after all that hard work, you can try it out. Run your app and see what happens. You should see this, in your Emulator or real device:

A custom ListView running in an Android Emulator

And it will look like this in landscape view:

Custom ListView Android app running in Landscape mode

If you try to click on an item, however, nothing will happen. What we need to do is to write code that creates another Activity. This Activity will lead to a bigger version of the flag. We'll do that in the next lesson below.