Anmol Wadhwa
Anmol Wadhwa

Reputation: 329

How to add an image to a button in android

I was wondering how I put an image to a button.

I have tried to use "android:icon="@drawable/search.png" and I add this image to the drawable-hdpi folder but the image doesn't show up. I am developing an application for the nexus 4 so I don't know what size the image should be. The image I am trying to add is a normal search icon used in the contact manager of the nexus 4.

The code I have written so far.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/lbl_group_coworkers"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Coworkers"
        android:layout_marginTop="5dp"
        android:layout_marginBottom="5dp" />

    <TextView 
        android:id="@+id/lbl_group_family"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Family"
        android:layout_marginTop="5dp"
        android:layout_marginBottom="5dp"/>
    <TextView
        android:id="@+id/lbl_group_friends"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Friends"
        android:layout_marginTop="5dp"
        android:layout_marginBottom="5dp" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="0dip"
        android:layout_weight="1"
        android:orientation="vertical" >


    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/Button1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.70"
            android:icon="@drawable/search.png" />

        <Button
            android:id="@+id/Button2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="addGroup"
            android:icon="@drawable/addgroup.png"/>

        <Button
            android:id="@+id/Button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="0.11"
            android:text="@string/Button3" />
    </LinearLayout>

</LinearLayout>

Upvotes: 9

Views: 55088

Answers (5)

just use this codes inside Button:

// Only applicable when API >21 and if you want to add shade to image

android:background="@drawable/your_drawable_or_png_file" app:backgroundTintMode="add"

// Else

android:background="@drawable/your_drawable_or_png_file"

it worked for me!

Upvotes: 0

Vikalp Patel
Vikalp Patel

Reputation: 10877

 <Button
        android:id="@+id/Button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:onClick="addGroup"
        android:text="TEXT"
        android:background="@drawable/addgroup"/>

To add background and image and text at the same time.

Just replace

android:background="@drawable/addgroup"

with

android:background="@android:color/transparent"
android:drawableTop="@drawable/addgroup"
android:text="TEXT"

You can also use attributes in your Button Layout with properties defining image source to placed inside the button

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

Upvotes: 36

Bebin T.N
Bebin T.N

Reputation: 2649

Please make drawable folder in res and create buttonanimation.xml in drawable folder

<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:drawable="@drawable/add_incident_resetfocus" android:state_focused="true" android:state_pressed="true"/>
<item android:drawable="@drawable/add_incident_resetfocus" android:state_focused="false" android:state_pressed="true"/>
<item android:drawable="@drawable/add_incident_resetfocus" android:state_focused="true"/>
<item android:drawable="@drawable/add_incident_reset" android:state_focused="false" android:state_pressed="false"/>
</selector>

And use this buttonanimation in layout button background.

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

Upvotes: 0

manutudescends
manutudescends

Reputation: 121

You can set the background of the Button using :

android:background="@drawable/..."

Upvotes: 0

user1831682
user1831682

Reputation:

use the attribute

android:background="@drawable/...."

Upvotes: 0

Related Questions