{"id":862,"date":"2024-01-18T21:43:52","date_gmt":"2024-01-18T18:43:52","guid":{"rendered":"https:\/\/barisuslucan.com\/en\/?p=862"},"modified":"2024-01-18T21:45:58","modified_gmt":"2024-01-18T18:45:58","slug":"modifying-the-ripple-color-for-clickable-elements-in-jetpack-compose","status":"publish","type":"post","link":"https:\/\/barisuslucan.com\/en\/kotlin\/modifying-the-ripple-color-for-clickable-elements-in-jetpack-compose\/","title":{"rendered":"Modifying the Ripple Color for Clickable Elements in Jetpack Compose"},"content":{"rendered":"

Modifying ripple color in Jetpack Compose is a straightforward process. However, ripple effects can occasionally become bothersome, particularly on items in the bottom navigation bar. In this article, I will demonstrate how to alter the color of these effects and modify their animations.<\/p>\n

Define your CustomRippleTheme class as illustrated below.<\/p>\n\n\n

<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
class<\/span> <\/span>CustomRippleTheme<\/span>(<\/span>private<\/span> <\/span>val<\/span> <\/span>color<\/span>: <\/span>Color<\/span>): <\/span>RippleTheme<\/span> <\/span>{<\/span><\/span>\n    <\/span>@Composable<\/span><\/span>\n    <\/span>@ReadOnlyComposable<\/span><\/span>\n    <\/span>override<\/span> <\/span>fun<\/span> <\/span>defaultColor<\/span>()<\/span> = color<\/span><\/span>\n<\/span>\n    <\/span>@Composable<\/span><\/span>\n    <\/span>@ReadOnlyComposable<\/span><\/span>\n    <\/span>override<\/span> <\/span>fun<\/span> <\/span>rippleAlpha<\/span>()<\/span> = <\/span>RippleAlpha<\/span>(<\/span><\/span>\n        <\/span>draggedAlpha<\/span> <\/span>=<\/span> 0<\/span>.<\/span>0<\/span>f<\/span>,<\/span><\/span>\n        <\/span>focusedAlpha<\/span> <\/span>=<\/span> 0<\/span>.<\/span>0<\/span>f<\/span>,<\/span><\/span>\n        <\/span>hoveredAlpha<\/span> <\/span>=<\/span> 0<\/span>.<\/span>0<\/span>f<\/span>,<\/span><\/span>\n        <\/span>pressedAlpha<\/span> <\/span>=<\/span> 0<\/span>.<\/span>0<\/span>f<\/span>,<\/span><\/span>\n    <\/span>)<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n

With this class, we extend our existing class using RippleTheme and override its methods. The defaultColor method allows us to change the color of the ripple. Simultaneously, the rippleAlpha method can be used to modify the animation of the ripple.<\/p>\n
Let\u2019s proceed to apply this to our clickable elements. To accomplish this, we will utilize CompositionLocalProvider. When you supply your custom ripple theme using this method, it will be applied to all your clickable elements.<\/p>\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
@Composable<\/span><\/span>\n@NonRestartableComposable<\/span><\/span>\nfun<\/span> <\/span>CustomTextButton<\/span>(<\/span><\/span>\n    <\/span>modifier<\/span>: <\/span>Modifier<\/span> <\/span>=<\/span> <\/span>Modifier<\/span>,<\/span><\/span>\n    <\/span>onClick<\/span>: () <\/span>-><\/span> <\/span>Unit<\/span>,<\/span><\/span>\n    <\/span>clickedColor<\/span>: <\/span>Color<\/span>,<\/span><\/span>\n    <\/span>placeHolder<\/span>: <\/span>String<\/span><\/span>\n    ) <\/span>{<\/span><\/span>\n    <\/span>CompositionLocalProvider<\/span>(<\/span><\/span>\n        <\/span>LocalRippleTheme<\/span> <\/span>provides<\/span> <\/span>CustomRippleTheme<\/span>(<\/span>clickedColor<\/span>)<\/span><\/span>\n    ) <\/span>{<\/span><\/span>\n        <\/span>TextButton<\/span>(<\/span><\/span>\n            <\/span>modifier<\/span> <\/span>=<\/span> <\/span>modifier<\/span>,<\/span><\/span>\n            <\/span>onClick<\/span> <\/span>=<\/span> <\/span>{<\/span> <\/span>onClick<\/span>()<\/span> <\/span>}<\/span><\/span>\n        ) <\/span>{<\/span><\/span>\n            <\/span>Text<\/span>(<\/span><\/span>\n                <\/span>text<\/span> <\/span>=<\/span> <\/span>placeHolder<\/span>,<\/span><\/span>\n                <\/span>style<\/span> <\/span>=<\/span> <\/span>MaterialTheme<\/span>.<\/span>typography<\/span>.<\/span>titleLarge<\/span><\/span>\n            )<\/span><\/span>\n        <\/span>}<\/span><\/span>\n    <\/span>}<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n

There is no need to create an additional composable function for this purpose. You can provide your CustomRippleTheme in any composable. It will be applied when you place your clickable element within the CompositionLocalProvider block<\/p>\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
@Composable<\/span><\/span>\nfun<\/span> <\/span>Buttons<\/span>(<\/span>modifier<\/span>: <\/span>Modifier<\/span> <\/span>=<\/span> <\/span>Modifier<\/span>) <\/span>{<\/span><\/span>\n    <\/span>Column<\/span>(<\/span><\/span>\n        <\/span>modifier<\/span> <\/span>=<\/span> <\/span>modifier<\/span><\/span>\n            <\/span>.<\/span>fillMaxSize<\/span>()<\/span>,<\/span><\/span>\n        <\/span>verticalArrangement<\/span> <\/span>=<\/span> <\/span>Arrangement<\/span>.<\/span>Center<\/span>,<\/span><\/span>\n        <\/span>horizontalAlignment<\/span> <\/span>=<\/span> <\/span>Alignment<\/span>.<\/span>CenterHorizontally<\/span><\/span>\n    ) <\/span>{<\/span><\/span>\n        <\/span>CustomTextButton<\/span>(<\/span><\/span>\n            <\/span>onClick<\/span> <\/span>=<\/span> <\/span>{<\/span> <\/span>},<\/span><\/span>\n            <\/span>clickedColor<\/span> <\/span>=<\/span> <\/span>Color<\/span>.<\/span>Red<\/span>,<\/span><\/span>\n            <\/span>placeHolder<\/span> <\/span>=<\/span> <\/span>"<\/span>Red Ripple<\/span>"<\/span><\/span>\n        )<\/span><\/span>\n        <\/span>CustomTextButton<\/span>(<\/span><\/span>\n            <\/span>onClick<\/span> <\/span>=<\/span> <\/span>{<\/span> <\/span>},<\/span><\/span>\n            <\/span>clickedColor<\/span> <\/span>=<\/span> <\/span>Color<\/span>.<\/span>Blue<\/span>,<\/span><\/span>\n            <\/span>placeHolder<\/span> <\/span>=<\/span> <\/span>"<\/span>Blue Ripple<\/span>"<\/span><\/span>\n        )<\/span><\/span>\n        <\/span>CustomTextButton<\/span>(<\/span><\/span>\n            <\/span>onClick<\/span> <\/span>=<\/span> <\/span>{<\/span> <\/span>},<\/span><\/span>\n            <\/span>clickedColor<\/span> <\/span>=<\/span> <\/span>MaterialTheme<\/span>.<\/span>colorScheme<\/span>.<\/span>background<\/span>,<\/span><\/span>\n            <\/span>placeHolder<\/span> <\/span>=<\/span> <\/span>"<\/span>Without Ripple<\/span>"<\/span><\/span>\n        )<\/span><\/span>\n    <\/span>}<\/span><\/span>\n}<\/span><\/span>\n<\/span>\n@Composable<\/span><\/span>\n@NonRestartableComposable<\/span><\/span>\nfun<\/span> <\/span>CustomTextButton<\/span>(<\/span><\/span>\n    <\/span>modifier<\/span>: <\/span>Modifier<\/span> <\/span>=<\/span> <\/span>Modifier<\/span>,<\/span><\/span>\n    <\/span>onClick<\/span>: () <\/span>-><\/span> <\/span>Unit<\/span>,<\/span><\/span>\n    <\/span>clickedColor<\/span>: <\/span>Color<\/span>,<\/span><\/span>\n    <\/span>placeHolder<\/span>: <\/span>String<\/span><\/span>\n    ) <\/span>{<\/span><\/span>\n    <\/span>CompositionLocalProvider<\/span>(<\/span><\/span>\n        <\/span>LocalRippleTheme<\/span> <\/span>provides<\/span> <\/span>CustomRippleTheme<\/span>(<\/span>clickedColor<\/span>)<\/span><\/span>\n    ) <\/span>{<\/span><\/span>\n        <\/span>TextButton<\/span>(<\/span><\/span>\n            <\/span>modifier<\/span> <\/span>=<\/span> <\/span>modifier<\/span>,<\/span><\/span>\n            <\/span>onClick<\/span> <\/span>=<\/span> <\/span>{<\/span> <\/span>onClick<\/span>()<\/span> <\/span>}<\/span><\/span>\n        ) <\/span>{<\/span><\/span>\n            <\/span>Text<\/span>(<\/span><\/span>\n                <\/span>text<\/span> <\/span>=<\/span> <\/span>placeHolder<\/span>,<\/span><\/span>\n                <\/span>style<\/span> <\/span>=<\/span> <\/span>MaterialTheme<\/span>.<\/span>typography<\/span>.<\/span>titleLarge<\/span><\/span>\n            )<\/span><\/span>\n        <\/span>}<\/span><\/span>\n    <\/span>}<\/span><\/span>\n}<\/span><\/span>\n<\/span>\nclass<\/span> <\/span>CustomRippleTheme<\/span>(<\/span>private<\/span> <\/span>val<\/span> <\/span>color<\/span>: <\/span>Color<\/span>): <\/span>RippleTheme<\/span> <\/span>{<\/span><\/span>\n    <\/span>@Composable<\/span><\/span>\n    <\/span>@ReadOnlyComposable<\/span><\/span>\n    <\/span>override<\/span> <\/span>fun<\/span> <\/span>defaultColor<\/span>()<\/span> = color<\/span><\/span>\n<\/span>\n    <\/span>@Composable<\/span><\/span>\n    <\/span>@ReadOnlyComposable<\/span><\/span>\n    <\/span>override<\/span> <\/span>fun<\/span> <\/span>rippleAlpha<\/span>()<\/span> = <\/span>RippleAlpha<\/span>(<\/span><\/span>\n        <\/span>draggedAlpha<\/span> <\/span>=<\/span> 0<\/span>.<\/span>0<\/span>f<\/span>,<\/span><\/span>\n        <\/span>focusedAlpha<\/span> <\/span>=<\/span> 0<\/span>.<\/span>0<\/span>f<\/span>,<\/span><\/span>\n        <\/span>hoveredAlpha<\/span> <\/span>=<\/span> 0<\/span>.<\/span>0<\/span>f<\/span>,<\/span><\/span>\n        <\/span>pressedAlpha<\/span> <\/span>=<\/span> 0<\/span>.<\/span>0<\/span>f<\/span>,<\/span><\/span>\n    <\/span>)<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n

\"\"<\/p>","protected":false},"excerpt":{"rendered":"
Modifying ripple color in Jetpack Compose is a straightforward process. However, ripple effects can occasionally become bothersome, particularly on items in the bottom navigation bar. In this article, I will demonstrate how to alter the color of these effects and modify their animations. Define your CustomRippleTheme class as illustrated below. With this class, we extend our existing class using RippleTheme and override its methods. The defaultColor method allows us to change the color of the ripple. Simultaneously, the rippleAlpha method can be used to modify the animation of the ripple. Let\u2019s proceed to apply this to our clickable elements. To…<\/p>\n","protected":false},"author":1,"featured_media":789,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[29],"tags":[],"class_list":["post-862","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-kotlin"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/barisuslucan.com\/en\/wp-json\/wp\/v2\/posts\/862","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/barisuslucan.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/barisuslucan.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/barisuslucan.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/barisuslucan.com\/en\/wp-json\/wp\/v2\/comments?post=862"}],"version-history":[{"count":2,"href":"https:\/\/barisuslucan.com\/en\/wp-json\/wp\/v2\/posts\/862\/revisions"}],"predecessor-version":[{"id":867,"href":"https:\/\/barisuslucan.com\/en\/wp-json\/wp\/v2\/posts\/862\/revisions\/867"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/barisuslucan.com\/en\/wp-json\/wp\/v2\/media\/789"}],"wp:attachment":[{"href":"https:\/\/barisuslucan.com\/en\/wp-json\/wp\/v2\/media?parent=862"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/barisuslucan.com\/en\/wp-json\/wp\/v2\/categories?post=862"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/barisuslucan.com\/en\/wp-json\/wp\/v2\/tags?post=862"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}