The Android ImageButton Widget

Android Widgets: 1 2 3 4 5 6 7 8 9

You can have a button that has just an image on, and no text at all. For this, there is a widget called ImageButton. With the ImageButton, you can change the image when the button is pressed. When it's not pressed it will revert to its normal state. Let's see how all of this is done.

First, download these three simple image:

blue image to download

Green image to download

Red image to download

Save them to your computer and then copy and paste them into your drawable folder, just like you did for the warning button. Your drawable folder will then look like this:

The res > drawable folder in Android Studio  showing project images

In the Palette, click on the Images category and locate the ImageButton:

The ImageButton highlighted in the Palette

Drag one of these onto your layout. When you let go of the left mouse button, you should see the Resources dialogue box appear:

The Resources dialogue box in Android Studio

Select one of the images you copied to the drawable folder. We've selected radioactive_red. Click OK and you'll see the image appear on the button:

An ImageButton with a resource added to it

You could leave it like this, if you only want an image button. To get a different image depending on the button pressed state, though, you need to create an XML file. You then set a SRC property for the ImageButton. Let's create the XML file.

Right-click on your drawable folder in the explorer on the left. From the menu that appears select New then Drawable resource file:

Android Studio menus showing  how to add an XML file to the project

When you click on Drawable resource file you should see this dialogue box appear:

The New Resource File dialogue box

In the File name area at the top, type button_states. Then click OK. You should see a new XML file appear in your main coding area:

An XML file showing a blank SELECTOR

The idea is that you add new items between the two selector tags. Each item will have a different state. Don't worry, though, the AutoComplete feature of Android Studio makes adding the items quite painless.

Click your mouse before the </selector> tag. Type a left angle bracket and then the word item. Then tap the spacebar on your keyboard. You should see a list appear. From the list, select android:state_pressed:

The AutoComplete menu in Android Studio

When you select state_pressed, you should see another list appear:

AutoComplete showing values for state_pressed

Select true from this list.

Type another space after the final quotation mark and select android:drawable from the list:

Selecting a drawable for the state_pressed tag

You should see the images you copied to your drawable folder appear on this list. Select an image to use as the pressed state. We've gone with radioactive_blue.

To complete the item tag, after the final quotation mark, type a space then a forward slash. After the forward slash, type a right pointy bracket. So this on the end:

" />

Your item tag will then look like this:

An XML item tag added with Android Studio

If you get it right, you should see a thumbnail of your image appear in the margins on the left.

Now add a new item. This one should have the attributes android:state_focused="true" and android:drawable="@drawable/radioactive_green". Your XML will then look like this:

Two item tags added in XML

Again, if you get the XML right, you should see a thumbnail of your image in the left margins.

The final item is for the normal state. Here's the XML for you to add:

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

This time, you don't need a state attribute, just the drawable one. Here's what your code should look like:

Three button state items added in XML

When your XML file looks like ours, you can close it down because you're done with it.

You now need to set a SRC property for the button.

Click back on your activity_main.xml file. Make sure you are on the Design tab and not the Text tab. Click on your ImageButton to select it, if it's not already selected. Have a look at the properties area on the right, and scroll down to the bottom.

Click the link that says View all properties. Scroll down to the bottom of this new list and locate the src property:

The SRC property for an Android button

Click to the right of the src property, and locate the grey Pick a resource button:

The Pick a Resource button

You will then see the Resources dialogue box appear:

The Resource dialogue box showing a drawable selected

From the left, under the Drawable item, select button_states. You should then see the right of the dialogue box turn into the one as in the image above. Notice that it has areas for Pressed, Focused and Default. Each area has a thumbnail showing the image you used for each state. This is pulled from the XML file you created.

Click OK on the dialogue box. You can now test it out. If your run your app in an Emulator, you probably won't see the focused state. But you will see the other two. The normal state will look like this:

An ImageButton with a resource added to it

Press/click the button and the image will turn blue:

Just a word on the images. We used 64 pixels by 64 pixel images. The format was PNG, but you can use GIF, if you need a transparent background. If you don't need a transparent background, then you can use JPEG images.

 

In the next lesson, we'll tackle Radio Buttons.