Lesson 163. Graphics. Drawable. Bitmap, Layer List, State List.

Lesson 163. Graphics. Drawable. Bitmap, Layer List, State List.

In this lesson:

– learn drawable tags: , ,

We continue to parse Drawable types that can be described using XML markup. We will not create any projects in this lesson. I’m just going to create XML files in a drawable folder in my project and set them as a background for View. And in the text of the lesson I will give the code and screens. Sometimes I will hang an extra gray background to see the actual size of the View.

To programmatically get to Drawable, which you hung for View as a background, you just need to call the getBackground method.


tag lets you get a Drawable wrapper for Bitmap. The tag has several attributes.

In the attribute src specify the image file we need.

Attribute gravity specifies how the bitmap will be placed inside Drawable. You can use several values ​​separated by | . Values ​​are standard here, and we often use some of these when working with layout. Consider an example.

The gravity attribute shifts the screen image from left to top

Here are the values ​​of the attribute gravity:

center – center

fill_horizontal – to stretch horizontally

fill stretch (used by default)

As far as I understand, clip_vertical and clip_horizontal values ​​are identical to fill_vertical and fill_horizontal values ​​when Bitmap is larger than the space provided. That is, clip_vertical squeezes it vertically so that it climbs. And clip_horizontal – horizontally.

Attribute tileMode is a tile mode. Allows you to replace all available space with your images. By default it is disabled.

For example, I will create such a bitmap.

Four different colors, inner borders solid, outer borders dotted.

Example code:

If tileMode = repeat, Then Bitmap will multiply and take up all available space

Next, change the value of the tileMode attribute.

mirror – Bitmap will also be propagated, but it will alternate with its display

clamp – stretches the edges of the picture into all available space

Other tag attributes :

antialias – smoothing lines

dither – color conversion if the current palette is not enough to display

filter – compression or stretching filter (see Lesson 158 for an example of the result of use)

mipMap – use of mip-texturing. You can read about it on Wikipedia. Use this mode if you plan to reduce bitmap more than twice during the display process.

We have reviewed the XML description, but you can always create this object programmatically. Java implementation is a BitmapDrawable class.

Layer List

We can describe Drawable, which will consist of several Drawable layers. This is done using a tag , And inside it tags .



We have 4 layers. Three bitmap with standard icon and one figure. attributes left, top, right, bottom allow indentation to be specified. And in the attribute id you can specify the id of this Drawable layer.

Note that item ordering is important. Each subsequent layer is drawn on top of the previous one. For example, the resulting image shows that the rectangle passes “above” the top icon, but “below” the bottom.

Java implementation is a LayerDrawable class.

We can access individual Drawable code inside LayerDrawable. To do this, we first get LayerDrawable.

LayerDrawable layerDrawable = (LayerDrawable) view.getBackground();

And then call the findDrawableByLayerId (int id) method, and specify the id you specified in the id tag of the item tag. At the output we get Drawable.

There are also some more interesting methods in LayerDrawable

getDrawable (int index) – Returns Drawable by index, not by id

getId (int index) – returns the id by the index

getNumberOfLayers () – Returns the number of Drawable layers

setDrawableByLayerId (int id, Drawable drawable) – replaces Drawable by layer id (protest)

State List

tag allows you to display Drawable depending on the View state. The possible state of View can be viewed in help. Consider an example with two of them: checked and pressed. The screen will have ToogleButton. This button goes into the checked state and back when pressed. And when pressed while the finger touches the screen, the button is pressed.

The State List will allow us to use three different Drawable buttons to display a button in three states: Normal, Checked, Pressed. To do this, we will create three files in the drawable folder.



The rectangle is dark gray. This Drawable will be displayed in the normal state of the button.



The rectangle is dark blue. This Drawable will be displayed in the button state.



The rectangle is light blue. This Drawable will be displayed when the button is checked.

And another file, button_selector.xml:


This latest Drawable is a selector. In it, we use item tags, in which we specify for which state which Drawable to use

In the first item we specified state_pressed = true, which means that this item will be selected by the system when the button is pressed. And on the screen we will see Drawable from this item, ie toogle_button_pressed.

In the second item we specified state_checked = true, so this item will be selected by the system when the button is able to be checked. And we’ll see the screen toogle_button_checked.

In the third item we did not specify any status, this item will be selected in the normal state of the button. And we’ll see toogle_button on the screen.

Keep in mind that the order of the item inside the selector is important here. That is, the system follows them in order and selects the first suitable one. If you put the third item, which without the explicit indication of the status, put the first, then the system will always stop on it.

States can be combined, meaning you can specify several different states in one item.

We put this Drawable as a background for ToogleButton:

As a result, we first see the normal state

Press and hold, ie the state pressed

Let go – checked checked

Press-release again – checked will turn off and will return to normal state. Each state displays its own Drawable.

Java implementation – StateListDrawable class.

View, by the way, has methods that allow you to programmatically manage the state. These are, for example: setPressed and setSelected.

Discuss in the forum [7 replies]

Leave a Comment