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 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. Continue reading