Android Simple List App

In this section, we're going to tackle Android Lists. You've no doubt seen may apps that use a list view. They look like this:

Android Phone Emulator showing a Simple List App

If there are too many items in the list, you can scroll down to see more.

When you select an item on the list, you typically go to a new Activity. In the image below, we've selected Ruby on Rails from the previous list of programming courses:

Second Activity started from a Simple List

Let's make a start in creating a simple list that goes to a second screen when a list item is selected.

Start a new project for this. Type Simple List as the application name, and Empty Activity as the template. When your project loads, click on the activity_main.xml tab. Make sure you are in Design view and not Text view. Click on the default "Hello World" TextView and press the delete key on your keyboard to get rid of it. In earlier versions of Android Studio, expand the Containers item in the Palette and locate ListView:

ListView showing in the Android Studio palette

The ListView in later versions of Android Studio is under the Legacy item in your palette. (The RecyclerView, which is under Containers, is the more modern version of ListView. It's quite complicated to use, though, so we'll stick with the ListView for this simple list example.)

Drag one onto your blank Activity (or onto the Component Tree). It should look like this:

A ListView showing on a layout

As you can see, it's an empty container. It will get filled with your list items when your app is up and running.

To add the constraint, make sure your ListView is selected. Now click the Infer Constraints icon in the toolbar:

Teh Infer Constraints icon in Android Studio

Take a look at the properties area on the right and it should look like this in earlier versions of Android Studio:

The properties area for a ListView

In later version of Android Studio, expand the Layout category:

In the ID property at the top, type myListView. We'll need this ID in our code:

Adding an ID for a ListView

If you have a look at your layout, it may have turned into this in earlier versions of Android Studio (don't worry if it hasn't):

A default ListView showing in the layout editor

These are default placeholders for a TextView and a sub TextView. We'll be replacing Item 1, Item2, Item 3, etc, with our own headings. (We'll be making use of the sub views in the next section, and adding an image to the left of the TextViews.)

That's all we need for the design of the layout. We can get some coding done now.

Back to the Android Contents Page