bircastri
bircastri

Reputation: 2159

How to display an Image in Button?

I have this code in my activity_login.xml.

    <Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="25dp"
        android:background="#6cb42e"
        android:gravity="center"
        android:onClick="login"
        android:text="@string/login"
        android:icon="@drawable/tasto_login"
        android:textColor="#FFFFFF"
        android:textSize="20sp" />

I want to show the image tasto_login.png in the right on the button. In this button I want a background color, text center and image at right of the button.

So with this code, I don't see any image.

I show it: enter image description here

but I want have this: enter image description here

Upvotes: 0

Views: 90

Answers (7)

Badhrinath Canessane
Badhrinath Canessane

Reputation: 3518

Just replace android:icon="@drawable/tasto_login" with android:drawableRight="@drawable/tasto_login" and set padding with android:drawablePadding

Upvotes: 0

Evripidis Drakos
Evripidis Drakos

Reputation: 870

You can use the android:drawableRight xml attribute to specify the image. Also you can use the android:drawablePadding and other padding/margin attributes to position the image on the button.

Upvotes: 0

Anu
Anu

Reputation: 1914

Use the property of button itself as

android:drawableRight="@drawable/tasto_login"

This will add the image to right of the text in your utton.

Upvotes: 0

Hareshkumar Chhelana
Hareshkumar Chhelana

Reputation: 24848

Create custom Button using Linearlayout and TextView :

<LinearLayout 
    android:id="@+id/customButton1"
    style="@android:style/Widget.Button"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:layout_marginTop="25dp"
    android:background="#6cb42e"
    android:gravity="center"
    android:onClick="login">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableRight="@drawable/tasto_login"
        android:text="@string/login"
        android:gravity="center"
        android:textColor="#FFFFFF"
        android:drawablePadding="5dp"
        android:textSize="20sp" />

</LinearLayout>

Upvotes: 0

Neha Agarwal
Neha Agarwal

Reputation: 622

You can use Linear Layout as button:

<LinearLayout
                android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="25dp"
        android:background="#6cb42e"
        android:gravity="center"
        android:onClick="login"
android:orientation="horizontal"
       >

<Textview


/>

<ImageView

/>

</LinearLayout

Upvotes: 0

Pararth
Pararth

Reputation: 8134

With the existing code, you can just use drawableRight like:

  <Button
    android:id="@+id/button1"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:layout_marginTop="25dp"
    android:background="#6cb42e"
    android:gravity="center"
    android:onClick="login"
    android:text="@string/login"
    android:drawableRight="@drawable/tasto_login"
    android:textColor="#FFFFFF"
    android:textSize="20sp" />  

Add paddingRight to modify where the icon is placed.

Upvotes: 4

SANJAY GUPTA
SANJAY GUPTA

Reputation: 1604

You have to take background image like this.and set this image as background.

Upvotes: 0

Related Questions