Introduction to drawing in Compose

Android Developers · 61K views · 2023 · 9:29

Open on YouTube

Software (other)UX & UI designtutorial

Why Stack Overflow recommends it

Stack Overflow users link it when answering Jetpack Compose questions about custom drawing, paths, and animating things inside a draw scope.

Recommended by 2 people across 2 different months, 2023 to 2023.

What it is

A short Android Developers tutorial on custom drawing in Jetpack Compose. It covers DrawScope, the Canvas composable, drawing modifiers, the coordinate system and transformations, then builds an animated line graph with drawLine and drawPath.

What people said

Recommends riggaroo · 2023-03 · Stack Overflow · on “How to animate drawPath() on jetpack compose canvas”

You can use the PathMeasure [LINK] API - getSegment() [LINK] function to get a segment of a Path, at a certain length. So if you know the length of the Path (obtained from PathMeasure.getLength() ), you can then get a segment of a path passing a fraction of the length to the getSegment() API. For example: val drawPathAnimation = remember { Animatable(0f) } val pathMeasure = remember { PathMeasure() } LaunchedEffect(key1 = Unit, block = { drawPathAnimation.animateTo( 1f, animationSpec = tween(2000) ) }) val animatedPath = remember { derivedStateOf { val newPath = Path() pathMeasure.setPath(fullGraphPath.value, false) // get a segment of the path at the percentage of the animation, to show a d

Recommends Sarah Brenner · 2023-07 · Stack Overflow · on “Absolutely position an element inside a Column in Jetpack Compose”

I think that you'll probably need some sort of custom layout. Maybe this will help? [LINK] Android Developers also has some really good vids on drawing & layouts. Here's one I like: [this video] , and also check out: [LINK]

Cites Mr. Techie · 2023-04 · Stack Overflow · on “Animation inside jetpack compose draw scope”

I was trying to implement two different animations inside a drawScope : clipRect (as the first part on a path) slideInVertically (as second part on a drawable, as shown in the table here [LINK] ) I was able to implement the clipRect part with the help of this video [this video] but I am stuggling with the slideInVertically implementation. So is there anyway we can achieve it particularly in drawScope ? Also there is another general question around jetpack compose animation: If I want to try out all of these animations [LINK] inside a drawScope is there any documentation that can help me with it?