CODEWITHSUNDEEP
javaandroideclipse
Arun Chettoor
Arun Chettoor

Reputation: 1141

Custom Button with picture and text?

I want to add a picture as well as text within a button as shown below. My custom button

If I am giving this as a background then it will deteriorate according to the screen size of different phones. So I want to custom draw custom layout where the image of info button will remain in same pixel and the info letters to be drawn as separate. So that I will get the exact outlook without any image distortion.

Upvotes: 0

Views: 227

Answers (4)

K_Anas
K_Anas

Reputation: 31466

You can use these three drawable for your backround name a file backround.xml in your res/drawable folder this file will handle your butoon backround on different state pressed,focused and normal:

these are three 9-patch drawable that you can use:

enter image description here

enter image description here

enter image description here

backround.xml is:

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

    <item 
        android:state_pressed="true" 
        android:state_enabled="true"
        android:drawable="@drawable/btn_orange" />
    <item 
        android:state_focused="true" 
        android:state_enabled="true"
        android:drawable="@drawable/btn_orange" />

    <item 
        android:state_enabled="true"
        android:drawable="@drawable/btn_black" />
    <item 
        android:state_enabled="false"
        android:drawable="@drawable/btn_red" />
</selector>

Your xml button will be like this:

  <Button
      android:id="@+id/my_btn"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:drawableLeft="@drawable/myIcon"
      android:drawablePadding="5dp"
      android:paddingLeft="10dp"
      android:text="info"
      android:background="@drawable/background" />

Upvotes: 1

achie
achie

Reputation: 4736

Use 9 patch for background, Use normal button, use drawable left for image on the left. That is the best way to go for your case.

Check this for 9-patch. That will let you create the background with rounded corners like you need without skewing them.

So finally you will have a normal button with the background that you got from 9-patch and the drawableLeft that you set the icon.

Check this out for defining button states in case you want a better user experience. You will still need to do all these and then define states for the button background and use it as the background.

Upvotes: 1

monokh
monokh

Reputation: 1990

You can specify the background image, the '!' icon and the text separately like so:

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/background"
android:drawableLeft="@drawable/icon"
android:text="info" />

Upvotes: 2

Vineet Shukla
Vineet Shukla

Reputation: 24021

you need to arrange 3 things in your Button widget: background image, info icon and text. For these use these:

android:background="backgroundImage"
android:drawableLeft="info icon"
android:text="text"

Upvotes: 0

Related Questions