Some updates on the compose rewrite of an app from work :face_with_hand_over_mouth::face_with_hand_o...

# compose

[andrew]

Some updates on the compose rewrite of an app from work 🤭🤭

22-03-06-19-35-51.mp4

[andrew]

There is support for account manager here too, just need to rewire it

[andrew]

This is very much a side project at the moment, but once it's fully featured, we plan on presenting this to head of product, kind of a skunk works type project

[Semir Rahic]

And did you use compose navigation or stick with fragments and the UI was just compose?

[andrew]

Not using compose navigation, I wrote a small navigation system inspired by voyager and react-navigation

[KamilH]

Nice transitions between screens. It reminds me iOS’s native push animation

[andrew]

Thanks! @KamilH

[ildar.i [Android]]

Can you share your navigation system? I'd like to take a look at it

[ste]

@andrew star the issue then! https://issuetracker.google.com/issues/174241799

[andrew]

@ildar.i [Android] a lot of it is modeled after voyager and react navigation

[Eric Chee]

Those pulse animations look sweet

[andrew]

Thanks, a little bit of canvas and some math 😉

[andrew]

@Composable
fun Pulse(
    modifier: Modifier = Modifier,
    tint: Color = LocalContentColor.current,
    active: Boolean = true,
    bounded: Boolean = true,
    count: Int = 3,
    duration: Int = 1000,
) {
    if (!active) return

    val infiniteTransition = rememberInfiniteTransition()
    val pulses = buildList {
        for (i in 0 until count) {
            add(infiniteTransition.animateFloat(
                initialValue = 0F,
                targetValue = 1F,
                animationSpec = infiniteRepeatable(
                    animation = tween(duration * count, easing = FastOutSlowInEasing),
                    initialStartOffset = StartOffset(i * duration),
                )
            ))
        }
    }

    Canvas(modifier.then(if (bounded) Modifier.clipToBounds() else Modifier)) {
        val (a, b) = size
        val r = sqrt(a.pow(2) + b.pow(2)) / 2

        pulses.forEach {
            val progress = it.value

            scale(progress) {
                drawCircle(color.copy(alpha = (1F - progress) * 0.12F), r)
            }
        }
    }
}

[andrew]

Not sure if this is optimal, but if theres any way to squeeze more perf out of this, do tell 🙂

[Marcin Wisniowski]

Looking at it I thought you are just triggering the default touch ripple.

[andrew]

Not sure how much control I’d have using the normal touch ripples

[andrew]

Plus accessibility, would I have to trigger a click, vs another option?

[Marcin Wisniowski]

I haven't looked how the ripple Indication is implemented in Compose, so no clue! The effect just looks like it so if I was going to implement it I would probably look there first. But going with Canvas definitely gives you better control.

[andrew]

The ripple indication refers to how android draws them internally afaik