I have custom styled a RadioButton for adding radiobutton image on the right side
Make RadioButton background to transparent
android:background="#ffffffff"
or
android:background="@android:color/transparent"
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="@android:color/transparent"> <!-- ripple color -->
<item android:drawable="your color"/> <!-- normal color -->
</ripple>
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>
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)))
}