Gradient Backgrounds for Android Widgets

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

You can add a gradient to your background row items, instead of a solid colour. First, let's add two new colours to our XML file from the previous lesson.

Add the following to colours to your colors.xml file:

<color name="endGradient">#BFADEE</color>
<color name="startGradient">#8837F7</color>

To get the gradient, you set up a shape in an XML file. This XML file needs to go in the res > drawable folder. Right-click this folder in the Explorer on the left. Select New > Drawable resource file, like you did before. In the File name box, type gradient, and then click OK. This will create a new XML file in your drawable folder:

The drawable folder in Android Studio showing a gradient XML file

In the code for this XML file, you'll probably have a selector tag set up:

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

</selector>

Delete the word selector at the top and type shape instead. Your code should be this:

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

</shape>

Now tap the spacebar on your keyboard just after res/android". Add this to the end:

android:shape="rectangle">

Your XML file will look like this:

An Android XML file for a shape

A gradient has attributes for endColor, startColor and angle. Add this for your shape:

<gradient android:startColor="@color/startGradient" android:endColor="@color/endGradient"
android:angle="90" />

Your gradient.xml file will then look like this:

A shape XML file with a gradient added

You now need to apply the gradient instead of the colour as the background.

Go back to your activity_main.xml file. Click on your flagListView widget to select it. Locate the listSelector property again, and bring up the Resources dialogue box. You should see your gradient on the list in the middle:

The Resources dialogue box showing a gradient in the Drawable folder

If you can't see it, make sure you are in the Drawable section on the left. Click OK to apply the gradient.

Start your app again, and select a flag item. You should see your gradient in the background:

An Android ListView app with a gradient as the background for a row item

Play around with your gradient.xml file. Change the start and end colours. Change the angle, as well, to see what happens.

 

 

Text Colour

You can add colours for your text in the same way. Open up your colors.xml file. Add a new colour for your text heading. We've gone for a dark red:

Setting a color name in an XML file

Now go back to your list_view_row.xml file. Click on your textHeading TextView to select it. In the properties area on the right, locate the textColor property and click on the Pick a Resource button:

The textColor property in Android

When you get the Resources dialogue box popping up, select your new colour in the Colors section:

The Resources dialogue box showing a color value

Click OK to set the colour for your text heading. You can set a colour for the subheading as well, if you like. Just add a new color item to your colors.xml file.

 

And that's it for the ListView app. Adapt it to suit your own needs. See what you can come up with! In the next section, we'll take a look at alternate layouts.