Styling a Spinner

Our last Android update introduced the styling of several different Android views, including multiple button types (Button, CheckBox, RadioButton, etc.), the ListView and the GridView. Since then, we've continued to enable CSS styling for more Android views, and we'd like to present a few of them here in this update.

Setting up

For this update we are using the same demo application as in our last update, so rather than rehashing the setup steps, we suggest you check out the "Setting Up" section from last time . However, be sure to grab the PixateViewsDemo.zip of the demo app. And if you want to try out the Pixate library in your own app, be sure to download the pixate.jar.

Demo App

The previous version of the demo app showed a list of supported views which ended at GridView. If you run the new version produced for this update, you will see three new entries: TextView, EditText and Spinner. Click on each of those to see an example of the view styled using CSS. You'll find the CSS files themselves under the assets/styles folder, one file per view (e.g., assets/styles/spinner.css for styling the Spinner.)

Let's look at the TextView and Spinner examples in greater depth. We've only just begun adding styling support to EditText, so we will save a deeper discussion of it for a future update.

TextView

Though we didn't mention it in our previous update, we actually had rudimentary TextView support at that time. We needed it to support Button and its subclasses, since TextView is Button's superclass.

Now we've expanded our support of the TextView, and everything we say in this section is applicable to all of its subclasses, including the Button and its subclasses.

First and foremost, we've improved the ability to style the TextView differently in its pressed state using a pressed pseudo-class in CSS. We show this in the TextView example in our demo app, where we change the background, border and text color when the view is pressed:

.myTextView:pressed {
	background-color: linear-gradient(black, rgb(128, 128, 128));
	border: 3px solid rgb(64, 64, 64);
	color: #CACACA;
}

One important thing to keep in mind is that the TextView is not "clickable" by default and thus won't respond to presses. So if you set a pressed style such as we have done in the example, you must also set the TextView's clickable property to true either in a layout XML file or in Java code:

<!-- Layout xml example -->
<TextView
    android:clickable="true"
    ...
/>

// Java example
myTextView.setClickable(true);

In addition to improved pressed state support, we've also enabled the styling of four positions provided by Android for the placement of images inside the TextView. Android calls these the TextView's "compound drawables". They are selectable and styleable now in CSS via the names icon-left, icon-top, icon-right and icon-bottom. For example, our TextView in the demo app shows a WiFi symbol to the left of the text using the icon-left child selector. We also specify that five pixels should separate that image from the text using the compound-padding attribute of the TextView:

.myTextView {
    compound-padding: 5px;
}

.myTextView icon-left {
	background-image: url(list/wifi-icon.svg);
}

The compound-padding attribute value is applied to each icon (icon-left, icon-top`, etc.). Android only supports setting the same value for all four images, therefore the CSS attribute belongs to the TextView rather than each icon child.

Also note that any one of these compound drawables can react to a state. For example, if you would like to have a left icon for a pressed state, you can do:

.myTextView icon-left {
	background-image: url(list/wifi-icon.svg);
}

.myTextView icon-left:pressed {
	background-image: url(list/wifi-icon-pressed.svg);
}

CheckedTextView

We've also added support for the CheckedTextView, a subclass of TextView which appears in Android's default layouts for Spinner dropdowns (see next section) and ListViews using one of the built-in item choice layouts such as android.R.layout.simple_list_item_single_choice. The styling options for the CheckedTextView are identical to those for the TextView with the exception of one additional child selector available to CheckedTextView: icon, which is in addition to the icon-left, icon-top, icon-right and icon-bottom already supported by TextView. This icon child represents the checkmark image in the CheckedTextView. It appears on the far right side of the view, even to the right of icon-right if both of them are defined.

We'll see the CheckedTextView in action in the Spinner examples below.

Spinner

The Spinner combines a lot of the styling work we've done for some of the other views which it depends on, particularly the TextView and the ListView. When it's not showing its dropdown/popup to make a selection, it's merely a CheckedTextView which you can style by selecting it as a direct descendant, which we do in our example to set the font and color:

#spinner1 > #text1 {
	color: #EAEAEC;
	font-family: sans-serif;
	font-weight: bold;
	font-size: 18pt;
	compound-padding: 20px;
}

Because it's displaying a CheckedTextView (a subclass of TextView), the icon-left, icon-top, icon-right and icon-bottom children are also available for styling. We show the Wifi symbol using icon-left.

A few other children are available for styling when the Spinner displays its dropdown list for the user to make a selection. One of them is dropdown, which refers to the layout upon which the selection list is placed. You can see in our example that we've selected the dropdown in CSS in order to style its vertical offset by two pixels from the Spinner's base layout. The dropdown's background can also be set here via the background-color, but it can also be applied on the #spinner1 > list-view in our example.

#spinner1 dropdown {
	background-color: #61646D;
	vertical-offset: 2px;
}

The second special child selectable in CSS from the Spinner is the list-view, which refers to the ListView containing the selection choices. It can be styled just like any other ListView. When using one of Android's default Spinner layouts, each row in the ListView will then also contain a CheckedTextView with the common id of text1. We've used that to style the rows differently using pseudo-classes representing the pressed and checked states of the view, with the default state having no pseudo-class:

#spinner1 > list-view > #text1 {
	color: #8A8B93;
}

#spinner1 > list-view > #text1:checked {
	color: #FFFFFF;
}

#spinner1 > list-view > #text1:pressed {
	background-color: #909096;
	color: #FFFFFF;
}

And since CheckedTextView is a subclass of TextView, we again have access to those four possible icon positions (icon-left, etc.) within the view. That's how we put in the custom checkmark on the left side for the selected item:

#spinner1 > list-view > #text1 icon-left:checked {
	background-image: url(spinner/checkmark_active.svg);
}

The CheckedTextView's special fifth icon position (icon) would typically be used for the checkmark, though in our example we've chosen to use icon-left to display a custom checkmark, and to use icon to display a signal strength indicator image which is assigned using a series of nth-child() selectors:

#spinner1 > list-view > #text1:nth-child(5n) icon {
	background-image: url(spinner/1bars.svg);
}

#spinner1 > list-view > #text1:nth-child(5n + 1) icon {
    background-image: url(spinner/3bars.svg);
}

/* etc... */

This screenshot shows the results:

The "banana" option had previously been selected and is now in the checked state, so it has white text and a checkmark for its icon-left. The "eggfruit" option is being pressed as the screenshot is taken, so it's in the pressed state and thus has white text and a different background. The other rows match neither the pressed nor checked states, so they have the lighter text color. And because of the nth-child(5n) series of selectors we saw earlier, five different signal-strength images are used for the icon-right positions.

Conclusion

In this post we introduced another two Android views -- TextView and Spinner -- which we now support for styling with CSS. Our demo app also previews very early support for styling the EditText view, which we'll discuss more in a future update. Of course, many more views are coming and we'll update you regularly here as they do.

[Published: 2013-12-20]