What's brewing in the mobile world?

Seattle, WA / 45°

Create a Button with an Image and Text [Android]

The Android SDK docs aren’t very helpful. Period. More specifically, they aren’t clear on how to create a button with both an image and text. Allow me to help.

Place the following in your layout XML file, replacing [image] with your image:

<Button
     android:id="@+id/groups_button_bg"
     android:layout_height="wrap_content"
     android:layout_width="wrap_content"
     android:text="Groups"
     android:drawableTop="@drawable/[image]" />

Using android:drawableTop="@drawable/...", we’re able to place an image above the button text. The following options are available for placing the image in different positions relative to the button text:

android:drawableLeft
android:drawableRight
android:drawableBottom
android:drawableTop

In addition, android:drawablePadding can be used to specify the amount of padding between the image and button text.

Here’s the Android SDK documentation for specifics.

One Comment

Have something to say? Feel free, we want to hear from you! Leave a Comment

  1. Huy Phan says:

    Thank you. The image’s position (relative to the text) is just what I am looking for.

Comments are now closed for this article.