Android: center background of radio button

Question

I need to use custom radio buttons with background image, and space them evenly horizontally, I can achieve the spacing but cannot position the background image in the center of each button. My layout is as below.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="58dp">


    <RadioGroup
        android:id="@+id/group_bottom_bar"
        android:layout_width="match_parent"
        android:layout_height="52dp"

        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/v4_btn_trip"
            style="@style/BottomTabBarButtonStyle"
            android:button="@drawable/v4_tabbar_radio_trip" />

        <RadioButton
            android:id="@+id/v4_btn_agenda"
            style="@style/BottomTabBarButtonStyle"
            android:button="@drawable/v4_tabbar_radio_agenda" />

        <RadioButton
                android:id="@+id/v4_btn_favorite"
                style="@style/BottomTabBarButtonStyle"
            android:button="@drawable/v4_tabbar_radio_favorite" />

        <RadioButton
                android:id="@+id/v4_btn_settings"
                style="@style/BottomTabBarButtonStyle"
            android:button="@drawable/v4_tabbar_radio_settings" />

    </RadioGroup>


</RelativeLayout>

The style is per below:

<style name="BottomTabBarButtonStyle">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:gravity">center_horizontal</item>
        <item name="android:layout_weight">1</item>

I already set the gravity to center_horizontal.

I tried to replace android:button with android:background but that just stretched the image.

One of the selector files (v4_tabbar_radio_trip)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_bottom_tab_trip_active" android:state_checked="true" android:state_pressed="true" />
    <item android:drawable="@drawable/ic_bottom_tab_trip_active" android:state_pressed="true" />
    <item android:drawable="@drawable/ic_bottom_tab_trip_active" android:state_checked="true" />
    <item android:drawable="@drawable/ic_bottom_tab_trip" />
</selector>

This is its current state. Update: The expected output is that the background image (the two dots) is in the middle of the greyed area (which is the radio button), not aligned to the left. Similarly for other icons

enter image description here

What is expected output and result output? Can you share image? — Pankaj Kumar, Mar 09 '15 at 06:48
have you tried setting the `android:gravity="center"` of each radio buttion? — SMR, Mar 09 '15 at 07:12

score 0 · Answer 1 · answered Mar 09 '15 at 07:00

0

try to write

    style="@style/BottomTabBarButtonStyle"

after the

    android:button="@drawable/v4_tabbar_radio_settings"

in layout xml file.

answered Mar 09 '15 at 07:00

Manoj ahirwar

1,062
1
10
24

Doesn't work. This is expected, as the view renderer doesn't care about order. – EyeQ Tech Mar 09 '15 at 07:03

score 0 · Accepted Answer · answered Mar 09 '15 at 09:00

You can try this layout xml.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="58dp" >

    <RadioGroup
        android:id="@+id/group_bottom_bar"
        android:layout_width="match_parent"
        android:layout_height="52dp"
        android:orientation="horizontal" >

        <View
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />

        <RadioButton
            android:id="@+id/v4_btn_trip"
            android:layout_gravity="center"
            android:button="@drawable/v4_tabbar_radio_trip" />

        <View
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />

        <RadioButton
            android:id="@+id/v4_btn_agenda"
            android:layout_gravity="center"
            android:button="@drawable/v4_tabbar_radio_agenda" />

        <View
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />

        <RadioButton
            android:id="@+id/v4_btn_favorite"
            android:layout_gravity="center"
            android:button="@drawable/v4_tabbar_radio_favorite" />

        <View
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />

        <RadioButton
            android:id="@+id/v4_btn_settings"
            android:layout_gravity="center"
            android:button="@drawable/v4_tabbar_radio_settings" />

        <View
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />
    </RadioGroup>

</LinearLayout>

I know this is not good way of handling the things but it can do a trick for you and it is feasible for all screens.

Try it. Hope this helps you.

@AR Nice trick, thanks. I suggest you edit your answer by putting layout_width=0dp since it use the weight already. That's what I did and everything shows up alright. — EyeQ Tech, Mar 10 '15 at 02:19

score 0 · Answer 3 · answered Mar 09 '15 at 09:06

Try out this!!

<LinearLayout
            android:id="@+id/ll_radio_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_centerHorizontal="true"
            android:gravity="center_horizontal"
            android:layout_marginBottom="5dp"
            android:weightSum="2" >

            <RadioGroup
                android:id="@+id/radioGrouprecharge"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal" >

                <RadioButton
                    android:id="@+id/radioPreapaid"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:background="@android:color/transparent"
                    android:button="@android:drawable/btn_radio" />

                <RadioButton
                    android:id="@+id/radIoPostpaid"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_weight="1"
                    android:gravity="center_horizontal" />
            </RadioGroup>
        </LinearLayout>

score 0 · Answer 4 · edited May 23 '17 at 12:22

0

You are centering your button, but the drawable is always left-aligned.

The solution appears to be create a new radio group. Here is an example.

edited May 23 '17 at 12:22

Community

1
1

answered Mar 09 '15 at 09:43

DevJem

656
1
13
21

Android: center background of radio button

4 Answers4