Radiobutton with text above button

Question

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 dont understand what the @drawable/main_selector and @style/TabStyle.

Radiobutton with text on top

Can anyone give me a 101 guide.

UPDATE

I used the following according to some suggestion but didnt work:

<RadioGroup xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<RadioButton
    android:text="something that is on top"
    android:id="@+id/toggle_tab_left"
    android:button="?android:attr/listChoiceIndicatorSingle"        
    style="@null"/>

<RadioButton 
    android:button="?android:attr/listChoiceIndicatorSingle"
    android:text="something that is on top"
    android:id="@+id/toggle_tab_right"
    style="@null"/>
</RadioGroup>

UPDATE 2

I got my solution from Warpzit, but befor i mark the question as answered, can someone help me on the alignment issue below. I will have 5 radio buttons in a row where some of them will have longer text split in 2 lines. when the text fit on the screen, because of landscape, or on tablets then all text should be in one line:

UPDATE 3

... depending on the screen size the text can split into different number of lines. It wont be always standard

Esophagitis

This question was down-voted and i don't understand why. It is very well asked with clear objective. Proof is that it was even answered correctly very quickly !!! – Esophagitis

Answer 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"?>
<RadioGroup xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<RadioButton
    android:text="Text on top"
    android:button="@null"
    android:background="#f00"
    android:layout_weight="1"/>

<RadioButton 
    android: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"?>
<RadioGroup xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<RadioButton
    android:text="Text on top"
    android:button="@null"
    android:drawableBottom="@android:drawable/btn_radio"
    android:gravity="center"
    android:layout_weight="1"/>

<RadioButton
    android: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:

Words

can i use the default button, the bullet, instead of @drawable/main_selector – Esophagitis

@YiannisStavrianos yes but what is pointed out is that the button drawable should be "@null" and you should override the background instead. – Words

please check my update. The text is still aligned on the right. Do you have a vanilla example for this? – Esophagitis

thanks it works! I have a vertical alignment issue now as per update 2. Can you please advise on that too. You got the answer correct, so I will mark it as correct anyway. – Esophagitis

@YiannisStavrianos I don't get you issue. Do you want the text to hide when too long or what are you fishing after? – Words

I need to bottom align the bullets – Esophagitis

@YiannisStavrianos they are bottom aligned... You should set the height of the RadioButtons to something fixed (80dp etc.) and then you'll get the kind of layout you want. – Words

I tried that and its kind of what I need. According to screen size the lines of the text can be 1, 2 or more. I wont be able to set the height every time the screen size changes. See Update 3 – Esophagitis

Unfortunately this produces weird results. I have 4 radio buttons in row. The texts are either wrapped or cut. Basically they are unable to have a greater width than the width of the button itself. Therefore my solution would be to use a separate linear layout with texts and separate one with buttons. – Oona

@Oona There's no need to make the hierachy more complex. See my answer, a RadioGroup is enough. – Regent

By all angles perfect answer – Ceramal

Answer 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

<RadioGroup xmlns: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" >

    <RadioButton
        android: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" />

    <RadioButton
        android: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" />

    <RadioButton
        android: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>

Regent

How can I do it if I am adding radio buttons problematically in the radiogroup – Arsenal

@IshaanPuniani Prepare and set a RadioGroup.LayoutParams on each button before adding the button to the RadioGroup – Regent

Answer 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.

<style name="RadioWithTextOnTop">
    <item name="android:button">@null</item>
    <item name="android:drawableBottom">?android:attr/listChoiceIndicatorSingle</item>
    <item name="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" />

Nomism

Answer 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.

Phototopography

Answer 5

  <RadioButton
                    android: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"[enter image description here][1]
                    android:background="@drawable/app_border_0"
                    android:padding="@dimen/_15sdp"
                    android:text="@string/no"
                    android:fontFamily="@font/poppins_medium"
                    style="@style/AppRadioAppStyle"
                    android:layout_marginStart="@dimen/_10sdp"/>

should be add android:button="@null" in your radiobutton

Edmondo