neumorphic button with jetpack compose 1.1 Box { ...

# compose

[Junaid]

neumorphic button with jetpack compose 1.1
Box { Box.blur.light, Box.blur.dark, content } that's it

[Junaid]

Box(
        Modifier
            .background(MaterialTheme.colors.surface)
            .padding(15.dp)
    ) {
        Box(
            modifier = Modifier
                .size(50.dp)
                .align(Alignment.Center)
                .offset((-10).dp, (-10).dp)
                .blur(
                    10.dp,
                    edgeTreatment = BlurredEdgeTreatment.Unbounded
                )
                .background(Color.White, CircleShape)
        ) {

        }

        Box(
            modifier = Modifier

                .size(50.dp)
                .align(Alignment.Center)
                .offset(10.dp, 10.dp)
                .blur(
                    19.dp,
                    edgeTreatment = BlurredEdgeTreatment.Unbounded
                )
                .background(Color.Black.copy(alpha = 0.6f), CircleShape)
        ) {

        }

        Box(
            modifier = Modifier

                .size(50.dp)
                .align(Alignment.Center)

                .blur(
                    3.dp,
                    edgeTreatment = BlurredEdgeTreatment.Unbounded
                )
                .background(MaterialTheme.colors.surface, CircleShape)
        ) {

        }

        IconButton(
            onClick = { },
            modifier = Modifier
                .align(Alignment.Center)
                .size(50.dp)
                .padding(10.dp)

        ) {
            Icon(Icons.Filled.ArrowForward, "Next Button", tint = MaterialTheme.colors.onBackground)
        }

    }

[FunkyMuse]

Remember that blur only works for Android +12 😢

[Junaid]

sad part ikr 😢

[Junaid]

I could get something like this with background gradient brush

[Junaid]

with bit tweaking

[Junaid]

val size = 100.dp
    Box(
        Modifier
            .align(Styles.NextButtonAlignment).padding(AppStyles.paddingDefault)
    ) {


        Box(
            modifier = Modifier

                .size(size)
                .align(Alignment.Center)
                .offset((-25).dp, (-25).dp)
                .background(brush = Brush.radialGradient(
                    listOf(Color.White, Color.Transparent)
                ), CircleShape)


        ) {

        }

        Box(
            modifier = Modifier

                .size(size)
                .align(Alignment.Center)

                .offset(5.dp, 10.dp)
                .background(brush = Brush.radialGradient(
                    listOf(Color.Black.copy(alpha = 0.6f), Color.Transparent),
                ), CircleShape)

        ) {

        }

        Box(
            modifier = Modifier
                .size(size)
                .align(Alignment.Center)
                .background(brush = Brush.radialGradient(
                    colors = listOf(
                        MaterialTheme.colors.surface,
                        MaterialTheme.colors.surface,
                        MaterialTheme.colors.surface,
                        MaterialTheme.colors.surface,
                        MaterialTheme.colors.surface,
                        MaterialTheme.colors.surface,
                        MaterialTheme.colors.surface,
                        MaterialTheme.colors.surface.copy(
                            alpha = 0.9f
                        ),
                        MaterialTheme.colors.surface.copy(
                            alpha = 0.05f
                        )
                    ),
                ), CircleShape)
        ) {

        }

        IconButton(
            onClick = { },
            modifier = Modifier
                .align(Alignment.Center)
                .size(size)
                .padding(10.dp)

        ) {
            Icon(Icons.Filled.ArrowForward, "Next Button", tint = MaterialTheme.colors.onBackground)
        }

    }

[Junaid]

works without issues on my old phone (10)

[Dragos Rachieru]

Have you tried adding hover and pressed states to it? It looks cool as is, but I don't know how it will work with buttons

[Junaid]

Nope, but it is possible with a clip and two shadows in reverse