neumorphic button with jetpack compose 1 1 Box Box blur ligh

Question

neumorphic button with jetpack compose 1 1 Box Box blur light Box blur dark content that s it

Junaid · Answer

```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 · Answer

Remember that blur only works for Android +12 cry

Junaid · Answer

sad part ikr cry

Junaid · Answer

I could get something like this with background gradient brush

Junaid · Answer

with bit tweaking

Junaid · Answer

``` 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 · Answer

works without issues on my old phone 10

Dragos Rachieru · Answer

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 · Answer

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