CODEWITHSUNDEEP
androidradio-button
Yiannis Stavrianos
Yiannis Stavrianos

Reputation: 335

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

enter image description here

UPDATE 3

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

enter image description here

Upvotes: 17

Views: 20542

Answers (5)

muhammed faisal v.v
muhammed faisal v.v

Reputation: 21

  <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

Upvotes: 0

dsalaj
dsalaj

Reputation: 3197

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.

Upvotes: 0

Junior Damacena
Junior Damacena

Reputation: 141

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" />

Upvotes: 2

sergio91pt
sergio91pt

Reputation: 1469

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.

Screenshot

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>

Upvotes: 26

Warpzit
Warpzit

Reputation: 28152

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:

Behind, text on top example

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:

Above example

Upvotes: 33

Related Questions