CODEWITHSUNDEEP
androidradio-buttonscaling
VanessaF
VanessaF

Reputation: 793

How to scale the circle in Radiobuttons in Android

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: enter image description here

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.

Upvotes: 1

Views: 1030

Answers (1)

fisio
fisio

Reputation: 554

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

Upvotes: 1

Related Questions