Making icons change with state

In Android, images have state; they can change how they look according to the widget that is using them. In fact, this is how a button works; it has a background image that changes state depending on whether it's pressed, released, enabled, disabled, focused, and so on. For us to show the user which of these categories they have actually selected, we need to provide them with a visual indication on the icon. This involves some editing:

1. Start by making a copy of the ic_accommodation_black.xml file that was generated, and name this one ic_accommodation_white.xml. Use copy, and then paste the file into the same directory to have Android Studio bring up a Copy dialog.

Vector graphics in Android are XML files representing the various shapes and colors that make up the graphic. A vector graphic doesn't contain the pixel data like a bitmap image (such as a .png or .jpeg), but contains instructions for how to render the image. This means that by adjusting the coordinates contained within the instructions, the image can be made larger or smaller with little or no loss of quality.

1. Beware, because by default, Android Studio might have selected the drawable-xhdpi directory as the target for the paste operation. If it has, you'll need to change this to drawable:

1. The editor will open with the new copy of the icon, which will still be black. The code for the file will look something like this:

<vector
  android:height="32dp"
  android:viewportHeight="24.0"
  android:viewportWidth="24.0"
  android:width="32dp"
  xmlns:android="http://schemas.android.com/apk/res/android">

    <path android:fillColor="#FF000000" android:pathData="..."/>
</vector>

1. Change the android:fillColor attribute from #FF000000 to #FFFFFFFF to change the icon from black to white.

Colors in Android resources are specified using the standard Hexadecimal color notation. This is the same notation used on the web in CSS and HTML files. Each pair of two characters represents one part of the color component with values from 0 to 255 (inclusive). The components are always Alpha, Red, Green, and Blue, in that order. Alpha represents how transparent or opaque the color is, zero (00) being completely invisible, while 255 (FF) is completely opaque.

1. Now, repeat this operation for all the other icons you imported, ensuring that each one is copied to the drawable directory, and change its name from _black to _white.
2. You now have a black and white version of each icon; black is perfect to place against the white background of a CardView, while white is perfect to place against the accent color of your application, and shows how the icon has been selected by the user. For this, we need even more drawable resources. Right-click on the drawable directory and choose New| Drawable resource file.

1. Name this new file ic_category_accommodation and click on OK.
2. Android Studio will now open the new file, which will be an empty selector file:

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

A selector element corresponds to a StateListDrawable object from the android.graphics.drawable package. This class attempts to match its own state flags against a list of possible visual states (other drawable objects). The first item that matches is displayed, which means that it's important to consider the order you declare the states in.

1. First, tell the selector that it will always be the same size by setting its constantSize attribute, and then tell it that it should quickly animate between its state changes. This short animation gives the user an indication of these changes when choosing a category:

<selector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:constantSize="true"
    android:exitFadeDuration="@android:integer/config_shortAnimTime"
    android:enterFadeDuration="@android:integer/config_shortAnimTime">

1. First, you'll need to create a state for when the category is selected; you'll use two layers: one will be a simple circle background filled with the accent color, and over that you'll have the white version of the accommodation icon:

<item android:state_checked="true">
  <layer-list>
    <item>
      <shape android:shape="oval">
        <solid android:color="@color/colorAccent"/>
      </shape>
    </item>
    <item
        android:width="28dp"
        android:height="28dp"
        android:gravity="center"
        android:drawable="@drawable/ic_accommodation_white"/>
  </layer-list>
</item>

1. Then, create another item that is the default state--the black-filled accommodation icon:

<item android:drawable="@drawable/ic_accommodation_black"/>

1. Repeat this process for each icon you imported so that each one has a stateful, drawable icon that you can use in the layout file.

This process is often repeated, and there may even be more drawable resources involved for more varied state lists. Drawable elements are not always nested, as you did with the preceding state_checked item; they are often written into external drawable resources and then imported. This allows them to be reused without requiring the resource to be state-aware.