title: Android background + text + icon for a button
body: <p>I would like to have an image set to background a text on it and an icon on the left side of the text.
  Very easy in iPhone, but can't figure out how to do it at Android, to be resizable that button and keep  the icon + text position and distance properly.</p>
  
  <p>iPhone:</p>
  
  <p><img src="https://i.stack.imgur.com/DSU2V.png" alt="iPhone"></p>
  
  <p>Android I have this:</p>
  
  <p><img src="https://i.stack.imgur.com/DSEck.png" alt="Android"></p>
  
  <p>The xml code is:</p>
  
  <pre><code>&lt;Button
      android:id="@+id/btSettings"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_above="@id/tvWhatever"
      android:layout_centerHorizontal="true"
      android:layout_marginBottom="20dp"
      android:background="@drawable/bt_general"
      android:drawableTop="@drawable/settings_selected"
      android:text="@string/settings"
      android:textColor="#000000" /&gt;
  </code></pre>
  
  <p>Took the code from <a href="https://stackoverflow.com/questions/1532876/android-combining-text-image-on-a-button-or-imagebutton">here</a>.</p>
  
  <p>If I use <code>android:drawableLeft</code> , than the icon will go to most left part. </p>
  
  <p><img src="https://i.stack.imgur.com/5ITko.png" alt="enter image description here"></p>
  
  <p>If I start playing with semi hardcoded paddings, than I will have different look at diff devives: ( phone and table)</p>
  
  <p>If I add the <code>android:gravity="left|center_vertical"</code> than it will look like this:</p>
  
  <p><img src="https://i.stack.imgur.com/OXR3J.png" alt="enter image description here"></p>
  
  <p>The text is variable: it will change, when the user change the language.</p>
  
  <p>How to do it properly?</p>
  
  <p>I don't want to downvote anybody's answer, but please read the question and don't suggest what I have tryed already. Also told the hardcoded fixes doesn't work well.</p>
  
  <p>This is not a homework, but a commercial software part.</p>
  
  <p>Here is a suggested code from answers:</p>
  
  <pre><code>&lt;RelativeLayout
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:background="@drawable/bt_general"
          android:padding="20dip" &gt;
  
          &lt;ImageView
              android:id="@+id/xIcon"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_alignParentLeft="true"
              android:layout_centerVertical="true"
              android:layout_marginLeft="10dip"
              android:src="@drawable/settings_selected" /&gt;
  
          &lt;TextView
              android:id="@+id/xSettingsTxt"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_centerInParent="true"
              android:text="@string/settings"
              android:textColor="#000000" /&gt;
      &lt;/RelativeLayout&gt;
  </code></pre>
  
  <p>What do you think how it will look like the <code>android:layout_marginLeft="10dip"</code> on Galaxy s4? Here is a preview:</p>
  
  <p><img src="https://i.stack.imgur.com/kLuMj.png" alt="enter image description here"></p>
  
  <p>This is not, what I have asked. "dip" or "dp" or "px" shouldn't be used anywhere as distance from left, top, because phones has HPDI, smaller screen and Tablets has MDPI and wide resolutions. Simple doesn't work on mdpi, and xxhdpi.</p>
  
  <p><a href="https://stackoverflow.com/a/19134747/529543">Nizam answer</a> is very close to a good solution:</p>
  
  <p><img src="https://i.stack.imgur.com/dXUFF.png" alt="enter image description here"></p>