Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Unbound Ripple/Indication in Jetpack Compose (equivalent to selectableBackgroundBorderless)

In Jetpack Compose the clickable Modifier will by default use LocalIndication.current and show a ripple that is bound to the border. That looks great almost always, but there are some circumstances where a rounded, unbound ripple looks better. Back in View Android we would've used android:background="?attr/selectableItemBackgroundBorderless to achieve this behaviour. How can we do it in compose?

Example [source]:

2

like image 906
Yannick Avatar asked Feb 26 '21 13:02

Yannick


People also ask

What is LazyColumn in jetpack compose?

A LazyColumn is a vertically scrolling list that only composes and lays out the currently visible items. It's similar to a Recyclerview in the classic Android View system.

What is Mutablestateof in jetpack compose?

If you want to change the state of TextField and also update the UI, you can use a MutableState . Compose observes any reads and writes to the MutableState object and triggers a recomposition to update the UI.

When to Use remember jetpack compose?

remember can be used to store both mutable and immutable objects. Note: remember stores objects in the Composition, and forgets the object when the composable that called remember is removed from the Composition.

Is jetpack compose same as flutter?

Compose is a Kotlin framework, and both Kotlin and Android Studio (the official Android IDE) came from developer tools company JetBrains. Although Jetpack Compose is Android only (unlike Google's Flutter framework), JetBrains believed Compose could also be cross-platform.


1 Answers

You can customise the ripple effect as follow:

Modifier.clickable(
    interactionSource = remember { MutableInteractionSource() },
    indication = rememberRipple(bounded = false), // You can also change the color and radius of the ripple
    onClick = {}
)
like image 107
Gaëtan Avatar answered Oct 13 '22 02:10

Gaëtan