How to scale the circle in Radiobuttons in Android

Question

I am using some customized RadioButtons in Android and I want them so scale with the screen size. This is why I am using scalable size units for text and UI elements from this libraries https://github.com/intuit/sdp and https://github.com/intuit/ssp

Unfortunately, while the text itself and the bottom size scales with a higher screen size, the circle remains of equal size which does not look good. You can see it on my screenshots:

Here you see the code: Radio Button in the constraintLayout:

  <RadioButton
        android:id="@+id/r_Button_Small"
        android:layout_width="@dimen/_73sdp"
        android:layout_height="@dimen/_28sdp"
        android:layout_weight="1"
        android:textSize="@dimen/_12ssp"
        android:background="@drawable/background_selector"
        android:text="@string/small"
        android:textColor="@drawable/text_selector"
        android:gravity="center"
        android:textAlignment="center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.322"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginLeft="@dimen/_50sdp"
        app:layout_constraintVertical_bias="0.584"
         />

Background files

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_checked="true"
        android:drawable="@drawable/state_checked" />

    <item android:drawable="@drawable/state_unchecked" />

</selector>

with state file "checked"

<?xml version="1.0" encoding="UTF-8"?>
<shape android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/colorBlue">
    </solid>
    <corners android:radius="@dimen/_25sdp"></corners>
</shape>

and "state unchecked"

<?xml version="1.0" encoding="UTF-8"?>
<shape android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/colorTest">
    </solid>
    <corners android:radius="@dimen/_25sdp"></corners>
</shape>

Do you know how I can also scale the circle of the RadioButtons?

Can anyone think about an easy solution for doing that? I mean I can't imagine that for tablets you can't really use RadioButtons and I do not understand why the size of the button can be adjusted while the inner circle can't be adjusted with regard to the size and does not scale.

score 1 · Accepted Answer · answered Jan 03 '21 at 08:41

1

the radio button is a built-in control component and as such its size is fixed. But if you need to make it smaller you could use:

<RadioButton
  android:scaleX="0.7"
  android:scaleY="0.7" />

It's a workaround and shouldn't be used to make it bigger because button will get pixelated

answered Jan 03 '21 at 08:41

fisio

494
6
12

Thanks fisio for your answer. I do not want to make the whole bottom bigger or smaller. I just want to adjust the size of the circley within the button as it does not scale with the size of the buttom. For bigger devices likes tablets this looks quite bad – VanessaF Jan 03 '21 at 09:42
given the situation i personally would switch to another button type, but if you want to stick with RadioButton sadly i think you have to implement a custom one that suits your needs – fisio Jan 03 '21 at 11:02
Thanks fisio for your comment and effort. What other button type are you thinking about? And if I want implement a custom RadioButton, how can I do this? – VanessaF Jan 03 '21 at 14:13
For me it is really weird that the size of RadioButtons do not scale. So how should they then be used in bigger devices? – VanessaF Jan 03 '21 at 14:19
if you want to change button type i recommend you tu use togglebuttons instead. Give a look at this: https://stackoverflow.com/questions/2379527/android-how-to-get-a-radiogroup-with-togglebuttons . For the custom solution you have to create a circle shape as image in the button and change it in the onclicklistener with color animation for a smooth effect; this can give you an idea for circle shapes: https://stackoverflow.com/a/34724737/7507215 – fisio Jan 03 '21 at 19:06
for your last question in bigger devices they are meant to be used in an awful way – fisio Jan 03 '21 at 19:12
Thanks for your comments and help fisio. I really appreciate it and I upvoted your answer. If I have created a circle how can I integrate it into a RadioButton? And what do you mean by "in bigger devices they are meant to be used in an awful way"? I just want to use a RadioButton in a tablet and honestly for me it is kind of primitive that the buttom itself and the text can be adjusted in size while the circle, which is a integral part of a Radiobutton can't be adjusted – VanessaF Jan 03 '21 at 22:33
Any further comments? I'd really apprciate it – VanessaF Jan 05 '21 at 08:01
You should use image buttons instead, to make them appear like radiobuttons, and in a custom RadioGroup implement logic for onClick animations(to change displayed image) when user taps any of the image buttons – fisio Jan 05 '21 at 10:36
For bigger devices i meant radiobuttons don't suit graphically – fisio Jan 05 '21 at 10:40
Basically you have to reinvent radiobuttons from scratch not to tweak them. Because of this i recommend you tu switch to the other solution if you are willing to – fisio Jan 05 '21 at 10:43
Thanks fisio for your comments and effort. Your suggested solution with using an image buttom sounds quite challenging and you have to put a huge amount of effort into it. This is not what I want. – VanessaF Jan 05 '21 at 11:05
Why do you think that Radiobuttons do not suit graphically for bigger devices. I personally would disagree to that. I mean Radiobuttons are important UI elements and your suggested solution will at the end also just be a "RadioButton" implemented with way more effort – VanessaF Jan 05 '21 at 11:07
1

Exactly. I was agreeing with you. They don't suit just because they don't scale – fisio Jan 05 '21 at 11:12
Well basically the very strange thing is that in fact they scale with size but the inner circle just does not scale. This is quite strange for me. If the button and the text scale why does the inner circle not scale? What is the rationale behind that? – VanessaF Jan 05 '21 at 12:56
Sadly there is not. You should opt for another solution – fisio Jan 07 '21 at 07:52
Thanks for your further comment fisio. Do you know which element is usually used in bigger devices instead of RadioButtons? – VanessaF Jan 07 '21 at 21:16
1

i've said before how to use togglebuttons instead – fisio Jan 08 '21 at 14:58
Thanks fisio for your tremendous effort and help. I accpeted your answer (altough the answer generally to my question is not satisfying). I really appreciate your comments on this. – VanessaF Jan 08 '21 at 18:12
1

I understand your dissatisfaction about the platform. Good luck with your project – fisio Jan 09 '21 at 10:42

How to scale the circle in Radiobuttons in Android

1 Answers1

Linked