ImageButton Background with Shape Drawable

In this tutorial a background is set on an ImageButton to change its appearance. The article also shows how that appearance can be easily changed without the need to edit the button’s image. To follow this example the Eclipse Integrated Development Environment (IDE) is required. If your computer is not configured for developing Apps using Eclipse see Set Up Windows for Android Development. In Eclipse use the File menu and select New then Android Project. Fill in the Project Name, here Image Button is used. Click Next and select the build target from the installed APIs, e.g. Android 1.5, any of the installed APIs will work and it can be changed later if required. Click Next and enter the Package Name in the required format, e.g. biz.tekeye.imagebutton, leave Create Activity checked with the default Activity name, click Finish.

Green Tick Icon Android FormatA graphic is required for use with the ImageButton. Here a couple of buttons will be used one to show a red cross and another a green tick, with the images taken from the Open Clip Art Library, a good source of free graphics. You may have your own images to use.

Red Cross Icon in Android FormatTo see how images from the Open Clip Art Libray can be converted into PNGs see the article Android Launcher Icons Using Inkscape or Free Android Icons Using OpenClipArt.org and Paint.NET. The images are also on our Android Graphic Resources page with a Zip file available for importing directly into a project. See Move Android Code Between PCs Running Eclipse for instructions on importing from Zip (archive) files. Add the required images to the project’s res\drawable folder.

ImageButton Graphic selectionOpen the Activity layout file main.xml in the res\layout folder. Drag and drop a ImageView from the Images & Media folder on the Palette bar. A Resource Chooser dialog will open to select the redcross for the first ImageView. Drag and drop another ImageView onto the Activity and select the greentick as the graphic. With the graphics set for the two ImageButtons they are ready to be used by adding code to handle the onClick event (see Different Ways to Code Android Event Listeners).

Two ImageButtons Add to an ActivityIf a more button like appearance is required then the background attribute for the ImageButton can bet set. This is more flexible than having to modify the image used by the button itself. The background attribute supports images but it also supports shapes defined in XML. The XML files are also drawables so sit in the res\drawable folder. Unlike images it is not necessary to produce a version for all screen densities. To add a shape drawable background for the ImageButtons used here begin by creating a new shape XML file.

New Android XML FileWith the projects drawable folder highlighted select New from the context menu or from the main File menu. Select Android XML File, call it button_background.xml and select shape as the Root Element then press finish.

By setting appropriate gradient, padding and corners elements on a shape and assigning it to the background attribute for the buttons they are given a rounded button appearance. Edit the background_button.xml to have the following code (if copying and pasting this code see Copying Code from the Articles for tips).

[code lang=”XML”]<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient android:startColor="#B07FC9FF"
android:endColor="#B00094FF"
android:angle="270"/>
<padding android:left="7dp"
android:top="7dp"
android:right="7dp"
android:bottom="7dp" />
<corners android:radius="8dp" />
</shape>[/code]

Use the context menu on the buttons to set the Background property to background_button. You may not see the correct color until the App is executed. The code for the main.xml layout file should look something like this:

[code lang=”XML”]<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello" />
<ImageView android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/button_background"
android:src="@drawable/redcross" />
<ImageView android:id="@+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/button_background"
android:src="@drawable/greentick" />
</LinearLayout>[/code]

Image Button Background SetTry different shape elements to see the effect on the ImageButton appearance. See the Android documentation on the Shape Drawable. The following table shows some of the possible variations acheived, by setting the android:shape attribute on the shape element, changing the color and its transparency, removing the padding element etc.

Variations on Button Background
Result Change
 ImageButton Circle Background android:shape=”oval” on shape element
 ImageButton No Padding on Background No padding element
 ImageButton Reduced Transparency Background transparency reduced (from B0 to 50)
 ImageButton Change Color Background color changed (startColor=”#B0FFE97F”, endColor=”#B0FFD800″)
 ImageButton Solid Background <solid android:color=”#0094FF”/> instead of gradient, no transparency
ImageButton Bigger Radius Background larger corners radius of 18dp
ImageButton Using Stroke for Border on Background <stroke android:width=”5dp” android:color=”#7F0000″/>
ImageButton with a Dashed Border Background <stroke android:width=”4dp” android:color=”#7F0000″ android:dashGap=”4dp”  android:dashWidth=”10dp” />

Acknowledgements

Green Tick is from http://openclipart.org/detail/159733/green-tick-by-koppi
Red Cross is from http://openclipart.org/detail/166859/red-cross-by-rygle

Leave a Reply

Your email address will not be published. Required fields are marked *

Human Verification: In order to verify that you are a human and not a spam bot, please enter the answer into the following box below based on the instructions contained in the graphic.