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:
Here's what the screen will look like in later versions of Android Studio (expand the Layout item):
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:
Your properties area on the right should look like this, with the jagged lines in the Constraints square:
Two more properties we can set are divider and dividerHeight.
In later versions of Android Studio, these can be found by expanding the Common Attributes section:
We're going to be designing a layout like this:
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:
When you click the button, you'll see the Resources dialogue box appear. Click on Color from the list on the left.
From the list of colours, scroll down and select transparent. When you click OK, your properties area will look like this:
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.
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:
Here's what we want this layout to look like:
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:
In the properties area on the right, locate the orientation property. Change it horizontal:
In later versions of Android Studio, the orientation item is under the Common Attributes section:
In earlier versions of Android Studio, locate the Images section of the Palette, drag an ImageView onto the LinearLayout in the Component Tree:
In later versions, the ImageView is under the Common category:
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):
In the Layouts section of the Palette, drag a vertical LinearLayout below the ImageView:
Now drag two TextViews onto the vertical LinearLayout:
Click on the first TextView to select it. Now change the ID property to textHeading (don't worry about the layout width and height):
Click on the second TextView to select it and change its ID to textSubHeading:
Your Component Tree will then look like this:
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:
In later versions, expand the Declared Attributes section and change the layout width and height from there:
The layout itself should look like this:
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.
