Custom List: The Row Item Layout

Create a new project for this section. Give it the application name of Country Flags. For the template, we still need Empty Activity. When you click Finish and the project loads, click on your activity_main.xml file. Delete the default Hello World TextView because we don't need it. The only thing we need here is a ListView.

In earlier versions of Android Studio, locate the Containers item and the ListView in the Palette. In later versions, the ListView is in the Legacy category. Drag one onto your blank layout (or on the Component Tree). With the ListView selected, locate the ID property on the right and enter flagListView as the ID:

A ListView added to a layout in Android  Studio

Here's what the screen will look like in later versions of Android Studio (expand the Layout item):

A ListView added to an Android layout

There's one or two more properties we can set for the ListVIew. To add Constraints to the ListView, click on the Infer Constraints icon at the top of the layout screen:

The Infer Constraints icon

Your properties area on the right should look like this, with the jagged lines in the Constraints square:

Properties area in Android Studio showing constraints

Two more properties we can set are divider and dividerHeight.

The divider and dividerHeight properties of a ListView

In later versions of Android Studio, these can be found by expanding the Common Attributes section:

The divider and diverHeight attributes in Android Studio 3

We're going to be designing a layout like this:

Mock-up of a row item layout

We'll have an Image on the left. We'll also have a heading at the top, and a sub-heading below it. This layout will be for every row in our ListView. But you can design whatever you want here, for your row items layout.

To add spacing between the rows you can set a dividerHeight property. You can also specify what kind of divider you want. If you have an image you'd like to use as a divider between each row, you can use that. We'll set a transparent divider, though.

Click inside the textbox for dividerHeight, then. Enter a value of 10dp (you can always increase or decrease this later, if you prefer).

For the divider, click the button to the right of the textbox:

Pick a Resource button in Android Studio

Setting a divider for a custom list

When you click the button, you'll see the Resources dialogue box appear. Click on Color from the list on the left.

Resources dialogue box showing a transparent  color highlighted

From the list of colours, scroll down and select transparent. When you click OK, your properties area will look like this:

ListView properties

ListView attributes

We can now create an XML file that will be used to host a row in our ListView.

You'll need a new XML file for this. In the explorer area on the left, right-click the res > layout folder. From the menu that appears, select New > Layout resource file.

Layout resource file menu

From the dialogue box that appears, type list_view_row as the file name:

Make sure the Root Element says LinearLayout, and that the directory is layout. Press OK to create the file.

To open it up, double click the file in the Explorer, if it's not already open:

A new XML resource file created

Here's what we want this layout to look like:

An Image and TextView layout

The ImageView is inside of a horizontal LinearLayout. You then place a vertical LinearLayout inside of the horizontal one. The two TextView controls go inside of the vertical LinearLayout. Let's see how to do that.

Have a look at the Component Tree just below the Palette. If your LinearLayout says vertical, click on the layout to select it:

The Component Tree in Android Studio

In the properties area on the right, locate the orientation property. Change it horizontal:

Setting the orientation property to horizontal

In later versions of Android Studio, the orientation item is under the Common Attributes section:

Setting the orientation for a Linear Layout in Android Studio 3

In earlier versions of Android Studio, locate the Images section of the Palette, drag an ImageView onto the LinearLayout in the Component Tree:

Dragging an ImageView widget onto the Component Tree in Android Studio

In later versions, the ImageView is under the Common category:

Dragging an ImageView onto a layout

When you drag an ImageView to a layout you'll get the Resources dialogue box popping up. Select any drawable image from the list, for now (we'll have some flag images for you to download soon):

Setting an image for the ImageVIew widget

In the Layouts section of the Palette, drag a vertical LinearLayout below the ImageView:

Adding a vertical LinearLayout to the design

Now drag two TextViews onto the vertical LinearLayout:

Two TextView widgets added to the layout

Click on the first TextView to select it. Now change the ID property to textHeading (don't worry about the layout width and height):

Setting an ID for a TextView

Click on the second TextView to select it and change its ID to textSubHeading:

Setting an ID for a subheading to use as a TextView

Your Component Tree will then look like this:

Component Tree showing an ImageView and two TextViews

The Image in the ImageView is looking a bit small. Click on it in the Component Tree to select it. In the Properties area in earlier versions of Android Studio, locate the layout_height property and change it to 50dp. Change the layout_width to match_parent. This will make the ImageView a bit wider:

Setting a layout_width and layout_height

In later versions, expand the Declared Attributes section and change the layout width and height from there:

Changing the layout width and height of an ImageView

The layout itself should look like this:

An XML layout for a row in a ListView

The ImageView and the two TextViews will be used as a single row in our ListView. We'll create an array of this row and fill up the ListView with row items.

Let's create a Java Class that we can use to set up a single row. We can then create new row objects from this class.

Back to the Android Contents Page