An attempt to create a shimmer effect in compose. currently implemented using canvas and linear gradient. Would love to know if there could be a better/efficient way to do this.

Would you mind sharing your code? This looks good!

Since Karan asked, I took a stab at improving it a bit: https://gist.github.com/lelandrichardson/35b2743e1acd5d672f963f92aca57d4a

We need to fix that name

isAntiAlias

ah, good call. i was trying to figure out how to avoid that allocation and couldnt

@Leland Richardson [G] can you please tell what is composed here?

fun Modifier.shimmer() = composed {

val progress = animatedFloat(0f)

onActive {

progress.loop(0f, 1f, 1000)

onDispose {

progress.stop()

}

}

remember { ShimmerModifier(progress) }

}

I was wondering that too, it looks like a relatively new thing that lets modifiers be stateful without requiring the user to invoke a composable factory function at the use site: https://cs.android.com/androidx/platform/frameworks/support/+/androidx-master-dev:ui/ui-core/src/main/java/androidx/ui/core/ComposedModifier.kt;l=31;bpv=1

not part of dev10 version as well 😛

yeah, sorry, that’s a new API 🙂

I still can't use the extension function in the existing api. right? we can't really chain the modifiers.

you should be able to

lamba's are not allowed with composable I think. Getting this error at build time on writing this code.

Functions which invoke @Composable functions must be marked with the @Composable annotation

@Composable
fun Modifier.shimmer() = {
    val progress = animatedFloat(0f)
    onActive {
        progress.loop(0f, 1f, 1000)
        onDispose {
            progress.stop()
        }
    }
    remember { ShimmerModifier(progress) }
}

I don't think you want a lambda at all. Should be

shimmer() {

, not

shimmer() = {

. And then add a

return

before

remember

.

but composable functions cannot return anything. right? @Zach Klippenstein (he/him) [MOD]

No, they can return like normal functions.

https://google.dev/codelabs/jetpack-compose-basics#3 @Zach Klippenstein (he/him) [MOD]

That code lab must be old, composable functions have been able to return values since the

+

syntax for effects was deprecated, in dev05 or some time around then I think? Look at that source link I posted, the function parameter to

composed

is a composable function that returns a

Modifier

.

but I just tried to run a @composable function with return and it works 🙊

yes returning values is fine. The codelab you’re referencing is old, but the thinking hasn’t changed all that much. We had this notion of “effects” before which we have now unified with composable functions which return values. When we first announced compose, there were a lot of people that were confused about how a composable function which returned Unit could mean anything, since most comparable frameworks work in a way where you have a function returning some type of tree-like data structure to describe what the component is rendering. Compose works in somewhat of a different way, where the structure of the code that is executing is instead interpreted as the tree. The language you screenshotted above is sort of trying to explain that, but we didn’t realize at the time that we would later have composable functions returning values also :)

@Leland Richardson [G] based on the docs of

Model

class:

Composable functions which directly or indirectly read properties of the model class, the composables will be recomposed whenever any properties of the the model are written to.

but

ContentDrawScope.draw()

is not a Composable function, why does it recompose whenever progress is being updated?

good question. We also set up model observation during draw and layout phases

Yeah, thank you.