Remove ripple effect from RadioButton, android?

user_4074913 0
Viewed 24518

I have custom styled a RadioButton for adding radiobutton image on the right side

<RadioButton
                android:layout_margin="20dp"
                android:drawableRight="@drawable/custom_btn_radio"
                android:button="@null"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Invite Only"/>

custom_btn_radio.xml

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

but, the radiobutton's ripple effect also enlarged. how can i remove ripple effect from RadioButton? and also how to customize ripple effect?

Thank you in advance.

android
5 Answers

Setting colorControlHighlight and colorControlActivated to transparent color solved this issue for me:

<style name="transparent_theme">
    <item name="colorControlHighlight">@android:color/transparent</item>
    <item name="colorControlActivated">@android:color/transparent</item>
</style>
user_17498060

On the "how to customize ripple effect" part, using Material Components library v1.1.0, the background is by default a RippleDrawable with its color set to a ColorStateList of 2 colors: A 26 alpha (#A1 in hex) colorControlActivated in enabled and checked state, and for the default state an alpha white or black depending on whether you have a light (#1F000000) or dark theme (#33FFFFFF). I retrieved this info simply by inspecting the background of a MaterialCheckBox in the debugger.

You can just override the color of the RippleDrawable however you wish using its setColor method. For example, if you want to only change the accent colored part of the ripple effect while using a DayNight theme, you can run this Kotlin code sample:

private val RIPPLE_ENABLED_CHECKED_STATES = arrayOf(
        intArrayOf(android.R.attr.state_enabled, android.R.attr.state_checked),
        intArrayOf())

fun Int.withAlpha(alpha: Int): Int {
    require(alpha in 0..0xFF)
    return this and 0x00FFFFFF or (alpha shl 24)
}

fun CompoundButton.changeCheckedRippleColor(@ColorInt color: Int) {
    val defaultAlphaColor= if (context.resources.configuration.uiMode and 
                Configuration.UI_MODE_NIGHT_MASK == Configuration.UI_MODE_NIGHT_YES)
            Color.WHITE.withAlpha(51)
        else
            Color.BLACK.withAlpha(31)
    (background as? RippleDrawable)?.setColor(ColorStateList(RIPPLE_ENABLED_CHECKED_STATES,
                intArrayOf(color.withAlpha(26), defaultAlphaColor)))
}
user_29643790

firstly you should crate a new ripple_checkbox_bg.xml in the drawable folder

    <?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@android:color/transparent"> <!-- ripple color -->

    <item android:drawable="@color/transparent"/> <!-- for a transparent background. if you want you can use different color -->

</ripple>

and put this code your style.xml

<style name="custom_radio_button_style">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:background">@drawable/ripple</item>
    <item name="android:button">@drawable/custom_btn_radio</item>
</style>

and

and finally you can put this code your activity xml file

<androidx.appcompat.widget.AppCompatCheckBox
                style="@style/custom_radio_button_style"
                android:textColor="@color/black"
                android:text="Ripple effect removed"
             />
user_70875370
Related