title: Create custom buttons with icon and text
body: <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="noreferrer">http://img255.imageshack.us/i/android3.png/</a></p>