43

How can I add an image to a button, rather than text?

Leigh
  • 28,765
  • 10
  • 55
  • 103
Adham
  • 63,550
  • 98
  • 229
  • 344

10 Answers10

101

Rather humorously, considering your tags, just use the ImageButton widget.

Eric Leschinski
  • 146,994
  • 96
  • 417
  • 335
Kevin Coppock
  • 133,643
  • 45
  • 263
  • 274
27

Simply use ImageButton View and set image for it:`

 <ImageButton
    android:id="@+id/searchImageButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_alignParentRight="true"
    android:src="@android:drawable/ic_menu_search" />
Bhagwat K
  • 2,982
  • 2
  • 23
  • 33
16

As he stated, used the ImageButton widget. Copy your image file within the Res/drawable/ directory of your project. While in XML simply go into the graphic representation (for simplicity) of your XML file and click on your ImageButton widget that you added, go to its properties sheet and click on the [...] in the src: field. Simply navigate to your image file. Also, make sure you're using a proper format; I tend to stick with .png files for my own reasons, but they work.

While-E
  • 1,527
  • 2
  • 20
  • 37
  • Actually helpful response, thanks! I had no idea where to put images or how to specify their location. – hubatish Feb 16 '16 at 18:56
8

You should try something like this

    <Button
    android:id="@+id/imageButton1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/qrcode"/>

the android:background="@drawable/qrcode" will do it

cfontanet
  • 174
  • 2
  • 7
  • 1
    [ImageButton](https://developer.android.com/reference/android/widget/ImageButton.html) always picks the correct size when `wrap_content` ist used. `Button` can warp the image, especially when they are small. – Chilloutman Jul 29 '16 at 16:19
7

The new MaterialButton from the Material Components can include an icon:

<com.google.android.material.button.MaterialButton
    android:id="@+id/material_icon_button"
    style="@style/Widget.MaterialComponents.Button.TextButton.Icon"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/icon_button_label_enabled"
    app:icon="@drawable/icon_24px"/>

You can also customize some icon properties like iconSize and iconGravity.

Reference here.

Seven
  • 3,232
  • 1
  • 17
  • 15
6
   <Button
        android:id="@+id/button1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="News Feed"
        android:icon="@drawable/newsfeed" />

newsfeed is image in the drawable folder

Amr Angry
  • 3,711
  • 1
  • 45
  • 37
  • 12
    This does not work. To make a button appear with text and an icon, use the Button class with the android:drawableLeft attribute: ` – Jevgenij Evll Feb 24 '13 at 17:25
  • sorry for my late replay but it works with me you don't assign text for the button so it does't appear and the question is to display button with image rather that text :) – Amr Angry Oct 14 '14 at 09:50
3

Put your Image in drawable folder. Here my image file name is left.png

<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_x="118dp"
    android:layout_y="95dp"
    android:background="@drawable/left"
    android:onClick="toast"
    android:text=" " />
Sanu Uthaiah Bollera
  • 939
  • 10
  • 13
3

Use android:drawableright or android:drawabletop,... attributes for buttons in xml file.

For example: in xml file add this attribute for a button:

Android:drawableleft="@drawable/ic_person"

or

Android:drawableright="@mipmap/ic_launcher"

Armin Falahati
  • 31
  • 1
2

You can create an ImageButton in your android activity_main.xml and which image you want to place in your button just paste that image in your drawable folder below is the sample code for your reference.

<ImageButton
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"

    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_marginBottom="49dp"
    android:layout_weight="1"
    android:onClick="prev"
    android:src="@drawable/prev"
    />
Ehtesham Shami
  • 125
  • 2
  • 7
0

you can use ImageView as Button. Create an ImageView and set clickable true after in write imageView.setOnClickListener for ImageView.

  <ImageView
android:clickable="true"
android:focusable="true"`
android:id="@+id/imageview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>

and in Activity's oncreate:

imageView.setOnClickListener(...
Furkan Meydan
  • 13
  • 4