Interactive previews and understanding fallbacks

You can click in a preview to get a list of the resources displayed there. Clicking an item in the list brings you to that item in the resource tree. This makes it easy to locate the resource and quickly modify it.

Many components on your device have “fallbacks”. These are “backups” that are used when your theme doesn’t contain a resource that the component needs. A fallback can have a fallback that has a fallback and so on. This creates long chains where you only need to customize a single image to affect the entire chain.

When clicking a certain element, you might get multiple resources that seem to overlap. This is because of the fallbacks. For example, activate “All resources” in the resource tree and navigate to Controls > Light > Button and click the “Disabled (focused)” button on the Lollipop version of the preview, you will see a popup that contains:

Controls / Light / Button / Normal

Controls / Light / Button / Disabled

Controls / Light / Button / Disabled (focused)

This is because the fallback chain for that button is:

Disabled (focused) -> Disabled -> Normal

If you only customize “Normal”, then both “Disabled” and “Disabled (focused)” will fall back to use that image. If you customize “Disabled” then it won’t affect “Normal”, but it will change “Disabled (focused)”.

These fallbacks allow you to create one graphic for a general state (in this case “Normal”) and then also images for specific states such as “Disabled” at the same time.

The popup always displays the entire chain, even though only one of the images is ever only displayed there at a certain time.

Some image types use multiple different images and colors at once. An example of this is RippleDrawable (a new drawable type in Lollipop). It has one or more images that control the base look for the image. This image type also has a “ripple mask” that controls where the ripple effect should be drawn. For buttons, that mask is the “Normal (pressed)” button. That is why the “Disabled (focused)” popup also contains “Normal (pressed)”.

An explanation of the items in the “Disabled (focused)” popup.

An explanation of the items in the “Disabled (focused)” popup.

In general, you should always begin by customizing the generic state (which in this case is “Normal”). Then, you can customize the more specialized states as well.

You can find out which state is generic by clicking the resource tree. For example, clicking the “Normal” item in the tree will highlight all buttons, while clicking “Disabled (focused)” will only highlight one. This shows you that “Normal” has impact everywhere and “Disabled (focused)” is a very specialized resource.