CODEWITHSUNDEEP
javaandroidxml
Josue
Josue

Reputation: 5

Button background with image, text and colour in android

I want to create a button with background color, icon and text in android. But I don't know how to add image. My XML is:

<?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="match_parent"
    android:layout_margin="12dp"
    android:orientation="vertical" >

    <TableLayout
        android:id="@+id/tableLayout1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp" >

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/button"
            android:text="BOTON"
         />

    </TableLayout>
</LinearLayout>

And my background:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
 <item >
     <shape android:shape="rectangle"  >
         <corners android:radius="6dip" />
         <stroke android:width="1dip" android:color="#5e7974" />
         <gradient android:angle="-90" android:startColor="#345953" android:endColor="#689a92"  />  

     </shape>
 </item> 

</selector>

I want to make some like this:

enter image description here

how add background image plus text in my background button? I tried put icon with property android:drawableleft but the size was to little for the size of button...

Upvotes: 0

Views: 1272

Answers (1)

Alex K
Alex K

Reputation: 8338

This isn't actually that hard. I just had to do this for my own project.

Android Buttons have a drawableLOCATION property in the XML.

To put an image at the top, as you want it, you'd use

android:drawableTop="@drawable/your_drawable_icon"

All four possible options are:

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

To adjust the spacing/padding of the image icon, you can use

android:drawablePadding="12dp"

You can read more about this here.

If that isn't accurate enough for you, you can use a RelativeLayout and put stuff in it to look right.

I had to do that for my current project. So instead of the button, I had this for my XML:

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:id="@+id/applianceInfoLayout"
    android:clickable="true"
    android:background="@drawable/button_background" >

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:clickable="false"
        android:layout_centerVertical="true"
        android:layout_marginLeft="@dimen/service_menu_icon_padding"
        android:layout_marginRight="@dimen/service_menu_icon_padding"
        android:id="@+id/infoTextView"
        android:src="@drawable/ic_applianceinfo"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:clickable="false"
        android:layout_centerVertical="true"
        android:text="Info"
        android:textColor="#E6E7E8"
        android:fontFamily="sans-serif-light"
        android:textAllCaps="false"
        android:textSize="22sp"
        android:layout_toRightOf="@id/infoTextView"/>

</RelativeLayout>

Which gave me this:

Upvotes: 2

Related Questions