Java – Android background text Icon for a button

I want to have an image set as the text on the background and the icon on the left of the text

iPhone:

Android I have this:

The XML code is:

<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" />

Get the code from here

If I use Android: drawableleft, the icon will go to the leftmost part

If I start playing semi hard coded padding, I will have a different view than me

If I add Android: gravity = "left | center_vertical" than it will look like this:

Text is mutable: when the user changes the language, it will change

How to do it right?

I don't want to underestimate anyone's answer, but please read this question and don't suggest that I've tried It also tells hard - coded patches not to work properly

This is not a lesson, but a part of commercial software

Here is a suggested code from the answer:

<RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bt_general"
        android:padding="20dip" >

        <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" />

        <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" />
    </RelativeLayout>

How do you think it looks like Android: layout on galaxy S4_ marginLeft =“10dip”？ This is a preview:

That's not what I asked "Dip" or "DP" or "PX" should not be used as the distance from the upper left corner because mobile phones have HPDI, small screens and tablets have MDPI and wide resolution Simple does not apply to MDPI and xxhdpi

Nizam answer is very close to a good solution:

Solution

Maybe you should use relativelayout and rounded corners instead of textview and ImageView