Create custom buttons with icon and text
<p>I want to create two new custom buttons to use in my android application.</p>

<p>I want them to be like this:</p>

<ul>
<li>Icon on the left</li>
<li>Text on the right for a button</li>
<li>Another button with Icon on top and text on bottom</li>
</ul>

<p>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.</p>

<p>This code:</p>

<pre><code>   &lt;Button 
             android:layout_width="100px"
       android:layout_height="100px"
             android:drawableTop="@drawable/imgIcon"
             android:drawablePadding="2px"
             android:text="Text"
             android:background="@drawable/button_background"
             /&gt;
</code></pre>

<p>Later Edit:
If I make like suggested by Macarse bellow:</p>

<pre><code>&lt;Button android:id="@+id/yourid"
       android:layout_height="wrap_content" 
       android:layout_width="wrap_content" 
       android:text="Your text here" 
       android:drawableTop="@drawable/imgdonetracks"&gt;
&lt;/Button&gt;
</code></pre>

<p>I get like in first image</p>

<p>If I make this change:</p>

<pre><code>&lt;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"&gt;
   &lt;/Button&gt;
</code></pre>

<p>everything get's wrong</p>

<p>Check image <a href="http://img255.imageshack.us/i/android3.png/" rel="nofollow">http://img255.imageshack.us/i/android3.png/</a></p>
