Radiobutton With Text Above Button

I am new to android and I need to add radio buttons on my activity, but i need to place the text on the to of the bullet button. Any help please. I found the following, though I do

Solution 1:

The @style/TabStyle is simply a style that is applied, you can ignore that. The @drawable/main_selector is a graphic that is toggled depending on the situation. You can read more about selectors here.

Example to get text on top:

<?xml version="1.0" encoding="utf-8"?><RadioGroupxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="horizontal" ><RadioButtonandroid:text="Text on top"android:button="@null"android:background="#f00"android:layout_weight="1"/><RadioButtonandroid:text="Text on top"android:button="@null"android:background="#0f0"android:layout_weight="1"/></RadioGroup>

Will give following result:

If you want the Text to appear above the button you can use following xml:

<?xml version="1.0" encoding="utf-8"?><RadioGroupxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="horizontal" ><RadioButtonandroid:text="Text on top"android:button="@null"android:drawableBottom="@android:drawable/btn_radio"android:gravity="center"android:layout_weight="1"/><RadioButtonandroid:text="Text on top"android:button="@null"android:drawableBottom="@android:drawable/btn_radio"android:gravity="center"android:layout_weight="1"/></RadioGroup>

This will give following result:

Solution 2:

To complement Warpzit great answer, you should use android:gravity="center_horizontal|bottom" and android:layout_height="match_parent" on the buttons, to align them.

Also there's no need to copy the radio button drawables from AOSP, use ?android:attr/listChoiceIndicatorSingle.

XML Layout

<RadioGroupxmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/radioGroup1"android:layout_width="400dp"android:layout_height="wrap_content"android:orientation="horizontal"android:padding="20dp" ><RadioButtonandroid:id="@+id/radio0"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:button="@null"android:drawableBottom="?android:attr/listChoiceIndicatorSingle"android:gravity="center_horizontal|bottom"android:text="RadioButton" /><RadioButtonandroid:id="@+id/radio1"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:button="@null"android:drawableBottom="?android:attr/listChoiceIndicatorSingle"android:gravity="center_horizontal|bottom"android:text="RadioButton dsfsdfsdfsdfsdf" /><RadioButtonandroid:id="@+id/radio2"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:button="@null"android:drawableBottom="?android:attr/listChoiceIndicatorSingle"android:gravity="center_horizontal|bottom"android:text="RadioButton fdsfsd fdsfsdf fsfsdfs" /></RadioGroup>

Solution 3:

A nice way to make this effect easy to apply is to use a style. To do that, place this code on your styles.xml, under the resources tag.

<stylename="RadioWithTextOnTop"><itemname="android:button">@null</item><itemname="android:drawableBottom">?android:attr/listChoiceIndicatorSingle</item><itemname="android:gravity">center_horizontal|bottom</item></style>

And then, apply it to your RadioButton like this:

<RadioButton
    style="@style/RadioWithTextOnTop"
    android:id="@+id/radioButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:text="RadioButton" />

Solution 4:

The simplest solution I ended up using is:

<RadioButton...android:gravity="center_horizontal|bottom"android:drawableTop="?android:attr/listChoiceIndicatorSingle"android:button="@null"
    />

It also uses the newer style of the animated icon listChoiceIndicatorSingle which is the default.