Android. How to customize radio button

Question

I need a radio button that is inside radio group with text on the left, an icon after the text, and a button on the right. Here is my code:

 <RadioButton
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_marginStart="8dp"
                android:layout_marginTop="12dp"
                android:layout_marginEnd="8dp"
                android:drawableStart="@drawable/ic_phone"
                android:layoutDirection="rtl"
                android:text="@string/agreement_text"
                android:textColor="@color/blue"
                android:textSize="20sp" />

However, in this case, the drawable is located in front of the button, and I need it to be located after the text. If you replace it with a drawableEnd, then the icon will be located in front of the text, which is also incorrect for me. Please tell me how to achieve the expected result.

Expected Result:

Current result (INCORRECT for me):

Why don't you just use multiple views? I don't think `RadioButton` is built for this level of customisation. — Henry Twist, Apr 18 '21 at 16:21
@Henry Twist, If I use multiple views then the radio group will not work as expected. — testovtest, Apr 18 '21 at 16:48
Here is the answer! Custom Radio Button: https://youtu.be/HM6WJhwrcx4 — Subhojit Halder, Jun 19 '21 at 23:18

enderkoca · Accepted Answer · 2021-04-18T17:42:23.587

1

Try adding the following attributes into the RadioButton, it should work.

android:layoutDirection="rtl"
android:textAlignment="textStart"
android:layout_gravity="start"

Remember to set supportsRtl property to true in your application manifest.

<RadioGroup
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <RadioButton
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="12dp"
        android:layout_marginEnd="8dp"
        android:layoutDirection="rtl"
        android:textAlignment="textStart"
        android:layout_gravity="start"
        android:button="@drawable/ic_icon_phone_red"
        android:text="ender"
        android:textColorLink="@color/white"
        android:textColor="@color/white"
        android:textSize="20sp" />
</RadioGroup>

edited Apr 18 '21 at 17:42

answered Apr 18 '21 at 16:39

enderkoca

146
9

thanks for your answer, but my icon is still positioned to the right in front of the button. – testovtest Apr 18 '21 at 16:55
Could you try with RadioGroup, like below; – enderkoca Apr 18 '21 at 17:02
Yes, my RadioButton is inside RadioGroup with width="match_parent" and height="wrap_content" – testovtest Apr 18 '21 at 17:04
Perhaps I did not explain correctly, but now I have the same result. I need the phone icon to be located next to the text, and not with the button.That is, the phone icon should be on the left immediately after the text – testovtest Apr 18 '21 at 17:37
Is this solution solve your problem? If it doesn't solve, make a custom view. for some reference check out this https://stackoverflow.com/questions/19163628/adding-custom-radio-buttons-in-android – enderkoca Apr 18 '21 at 17:50
No, I changed my question. – testovtest Apr 18 '21 at 17:55
1

You can make it easily with a custom view. 1- Set your XML 2- Create radio click listener 3- Create your View Class https://medium.com/mobile-app-development-publication/building-custom-component-with-kotlin-fc082678b080 https://proandroiddev.com/android-custom-view-level-1-67ed1c3febe1 – enderkoca Apr 18 '21 at 18:29

Android. How to customize radio button

1 Answers1