RadioGroup button images cut off

Question

I have a RadioGroup at the bottom with four buttons acting as a navigation for my application (I know this is non-standard for an Android app, but it's what the client wanted). This is the way it should look:

This looks fine on my Nexus 7, and it looks fine across the Emulators and Previews in my IDE. However, when I load it onto a Galaxy S Note 2, this is how it looks:

The images are cutoff, as it seems they are "shifted" to the right for this particular device. I have a feeling that on smaller devices, it will be even more skewed and cutoff. When I manually do a negative left margin of around 35dp, it actually looks perfect and they align great (but of course that solution doesn't work for other devices).

What's strange is that it doesn't seem that I'm doing anything special in my code, and it's seemingly pretty straight-forward. FYI, even when I change it to just three buttons, it still shifts the buttons to the right, not really centering them (although they aren't cutoff when there are only 3). I just can't figure out why it's doing this, no matter how many things I try out with tweaking gravity, weight, and even swapping out images. I'm currently only using /xhdpi images for these, and the sizes of each are around 130x130 each.

For reference, here is the underlying code for the RadioGroup in my layout file (it's in a RelativeLayout):

    <RadioGroup
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:id="@+id/tab_radio_group"
            android:layout_alignParentBottom="true"
            android:orientation="horizontal"
            android:background="@drawable/navigation_base"
            android:paddingTop="15dp">
        <RadioButton
                android:id="@+id/button_scan"
                style="@style/navbar_button"
                android:drawableTop="@drawable/scan"/>
        <RadioButton
                android:id="@+id/button_view_order"
                style="@style/navbar_button"
                android:drawableTop="@drawable/view_order"/>
        <RadioButton
                android:id="@+id/button_complete_order"
                style="@style/navbar_button"
                android:drawableTop="@drawable/complete_order"/>
        <RadioButton
                android:id="@+id/button_settings"
                style="@style/navbar_button"
                android:drawableTop="@drawable/settings"/>
    </RadioGroup>

And here is the style element for navbar_button:

    <style name="navbar_button">
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:button">@null</item>
        <item name="android:gravity">center_horizontal</item>
        <item name="android:layout_weight">1</item>
        <item name="android:textSize">12dp</item>
    </style>

I may be missing something obvious here, but any thoughts on this? Thanks in advance!

Answer 1

To fix this, I ended up having to abandon the RadioGroup and RadioButtons, and I went with a simple Linear Layout with Buttons. It still made for relatively simple code, and it just involved changing up the Java code a bit to work with normal Buttons rather than RadioButtons. Here is the changed layout, if interested:

<LinearLayout android:layout_width="fill_parent"
              android:layout_height="wrap_content"
              android:id="@+id/tab_radio_group"
              android:layout_alignParentBottom="true"
              android:orientation="horizontal"
              android:background="@drawable/navigation_base"
              android:paddingTop="15dp">

    <Button
            android:id="@+id/button_scan"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@android:color/transparent"
            android:drawableTop="@drawable/scan"/>
    <Button
            android:id="@+id/button_view_order"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@android:color/transparent"
            android:drawableTop="@drawable/view_order"/>
    <Button
            android:id="@+id/button_complete_order"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@android:color/transparent"
            android:drawableTop="@drawable/complete_order"/>
    <Button
            android:id="@+id/button_settings"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@android:color/transparent"
            android:drawableTop="@drawable/settings"/>
</LinearLayout>

Answer 2

Not sure if it's the only problem, but I've found that in function setButtonDrawable() there is a call to setMinHeight(mButtonDrawable.getIntrinsicHeight()); but there's no call to setMinWidth(), so I've extended RadioButton class and have overwritten the function like this:

@Override
public void setButtonDrawable(Drawable d) {
    super.setButtonDrawable(d);
    if (d != null) {
        setMinWidth(d.getIntrinsicWidth());
        refreshDrawableState();
    }
}