android RadioButton image and text

Question

Im using a radio button to create a custom tab host, is working fine, but now I need to show the icon on top and the text underneath the icon,

this is what I have now: currentState

but this is what I need: desiredState

This is my code:

    <RadioButton
        android:id="@+id/rad_home"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:background="@drawable/rad_background"
        android:button="@drawable/home_icon"
        android:gravity="center"
        android:text="Home"
        android:textColor="@drawable/text_background"
        android:textSize="@dimen/rad_text_size" >


    </RadioButton>

    <RadioButton
        android:id="@+id/rad_1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:background="@drawable/rad_background"
        android:button="@null"
        android:gravity="center"
        android:text="Menu"
        android:textColor="@drawable/text_background"
        android:textSize="@dimen/rad_text_size" />

    <RadioButton
        android:id="@+id/rad_2"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:background="@drawable/rad_background"
        android:button="@null"
        android:gravity="center"
        android:text="VIP"
        android:textColor="@drawable/text_background"
        android:textSize="@dimen/rad_text_size" />

    <RadioButton
        android:id="@+id/rad_3"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:background="@drawable/rad_background"
        android:button="@null"
        android:gravity="center"
        android:text="About"
        android:textColor="@drawable/text_background"
        android:textSize="@dimen/rad_text_size" />

    <RadioButton
        android:id="@+id/rad_4"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:background="@drawable/rad_background"
        android:button="@null"
        android:gravity="center"
        android:text="Whats On"
        android:textColor="@drawable/text_background"
        android:textSize="@dimen/rad_text_size" />
</RadioGroup>

So im setting the button icon with:

android:button="@null"

for when is empty

and

android:button="@drawable/home_icon"

for the icon image, should I use this to set the icon? how to organize it as I need it? [icon on top, text bottom]

I tried with a layout inside , but doesnt seem to like it?

how to accomplish this?

thanks!

AFAIK, it's not easily possible. Check [this](http://stackoverflow.com/questions/2631839/change-the-side-the-text-appears-on-a-radio-button). It might help in serving your requirement. — Kanth, Jan 25 '13 at 04:01

score 14 · Accepted Answer · answered Aug 07 '13 at 08:09

Try this: use drawableTop to show the icon

 <RadioButton
    android:id="@+id/rad_home"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_weight="1"
    android:background="@drawable/rad_background"
    android:button="@null"
    android:drawableTop="@drawable/home_icon"
    android:gravity="center"
    android:text="Home"
    android:textColor="@drawable/text_background"
    android:textSize="@dimen/rad_text_size" >

`@null` make my day.. useful for me.. :) – Chintan Rathod Dec 03 '13 at 10:16 — Chintan Rathod, Dec 03 '13 at 10:16

score 0 · Answer 2 · answered Jan 25 '13 at 05:14

You can use textview :-

 <TextView
            android:id="@+id/home_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_below="@id/rad_home"
            android:layout_marginTop="10dp"
            android:text="home" />

score 0 · Answer 3 · answered Jan 25 '13 at 05:28

Dear i can suggest you that try to Combine button text instead simple button.In Your code you try

 android:background="@drawable/rad_background"
        android:button=**"@null"**

Instead use my code and display combine button like this.

                <Button
                    android:id="@+id/btnCrop"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:layout_marginLeft="10dp"
                    android:background="@android:color/transparent"
                    android:drawableTop="@drawable/icon_crop_selector"
                    android:text="@string/btnCrop"
                    android:textAppearance="@style/TextButton"
                    android:textColor="#ffffff" />

This will be help to you.

android RadioButton image and text

3 Answers3

Linked