https://kotlinlang.org logo
#compose
Title
# compose
j

Junaid

02/02/2022, 3:37 PM
neumorphic button with jetpack compose 1.1 Box { Box.blur.light, Box.blur.dark, content } that's it
❤️ 6
jetpack compose 2
Copy code
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)
        }

    }
f

FunkyMuse

02/02/2022, 3:51 PM
Remember that blur only works for Android +12 😢
j

Junaid

02/02/2022, 3:54 PM
sad part ikr 😢
I could get something like this with background gradient brush
with bit tweaking
Copy code
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)
        }

    }
works without issues on my old phone (10)
K 2
d

Dragos Rachieru

02/03/2022, 2:46 PM
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
j

Junaid

02/03/2022, 2:49 PM
Nope, but it is possible with a clip and two shadows in reverse
2 Views