androidandroid-layoutandroid-resolution

RadioGroup button images cut off


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:

Radio Buttons - Correct

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:

Radio Buttons - Incorrect

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!


Solution

  • 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>