Android - Text overlays icon on toggle button

Question

I have a toggle button with an icon and text as shown above (pointed at with the green arrow). Most devices I have tested worked just fine.

Just with so far two Samsung tablets (Samsung Galaxy Tab 7.0 and a 10 inch Galaxy Tab) there is this problem where the text overlays the icon (pointed at with the red arrow) as shown below.

I have tried all aligments, paddings and such with no working result.

The web and SO surprisingly did not come up with a solution nor the problem.

This is the XML I am using right now for the toggle button. It is wrapped amongst other defintions into a RelativeLayout:

<ToggleButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/label_subscriptions"
    android:id="@+id/subscription_button"
    android:textOff="@string/btn_subscribe"
    android:textOn="@string/btn_subscribed"
    android:button="@drawable/star_selector"
    android:background="@android:color/transparent"
    android:textColor="@color/textColor"
    android:layout_toLeftOf="@+id/navigation_next_item"
    android:layout_alignBottom="@+id/channel_headline_image"
    />

The @drawable/star_selector has the following definition:

<selector  xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="false" android:drawable="@drawable/ic_like" />
    <item android:state_checked="true" android:drawable="@drawable/ic_liked_fav" />
 </selector>

Thank you for any hints pointing me in the right direction!

Answer 1

Actually its not working on lower APIs

Change

 android:button="@drawable/star_selector"

to

android:drawableLeft="@drawable/star_selector"

Hope it will help.

Answer 2

To allow crossVersion properly you should use drawableStart instead of drawableLeft. This issue appears only with Android 4.1 If you use drawableLeft you will not be able to add a padding between text and drawable, but with drawableStart you can use the "drawablePadding" property

Regards!!!