Android Image Buttons

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

You have used a normal button in a previous project. You simply dragged a button widget on a layout and then added some text. However, you can have images on your buttons. In the image below, we have a red X image on the left with the text WARNING! to the right of it:

Android button with an image to the left of text

You can also have an Image Button without any text. In the screenshot below, we have placed a green tick image on the standard grey button background. This replaces the text that normally appears on a button.

Android ImageButton

Another option is to have a different image on the button, depending on whether the button is pressed/clicked, focused, or just in a normal state. In this section, you'll learn how to do all three of these Android button styles. First up, let's see how to have an image and text on the same button.

Start a new project for this. Give it the Application name of Button Widgets. When your project loads in Android Studio, click on the activity_main.xml tab. Make sure you are on the Design tab and not the Text tab. Click on the Hello World TextView to select it. Now hit the delete key on your keyboard to get rid of it. (You can also select a control in the Component Tree and hit the delete key there.)

You'll now need some images to go on your buttons. Right click the red X image below and save it to your own computer. (Don't forget where you saved it to.)

red x image

In Android Studio, select the res > drawable folder from the left. Now open up the folder where you saved your image to. Copy this image. Go back to Android Studio and your drawable folder. Paste your image into this folder. (You can use the standard CTRL + C and CTRL + V to copy and paste in Windows and Linux, or Command + C and Command + V on a Mac.)

When you paste the image into the drawable folder, you may see this message box:

Android Studio Copy dialogue box

Click OK on this dialogue box. Your res > drawable folder will then look like this:

Go over to the Palette and drag a Button Widget on to your design surface. Change the Text property of your button to Warning! (We won't worry about adding a string resource for this tutorial.) It should look like this:

Button on a layout in Android Studio

Notice that we've added constraints to the top and bottom of the button to the top and bottom of the screen (If you're not sure how to do this, see the section on Adding Layout Widgets.)

To get an image to the left of button text, the property you need is called drawableLeft.

Scroll down to the bottom of the properties area and click the link that says View all properties:

The View all properties link in Android Studio

Locate the drawableLeft property from the new list:

The drawableLeft property

Click the grey Pick a Resource button:

The Pick a resource button highlighted

You will then see the following dialogue box appear:

The Resources dialogue box in Android Studio highlighting a Drawable resource

Select your image from the left and click OK.

To get back to the first properties page, click the link at the bottom that says View fewer properties:

The View fewer properties link

Now have a look at your button:

An Android button with an Image and text

You should find that it has an image to the left of your text.

 

In the next lesson, we'll have a look at the ImageButton Widget.