A modern programming language that makes developers happier.

kotlinlang

Screen Shot 2021-05-03 at 11.07.13 AM.png

I haven't worked with custom views ever, but for my first attempt, my designer gave me this. Is there a way that I can figure out what kind of curve this is, or should I be asking my designer for the path or curve specs or something? It doesn't make sense to me how to draw this curve programatically that'll work on tablets and phones of all sizes.

<@UHED82QLX> sorry for being a noob at this. So the curve has an equation they'll be able to pull from sketch? Sorry I was never good at math.

Is it just this, or a part of a bigger thing?

Looks like either <https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Path?hl=en#arcto> or the more general <https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Path?hl=en#quadraticbezierto>

This is the first part. The second part is finding the center of a screen and putting a button on the center, but on the graph itself. But first, I can't even figure out how to draw a path.

You'd use `Canvas` to draw that path with dashed effect - <https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/PathEffect?hl=en#Companion.dashPathEffect(kotlin.FloatArray,%20kotlin.Float)|https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/PathEffect?hl=en#Companion.dashPathEffect(k[…]loatArray,%20kotlin.Float)>

<@UHED82QLX> thank you so much I was able to draw it successfully today after some trial and error. A small follow up... how would I add some alpha to the start and end of the curve. Like my designer wants this to look like it fades in and fades out. I'm thinking of trying to apply alpha to the entire left and right side of my composable but wonder if anyone else familiar with canvas apis would point me in the right direction.

Probably best to invoke <@U010550J4RZ> here. Maybe some kind of a custom shader on the path's paint?

Do you have a link to a screenshot for what you are trying to accomplish? If you are trying to gradually fade in the arc, you can draw the path with a sweepGradient with the starting and ending colors being the faded/non faded colors respectively

<@U010550J4RZ> I don't have a screenshot, but I basically want both ends of the path (the start and end) to be completely invisible and gradually fade into the color black. I tried looking into brushing with gradients, but I couldn't find one where that basically only would affect the start and end.

This is very new to me so I'm probably missing something simple, but I will keep playing around with it. thank you

Edit: Ooh. Lineargradient seems to work well!