Recipe 2.2 Using Image Buttons

Android Versions
Level 1 and above
Source Code to Download from

The previous recipe showed the Button and ToggleButton in action and the various ways to handle their events. This recipe describes how to display images on buttons. As the saying goes, a picture is worth a thousand words. Hence, sometimes it would be more intuitive and descriptive to display a picture on top of a button rather than words.


Consider the following code snippet in the activity_main.xml file:

<LinearLayout xmlns:android="" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <ImageButton android:id="@+id/imageButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_launcher" android:onClick="onToggle" /> <Button android:id="@+id/imageTextButton1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:drawableTop="@drawable/ic_launcher" android:text="Android"/> <Button android:id="@+id/imageTextButton2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:drawableLeft="@drawable/ic_launcher" android:text="Android"/> <Button android:id="@+id/imageTextButton3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:drawableRight="@drawable/ic_launcher" android:text="Android"/> <Button ...

Get Android Application Development Cookbook: 93 Recipes for Building Winning Apps now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.