Get accustomed!

Recently, a design was passed to me just as a reference for login screen which was a simple screen but has some curves in it. So I ended up trying it just for learning purposes. The screen looked like this

class CurvedShape(private val type: CurveType) : Shape {
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ): Outline {
        return Outline.Generic(
            path =
            if (type == CurveType.LTR) ltrCurve(size)
            else rtlCurve(size)
        )
    }
}

Now in our LTR path implementation, we start drawing an arc at C1 at top left corner of the container with a predefined radius. Then we draw a line from C1 to C2. From C2 we create an arc to C3 and from C3 we connect the arc to C4 arc at an angle tilted enough to match our design.

And we return this path in our CurvedShape createOutline function for LTR type. Finally we set this shape to our Signup Box in the graphics layer.

Box(
    modifier = modifier
        .graphicsLayer {
            shape = CurvedShape(CurveType.LTR)
            clip = true
        }
        .background(Color.Cyan)
)

Setting this composable in the main content and running the app will give us the following output

Here also, we create C1 arc and join it to C2 and C2 to C3 and finally to C4.

And we return this path in our CurvedShape createOutline function for RTL type. Finally we set this shape to our Login Box in the graphics layer.

Box(
    modifier = modifier
        .graphicsLayer {
            shape = CurvedShape(CurveType.RTL)
            clip = true
        }
        .background(Color.Cyan)
)

Setting this composable in the main content and running the app will give us the following output

Great!! So we’ve created the desired shapes for our containers. But the main challenge comes now where we need to set them such that the diagonals are aligned to each other correctly. Now setting them in a column will put the Login container below the Signup container’s bottom and they’ll appear as follows

So how will we set them as required? Well! for this we need to create a custom layout modifier which takes x and y coordinates as follows

@Composable
fun Modifier.placeAt(
    x: Int,
    y: Int,
) = layout { measurables, constraints ->
    val placeable = measurables.measure(constraints)
    layout(placeable.width, placeable.height) {
        placeable.placeRelative(x,y)
    }
}

Now we call this modifier on our Signup and Login containers as follows

Because the Signup container has a height of 600 dp so we set the top for the Login container as 510 dp which approximately sets well as per our need.

Bamn! We finally created our desired design.

You can check out the github repo and fork it to play around.

Source code: https://github.com/aqua30/CustomLoginDesign

That is all for now.

Until next time…

Cheers!

This article was originally published on proandroiddev.com on June 14, 2022