Researching if it possible to create Neumorphic UI with out-of-the-box functionality of Jetpack Compose
In Neumorphism objects appear to extrude from the background. This effect can be reached by drawing two shadows on the top left and bottom right. The shadows should spread smoothly.
Smooth shadow spreading can be implemented in two ways:
- Gradient shadow
- Blurred shadow
I've implemented sample UI via Jetpack Compose. There is a button NeumorphButton, which listens users actions with pointerInteropFilter. Action events change the button's state ButtonState.
Most challenging issue is to implement shadows smooth spreading.
-
I've created button with RadialGradient, like here. The problem is, that this gradient only for circles, and there is no such out-of-the-box gradients for rounded rectangles.
-
There is a lib neumorphic-compose with blurred shadows. It uses RenderScript which API will be deprecated starting with Android 12 and lib's author plans a migration. Google recommends migrate to Vulkan.
-
Blur feature was also requested in JetpackCompose by developers. You can use it since
1.1.0-alpha03Compose version, anyway it's only supported for Android 12 and above. Attempts to use this Modifier on older Android versions will be ignored. There is a doc.
- Explanation what is a neumorphism is: https://fornewid.medium.com/neumorphism-in-android-9cf15e2122dc
- Neumorphic circle button via RadialGradient: https://proandroiddev.com/compose-snippet-neomorphic-button-7aa7abd43c91
- Jetpack Compose Animation docs: https://developer.android.com/jetpack/compose/animation
- Jetpack Compose Gestures docs: https://developer.android.com/jetpack/compose/gestures
- Google recommendations for migrating from RenderScript: https://developer.android.com/guide/topics/renderscript/migrate