Question

I want to create two new custom buttons to use in my android application.

I want them to be like this:

• Icon on the left
• Text on the right for a button
• Another button with Icon on top and text on bottom

So basically I will have a png image stored in my resources that will be the button’s icon. I will have another image as a 9patch stretchable as the button background. I tried something but the result is hideous, so I must be doing something wrong.

This code:

   <Button 
             android:layout_width="100px"
       android:layout_height="100px"
             android:drawableTop="@drawable/imgIcon"
             android:drawablePadding="2px"
             android:text="Text"
             android:background="@drawable/button_background"
             />

Later Edit:
If I make like suggested by Macarse bellow:

<Button android:id="@+id/yourid"
       android:layout_height="wrap_content" 
       android:layout_width="wrap_content" 
       android:text="Your text here" 
       android:drawableTop="@drawable/imgdonetracks">
</Button>

I get like in first image

If I make this change:

<Button android:id="@+id/yourid"
        android:layout_height="wrap_content" 
        android:layout_width="wrap_content" 
        android:text="Your text here" 
        android:drawableTop="@drawable/imgdonetracks"
        android:background="@drawable/button_background">
   </Button>

everything get’s wrong

Check image http://img255.imageshack.us/i/android3.png/

Answer 1

It looks so ugly because the button layout background has empty space but that has not been taken care of in the 9 patch image. Now I fixed with 9p editor as http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch and works fine