https://kotlinlang.org logo
#compose
Title
# compose
a

andrew

03/07/2022, 12:40 AM
Some updates on the compose rewrite of an app from work 🤭🤭
👍 4
🙌🏼 2
jetpack compose 10
🎉 6
🙌 5
👍🏼 1
There is support for account manager here too, just need to rewire it
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
👌 2
s

Semir Rahic

03/07/2022, 5:54 AM
And did you use compose navigation or stick with fragments and the UI was just compose?
a

andrew

03/07/2022, 6:55 AM
Not using compose navigation, I wrote a small navigation system inspired by voyager and react-navigation
🙌 1
k

KamilH

03/07/2022, 7:05 AM
Nice transitions between screens. It reminds me iOS’s native push animation
a

andrew

03/07/2022, 11:56 PM
Thanks! @KamilH
i

ildar.i [Android]

03/08/2022, 7:16 AM
Can you share your navigation system? I'd like to take a look at it
s

ste

03/08/2022, 3:25 PM
🌟 1
a

andrew

03/08/2022, 4:17 PM
@ildar.i [Android] a lot of it is modeled after voyager and react navigation
e

Eric Chee

03/09/2022, 1:54 AM
Those pulse animations look sweet
a

andrew

03/09/2022, 2:04 AM
Thanks, a little bit of canvas and some math 😉
Copy code
@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)
            }
        }
    }
}
👍 3
❤️ 2
K 2
today i learned 1
Not sure if this is optimal, but if theres any way to squeeze more perf out of this, do tell 🙂
m

Marcin Wisniowski

03/09/2022, 2:05 AM
Looking at it I thought you are just triggering the default touch ripple.
a

andrew

03/09/2022, 2:07 AM
Not sure how much control I’d have using the normal touch ripples
Plus accessibility, would I have to trigger a click, vs another option?
m

Marcin Wisniowski

03/09/2022, 2:14 AM
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.
a

andrew

03/09/2022, 2:15 AM
The ripple indication refers to how android draws them internally afaik