Styling Row Items for a ListView

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

You can syle the rows that make up your list of items. You'll see how to do that now. We'll add a background colour, first.

There is already an XML file set to hold your colour values. To find it, expand the res > values folder in the Explorer area on the left. Locate a file called colors.xml:

The colors.xml file in the res > values folder

Double click this file to see the following:

XML file showing color values

There are three colours already set up. These are used for the inbuilt styles. You can see these, if you open up the styles XML file in the values folder:

The styles.xml file.

Notice how the colour names are used:

@color/colorPrimary

You do a similar thing when setting up and using your own colours.

Switch back to the colors.xml file. Enter a new color:

<color name="orangeTint">#eba222</color>

We've called this colour orangeTint, but you can type anything you like for a name. In between the angle brackets, you need a hexadecimal colour value. We've gone for eba222 (hex values are not case sensitive).

If you're not up to speed on hexadecimal colour values, here's a short primer.

Hexadecimal values have six position, two for red, two for green, and two for blue:

Hexadecimal colour values for RGB

You can use the digits 0 to 9, and the letters A to F. In the image above, FF means switch the red full on. The two green positions are 00, meaning switch the green off. Likewise, the blue positions are 00, switching the blue off. The results of #FF0000 is red. (You need the hash/pound sign before your hex values.) If instead we type #00FF00, we'd get green. Blue would be #0000FF. If, however, we typed #EF1EE3 we'd get a nice pink colour. The hexadecimal value we have chosen for our orangeTint name is #EBA222. But you change this to anything you like.

Quite helpfully in Android Studio, you get a colour square of your hex value in the margins:

A new colour added to the colors.xml fie

You can change a colour by clicking on a square:

Colour square in the margins of Android Studio

This will bring up a colour picker dialogue box:

The Color Picker dialogue box in Android Studio

Use the sliders at the bottom and then click to select a new colour.

Now that we have a colour set up, we can use it elsewhere.

Right-click your res > drawable folder. From the menu that appears, select New, then Drawable resource file:

The Drawable resource file menu in Android Studio

Type name for your XML file in the File Name box at the top. We've called ours list_colours, but you can call it something else, if you prefer:

Creating a new resource file

Click OK to create your new XML file. It should look like this:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

</selector>

We're going to create a state_pressed item, here. So type the following before </selector>:

<item android:state_pressed="false" android:state_selected="false"

When you hit the space bar after the "false", you'll see this menu appear:

Android Studio menu showing android states

Select android:drawable from the list. When you do, you'll see another list appear. This one:

A list of colour and drawable values on a menu

The list is all your files from the drawable folder. But notice that Android Studio has also pulled colours from the colors.xml file, including the one we've just set up - orangeTint. Select this one and your XML file. Type an angle bracket to finish the ITEM tag. (Instead of the two ITEMS tags, you can get rid of the end one and just type />.

Your list_colours.xml file should look like this:

An ITEM added to a drawable xml file

Now to put this drawable.xml file to use.

Click back on your activity_main.xml file. In the Component Tree, click on your flagListView item to select it. In the properties area on the right, scroll down and click on View all properties right at the bottom. Locate the listSelector property:

The listSelector property

Click the button to the right of the text area:

The Pick a Resource button

This will bring up the Resources dialogue box again. In the Drawable section on the left, scroll down to see your list_colours item:

The Resources dialogue box showing a XML drawable selected

As you can see, it has picked up our orangeTint colour. This is coming directly from the list_colours XML file we set up in the Drawable folder.

Click OK to set the colour for a row item.

Now try it out. Run your app and select a row item. You should see this, instead of the default colour for row selection:

A row item with a different background colour

 

You'll now learn how to replace that solid colour above with a gradient as the background for the row selection. We'll do that in the next lesson below.