I have a question. I’ve been punishing myself here trying to achieve what’s in the linked image, I ...

# compose

[Cicero]

I have a question. I’ve been punishing myself here trying to achieve what’s in the linked image, I kind of got it with drawing an arc bit I can get the arch to be aligned or anchored to the bottom of the image. Please, if you know how to improve my snippet or do this in a simpler way, code snippet of what I currently have is in the thread…

[Cicero]

val headerModifier = Modifier.fillMaxWidth()
                Box(
                    headerModifier,
                    contentAlignment = Alignment.BottomCenter,
                ) {
                    Image(
                        painter = painter,
                        contentDescription = null,
                        contentScale = ContentScale.Crop,
                        modifier = headerModifier
                    )
                    Box(
                        headerModifier
                    ) {
                        Canvas(headerModifier) {
                            println("size = $size")
                            val h = 120f
                            val w = size.width
                            val r = w * w / (6 * h) + h / 2
                            val x = w / 2 - r
                            println("r = $r, x = $x")
                            val topLeft = Offset(x, size.height - h)
                            val size = Size(2 * r, 2 * r)
                            drawArc(
                                background, startAngle = 0f, sweepAngle = -180f, useCenter = true,
                                topLeft = topLeft, size = size
                            )
                        }
                    }
                }

[Cicero]

I also offer some other simple snippets as thank you: https://gist.github.com/cicerohellmann

[Cicero]

I'm not trying to fit any specific image size, it should fit any width.

[Cicero]

Also a "this approach is stupid, try this instead" also good, because this direction I'm on right now feels wrong.

[nitrog42]

just because I have to know, why don't you draw it using a tool (like Sketch), export as an SVG and convert it to a vector drawable ?

[robnik]

It's hard to tell from the image - how is it not lined up? Are you trying to get the white arc to go from corner to corner?

[Cicero]

yes

[Cicero]

I can share a picture

[robnik]

It's some sin/cos math to calculate the circle position based on the width and how high you want that arc. I may try now... because I'm nuts. 🙂

[Cicero]

I updated the snippet. I removed some padding bottom which made the drawable disapear

[Cicero]

@nitrog42, I like the suffering.

[Cicero]

I don’t know if the drawable solution is the best approach

[Cicero]

Also, if it’s of your curiosity: https://juliensalvi.medium.com/custom-shape-with-jetpack-compose-1cb48a991d42
Dude just posted a very interesting article on shapes

[robnik]

I've got an equation. Used pythagorean theorem, not sin/cos.

Canvas(Modifier.fillMaxSize()) {
    println("size = $size")
    val h = 200f
    val w = size.width
    val r = w*w / (8*h) + h/2
    val x = w/2 - r
    println("r = $r, x = $x")
    val topLeft = Offset(x, size.height - h)
    val size = Size(2*r, 2*r)
    drawArc(Color.White, startAngle=0f, sweepAngle=-180f, useCenter=true,
            topLeft=topLeft, size=size)
}

[robnik]

You don't need that full sweep angle, but since mine is offscreen it doesn't matter.

[Cicero]

I will try this

[Cicero]

Omg

[Cicero]

You really did it

[robnik]

Haha. 🙂

[Cicero]

Can I use this?

[robnik]

Now you can animate h and have it bounce. Can't do that with the SVG. 🙂

[robnik]

Yes!

[Cicero]

You can do all kinds of stuff with this

[Cicero]

I could at least tip you a beer or a coffee

[Cicero]

Srsly, you saved me a lot of time. Thanks.

[Cicero]

Updated the snippet in the beginning of the conversation 😛

[robnik]

Cool, glad it helped. Slack hasn't built the beer dispenser button yet, so I'll take the karma. I got help from others here already.

[orangy]

I would may be use Bezier curve instead. Start and end positions are corners, controls points are obviously symmetrical, and you can make it almost indistinguishable from an arc if you want (see for example https://spencermortensen.com/articles/bezier-circle/), but it gives more options if you want to animate it.

[Cicero]

I will take a look. I've been playing around with vezier curves for years now but I've never sat down to stamp it in my brain. Thanks for the idea :)

[robnik]

Does Canvas have a way to draw quadratic or cubic Bezier curves? I don't see anything popping up in autocomplete in the DrawScope inside the Canvas closure.

[orangy]

Yes, of course it has Bezier 🙂 But you need to build a Path first (using Path.cubicTo) and then draw it.