{"id":13789491,"url":"https://github.com/CuriousNikhil/neumorphic-compose","last_synced_at":"2025-05-12T06:31:41.992Z","repository":{"id":40778229,"uuid":"372238883","full_name":"CuriousNikhil/neumorphic-compose","owner":"CuriousNikhil","description":"Neumorphism UI on Android with Jetpack Compose.","archived":false,"fork":false,"pushed_at":"2021-10-02T12:32:11.000Z","size":644,"stargazers_count":394,"open_issues_count":3,"forks_count":28,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-11-18T04:33:21.083Z","etag":null,"topics":["jetpack-compose","kotlin","kotlin-android","kotlin-library"],"latest_commit_sha":null,"homepage":"","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CuriousNikhil.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-05-30T14:40:55.000Z","updated_at":"2024-11-13T00:32:21.000Z","dependencies_parsed_at":"2022-07-10T22:46:52.583Z","dependency_job_id":null,"html_url":"https://github.com/CuriousNikhil/neumorphic-compose","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CuriousNikhil%2Fneumorphic-compose","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CuriousNikhil%2Fneumorphic-compose/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CuriousNikhil%2Fneumorphic-compose/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CuriousNikhil%2Fneumorphic-compose/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CuriousNikhil","download_url":"https://codeload.github.com/CuriousNikhil/neumorphic-compose/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253687555,"owners_count":21947695,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["jetpack-compose","kotlin","kotlin-android","kotlin-library"],"created_at":"2024-08-03T22:00:24.820Z","updated_at":"2025-05-12T06:31:41.685Z","avatar_url":"https://github.com/CuriousNikhil.png","language":"Kotlin","readme":"# Neumorphism UI with Jetpack Compose\nThis library is an experimentation with [Neumorphism UI](https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6) (New + Skeuomorphism) on Android with **Jetpack Compose**.  \n\n[![](https://img.shields.io/badge/mavencentral-1.0.0--alpha02-brightgreen)]() ![List of Awesome List Badge](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg) [![Awesome Kotlin Badge](https://kotlin.link/awesome-kotlin.svg)](https://github.com/KotlinBy/awesome-kotlin)\n\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://github.com/CuriousNikhil/neumorphic-compose/blob/main/static/complete_screen.png?raw=true\" height=400\u003e\n\u003c/p\u003e\n\n## How to use?\n\n### 1. Add the dependency\n\nAnd your app level `build.gradle`. (Make sure you have compose dependencies as well)\n\n```kotlin\n  implementation(\"me.nikhilchaudhari:composeNeumorphism:1.0.0-alpha02\")\n```\n\n### 2. Use\n\nJust add `modifier = Modifier.neumorphic()` to any of your UI element of Jetpack-Compose (just like you do for other modifiers).\n\n![image](https://user-images.githubusercontent.com/16976114/120097042-12adfe00-c14c-11eb-861c-a826108194d6.png)\n\n\n## How do I configure shape, color, etc.?\n\n### 1. Shapes  \nYou've three basic **Neu** shapes available -   \n1. `Punched`,  2. `Pressed`, 3. `Pot` \n\nThese are not standard names for Neumorphism UI, I just named them based on how they look (at least to me).\n\nAnd you can also configure the corner families of those shapes as **`Oval`** or **`Rounded`** \n\n![image](https://user-images.githubusercontent.com/16976114/120097777-03c94a80-c150-11eb-847b-3a9547f3a56d.png)\n\n```kotlin\nCard(\n  backgroundColor = Color(236, 234, 235),\n  shape = RoundedCornerShape(12.dp),\n  modifier = Modifier\n      .padding(16.dp)\n      .size(300.dp, 100.dp)\n      .neumorphic(\n        neuShape = \n          // Punched shape\n         Punched.Rounded(radius = 8.dp) \n         Punched.Oval()\n\n         // Presssed Shape\n         Pressed.Rounded(radius = 4.dp)\n         Presssed.Oval()\n\n        // Pot shape\n        Pot.Rounded(radius = 8.dp)\n        Pot.Oval()\n      )\n    ){/*card content */} \n```\n\nFor `Rounded` corner-family, you can configure the radius of how much rounded corner you want. The default Neu shape is `Punched.Rounded(radius = 12.dp)`.  \nThe `Punched` shape would work with Cards, Buttons, etc.  \nYou should use `Modifier.clip()` while using `Pressed` shape, because there's known issue of shadow placeents for Pressed shape. Check the sample app for more code snippets.\n\nP.S: Even I'm yet to experiment it with all UI elements.\n\n### 2. Shadows\n\nThe idea of Neumorphism UI is simple, just create two shadows light and dark and draw those around the UI component from top-left and bottom-right corners.  \n**Just make sure you are using the same colors for your Surface and for the UI elements.**\nYou can configure the shadow `insets`, `color` and `elevation`\n\nParams              | Description\n------------------- | -------------\n`lightShadowColor`  | Default value - `Color.White` - Set the light shadow color you want  \n`darkShadowColor`   | Default value - `Color.Gray` - Set the dark shadow color you want.  \n`elevation`         | Default value - `6.dp` - Set the elevation for the shadow. \n`neuInsets`         | Default values - `NeuInsets(6.dp, 6.dp)` - Insets = Horizontal, Vertical - Placements of your shadows i.e How do you want to place your                           | shadows vertically and horizontally. \n`strokeWidth`       | Default value -  `6.dp` - Stroke width of the internal shadows. Stroke width is for only `Pressed` and `Punched`.\n\n\n ```kotlin\n   Button(\n        onClick = { /*TODO*/ },\n        modifier = Modifier\n            .padding(12.dp)\n            .neumorphic(\n                // assing neuShape\n                //...\n                lightShadowColor = Color.White,\n                darkShadowColor = Color.Gray,\n                elevation = 4.dp,\n                strokeWidth: Dp = 6.dp,\n                neuInsets = NeuInsets(6.dp, 6.dp)\n            )\n    ) \n```\n\nThe overall configutation\n![image](https://user-images.githubusercontent.com/16976114/120100461-780aea80-c15e-11eb-9626-10b684f9c982.png)\n\n\n## ToDos \n - [ ] Add `LightSource` option and place the shadows accordingly (It is, by default, top-left right now)\n - [ ] Migrate from RenderScript\n - [ ] Fix clipping and shadow positioning with insets\n - [ ] Update sample app and code with Jetpack-Compose guidelines\n\n## FAQs\n### What's the idea? Is there any performance overhead?\nIdea is simple - just draw the two shadows light and dark around the UI element. I'm using [RenderScript](https://developer.android.com/guide/topics/renderscript/compute) to blur two GradientDrawables. I know it's going to be deprecated in the Android 12. I'll surely update the code to migrate from RenderScript. If Renderscript throws any exception / not able to blur the drawable, I'm using [StackBlur](https://github.com/CuriousNikhil/neumorphic-compose/blob/main/library/src/main/java/me/nikhilchaudhari/library/internal/StackBlur.kt) algorithm from Mario Klingemann as a workaround.\n\n### Does this library work with all the Jetpack Compose UI elements? \nI can't surely say. I'm already experimenting drawing shadow on UIs with Jetpack Compose and improving this library. I request you to try and please help to make it work.\n\n### When can I use this?\nYou can use this right now if you want to play with shiny Neumorphism UI. The library is in alpha and there are some known issues regarding shadow rendering and clipping. Please raise issue if you found any.\n\n## Contribution Guide\nPlease contribute! I'm just getting my hands dirty with Jetpack-Compose.  \nThere is heavy chance that the code may/may not be correct/holding best practices. I request you to contribute/ raise issues/ send PRs so I can learn too.\nYou can use the Github **Discussion** to discuss and ask questions. Or you can reach out to me on Twitter [@CuriousNikhil](https://twitter.com/curiousnikhil). \n\n## License\nLicensed under Apache License, Version 2.0 [here](https://github.com/CuriousNikhil/neumorphic-compose/blob/main/LICENSE)\n","funding_links":[],"categories":["Libraries","Index"],"sub_categories":["UI"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCuriousNikhil%2Fneumorphic-compose","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FCuriousNikhil%2Fneumorphic-compose","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCuriousNikhil%2Fneumorphic-compose/lists"}