Display text at the bottom of RadioButton with image in Android

Question

I'm using a customized radio button. Each element of radiogroup have 2 pics, for the 2 states, defined in the android:button attribute.

I would like to add text, but it displays under the images, is there a way to display the text in the bottom of the image???

main_activity.xml

    <RadioButton
        android:id="@+id/radioAlc"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:checked="true"
        android:layout_marginRight="10dp"
        android:button="@drawable/policeradio"
        android:text = "text1"
         />

    <RadioButton
        android:id="@+id/radioCrash"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:button="@drawable/carcrashradio"
        android:layout_marginRight="10dp"
        android:text = "text2"
        />

    <RadioButton
        android:id="@+id/radioMarch"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:button="@drawable/marchradio"
        android:text = "text3"
        />
</RadioGroup>

drawable/carcrash.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/carcrash" android:state_checked="true"></item>
<item android:drawable="@drawable/carcrash_gris" ></item>

Jaal

Answer 1

Try this:

<RadioButton
    android:id="@+id/radioMarch"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:drawableTop="@drawable/your_drawable_selector"
    android:gravity="center"
    android:button="@android:color/transparent"
    android:text = "text3"
/>

Pristine

android:drawableTop is OK, but the text is displaying in column ! Tx – Jaal

Text displays vertically because you have width="50dp" – Pristine

Add android:textSize="11sp" to RadioButton – Pristine

you're right, it's better to put width="0dp" but The line which corrects this is <item name="android:layout_weight">1</item>. – Jaal

Answer 2

I solved it with:

    <RadioButton
        android:id="@+id/radioMarch"
        style="@style/navbar_button"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:drawableTop="@drawable/marchradio"
        android:text="Mar" />

in style.xml

<style name="navbar_button">
    <item name="android:layout_width">0dp</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:button">@null</item>
    <item name="android:gravity">center_horizontal</item>
    <item name="android:layout_weight">1</item>
    <item name="android:textSize">11sp</item>
</style>

Jaal