{"id":20185502,"url":"https://github.com/cred-club/synth-android","last_synced_at":"2025-04-04T08:08:08.483Z","repository":{"id":40585366,"uuid":"328967854","full_name":"CRED-CLUB/synth-android","owner":"CRED-CLUB","description":"Synth is CRED's inbuilt library for using Neumorphic components in your app.","archived":false,"fork":false,"pushed_at":"2021-03-30T07:39:24.000Z","size":347,"stargazers_count":1011,"open_issues_count":10,"forks_count":106,"subscribers_count":21,"default_branch":"master","last_synced_at":"2025-03-28T07:07:31.436Z","etag":null,"topics":["android","android-library","design","neumorphism","synth","ui"],"latest_commit_sha":null,"homepage":"https://blog.cred.club/team-cred/design/world-meet-neumorphism-open-sourcing-our-ui-framework/","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/CRED-CLUB.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-01-12T11:38:30.000Z","updated_at":"2025-03-10T02:57:00.000Z","dependencies_parsed_at":"2022-07-13T16:44:23.337Z","dependency_job_id":null,"html_url":"https://github.com/CRED-CLUB/synth-android","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CRED-CLUB%2Fsynth-android","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CRED-CLUB%2Fsynth-android/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CRED-CLUB%2Fsynth-android/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CRED-CLUB%2Fsynth-android/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CRED-CLUB","download_url":"https://codeload.github.com/CRED-CLUB/synth-android/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247142066,"owners_count":20890652,"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":["android","android-library","design","neumorphism","synth","ui"],"created_at":"2024-11-14T03:13:35.839Z","updated_at":"2025-04-04T08:08:08.459Z","avatar_url":"https://github.com/CRED-CLUB.png","language":"Kotlin","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Synth\nSynth is CRED's inbuilt library for using Neumorphic components in your app.\n\nWhat really is Neumorphism? It's an impressionistic style, playing with light, shadow, and depth to create a digital experience inspired by the physical world. That's the definition anyway. Our recommendation is you try it out to see what you make of it. If you do create something with Synth, let us know. We're excited to see where you take it.  \n\nA note for the curious: if you wish to learn more about Synth, we have a post detailing the concept and CRED's philosophy behind it [here](https://blog.cred.club/team-cred/design/world-meet-neumorphism-open-sourcing-our-ui-framework/).\n\nFor iOS, checkout [Synth-iOS](https://github.com/CRED-CLUB/synth-ios)\n\n![Banner](https://i.imgur.com/tKZeAwO.png \"Banner\")\n\n## Install\nYou can install synth by adding this to your build.gradle file:\n\n```\ndependencies {\n  implementation 'club.cred.android:synth:1.0.0'\n}\n```\n\n## Usage \u0026 SDK Limitations\n\nTo use synth, the parent layout which contains the synth views must specify:\n\n```xml\nandroid:clipChildren=\"false\"\n```\n\nSynth renders neumorphic components only on devices running API 28 (Pie) or later. This is because Synth internally uses [`BlurMaskFilter`](https://developer.android.com/reference/android/graphics/BlurMaskFilter) to render shadows and highlights which are drawn outside of the view bounds — this allows you to align Synth views with other views easily.\n\nThe issue below API 28, is, to make `BlurMaskFilter` work, we need to use [hardware acceleration](https://developer.android.com/guide/topics/graphics/hardware-accel) on the view which causes the shadows and highlights to be clipped. We could solve for this by adding padding to the views (similar to how CardView does it) but chose not to because of alignment issues.\n\nIn lieu of this, we decided to introduce \"compat\" version of all our views which render a simple single colored background on the view on devices below API 28.\n\n# Buttons\n\n## Soft button\n![Soft Button](https://i.imgur.com/ih0WqFz.png \"Soft Button\")\n\nSoft button renders the elevated neumorphic platform on which the text is drawn. this elevated platform can be customized in two ways:\n1. By specifying a color for the platform, synth will attempt to compute the light and dark shadow colors \n```xml\n\u003cclub.cred.synth.views.SynthButton\n    app:neuButtonType=\"elevated_soft\"\n    app:neuPlatformColor=\"@color/button_platform_color\"\n    ... /\u003e\n```\n\n2. By specifying a complete appearance for all aspects of the elevated platform\n```xml\n\u003cclub.cred.synth.views.SynthButton\n    app:neuButtonType=\"elevated_soft\"\n    ... /\u003e\n    \n\u003cstyle name=\"button_platform_appearance\"\u003e\n    \u003citem name=\"neuLightShadowColor\"\u003e...\u003c/item\u003e\n    \u003citem name=\"neuDarkShadowColor\"\u003e...\u003c/item\u003e\n    \u003citem name=\"neuFillStartColor\"\u003e...\u003c/item\u003e\n    \u003citem name=\"neuFillEndColor\"\u003e...\u003c/item\u003e\n    \u003citem name=\"neuFillPressedStartColor\"\u003e...\u003c/item\u003e\n    \u003citem name=\"neuFillPressedEndColor\"\u003e...\u003c/item\u003e\n    \u003citem name=\"neuBorderStartColor\"\u003e...\u003c/item\u003e\n    \u003citem name=\"neuBorderEndColor\"\u003e...\u003c/item\u003e\n    \u003citem name=\"neuBorderPressedStartColor\"\u003e...\u003c/item\u003e\n    \u003citem name=\"neuBorderPressedEndColor\"\u003e...\u003c/item\u003e\n\u003c/style\u003e\n```\n\n## Flat button\n\n![Flat Button](https://i.imgur.com/tgVOK5L.png \"Flat Button\")\n\nFlat button renders a flat surface on top of the elevated neumorphic platform. This flat surface can be customized in two ways:\n1. By specifying a color for the surface, synth will attempt to compute the gradients, borders, etc of the surface\n```xml\n\u003cclub.cred.synth.views.SynthButton\n    app:neuButtonType=\"elevated_flat\"\n    app:neuFlatButtonColor=\"@colo/button_surface_color\"\n    app:neuPlatformAppearance=\"@style/button_platform_appearance\" \n    ... /\u003e\n```\n\n2. By specifying a complete appearance for all aspects of the flat surface\n```xml\n\u003cclub.cred.synth.views.SynthButton\n    app:neuButtonType=\"elevated_flat\"\n    app:neuFlatButtonAppearance=\"@style/button_flat_appearance\"\n    \n    app:neuPlatformAppearance=\"@style/button_platform_appearance\" \n    ... /\u003e\n    \n\u003cstyle name=\"button_flat_appearance\"\u003e\n    \u003citem name=\"neuButtonStartColor\"\u003e...\u003c/item\u003e\n    \u003citem name=\"neuButtonEndColor\"\u003e...\u003c/item\u003e\n    \u003citem name=\"neuButtonBorder1StartColor\"\u003e...\u003c/item\u003e\n    \u003citem name=\"neuButtonBorder1EndColor\"\u003e...\u003c/item\u003e\n    \u003citem name=\"neuButtonBorder2StartColor\"\u003e...\u003c/item\u003e\n    \u003citem name=\"neuButtonBorder2EndColor\"\u003e...\u003c/item\u003e\n    \u003citem name=\"neuButtonPressedDarkShadowColor\"\u003e...\u003c/item\u003e\n\u003c/style\u003e\n```\n\n## Image button\n\n![Image Button](https://i.imgur.com/eP17O6M.png \"Image Button\")\n\nImage button is simply an image view with a neumorphic platform\n\n```xml\n\u003cclub.cred.synth.views.SynthImageButton\n    app:neuButtonType=\"elevated_soft\"\n    app:srcCompat=\"@drawable/ic_chevron_left\"\n    ... /\u003e\n```\n\n## Adding drawable to buttons\n\n![Drawable Button](https://i.imgur.com/Bnjb5Cj.png \"Drawable Button\")\n\nYou can add a drawable to a button (to the left of the text). Synth will render a neumorphic pit on which the drawable is rendered. This pit can be customized in two ways:\n\n1. By not specifying anything, synth will take either the `neuPlatformColor` (if it's a soft button) or `neuFlatButtonColor` (if it's a flat button) and compute the gradient colors and pressed colors.\n\n```xml\n\u003cclub.cred.synth.views.SynthButton\n    app:neuButtonType=\"elevated_soft\"\n    app:neuButtonDrawable=\"@drawable/ic_plus\"\n    app:neuButtonDrawablePitRadius=\"20dp\"\n    \n    app:neuPlatformColor=\"@color/button_platform_color\"\n    .. or ..\n    app:neuFlatButtonColor=\"@color/button_surface_color\"\n    ... /\u003e\n```\n\n2. By specifying a complete appearance for all aspects of the icon pit\n```xml\n\u003cclub.cred.synth.views.SynthButton\n    app:neuButtonType=\"elevated_flat\"\n    app:neuButtonDrawable=\"@drawable/ic_plus\"\n    app:neuButtonDrawablePitRadius=\"20dp\"\n    \n    app:neuButtonIconAppearance=\"@style/button_icon_appearance\"\n    ... /\u003e\n    \n\u003cstyle name=\"button_icon_appearance\"\u003e\n    \u003citem name=\"neuFillStartColor\"\u003e...\u003c/item\u003e\n    \u003citem name=\"neuFillEndColor\"\u003e...\u003c/item\u003e\n    \u003citem name=\"neuFillPressedStartColor\"\u003e...\u003c/item\u003e\n    \u003citem name=\"neuFillPressedEndColor\"\u003e...\u003c/item\u003e\n    \u003citem name=\"neuButtonCompatColor\"\u003e...\u003c/item\u003e\n\u003c/style\u003e\n```\n\n## All button attributes\n| Attribute | Description | Value |\n|--|--|--|\n|`app:neuButtonType`| type of the button | `elevated_flat` or `elevated_soft` |\n|`app:neuButtonRadius` | corner radius of button | dimension |\n| `app:neuPlatformColor` | color of neumorphic platform | color |\n| `app:neuPlatformAppearance` | appearance of neumorphic platform | style resource |\n| `app:neuFlatButtonColor` | color of flat button surface | color |\n| `app:neuFlatButtonAppearance` | appearance of flat button surface | style resource |\n| `app:neuButtonDrawable` | drawable resource of left icon | drawable resource |\n| `app:neuButtonDrawablePitRadius` | radius of the pit behind the icon | dimension |\n| `app:neuButtonIconAppearance` | appearance of the pit behind the icon | style resource |\n| `app:neuButtonCompatColor` | color of button on compat devices | color |\n\n\n# PitView and ElevatedView\n\n![Pit and Elevated Views](https://i.imgur.com/BVirv0g.png \"Pit and Elevated Views\")\n\n- `PitView` and `ElevatedView` are simple Views that can be used to simulate a debossed or embossed neumorphic platform\n-  They are not ViewGroups so ideally they can be used in a `ConstraintLayout` with other Views that are constrained to the `PitView` or `ElevatedView`.\n- To use these freely with your views, `PitDrawable` and `ElevatedDrawable` can be set as background for your Views programmatically.\n\n## PitView\n`PitView` shadows can be specified in two ways:\n1. By specifying a color for the pit, synth will attempt to compute the shadows of the pit\n```xml\n\u003cclub.cred.synth.views.PitView\n  app:pitColor=\"@color/pit_color\"  \n  app:neuCornerRadius=\"14dp\"\n  ... /\u003e\n```\n\n2. By specifying a complete appearance for all aspects of the pit\n```xml\n\u003cclub.cred.synth.views.PitView\n  app:pitViewAppearance=\"@style/pit_view_appearance\"  \n  app:neuCornerRadius=\"14dp\"\n  ... /\u003e\n    \n\u003cstyle name=\"pit_view_appearance\"\u003e\n    \u003citem name=\"neuLightShadowColor\"\u003e...\u003c/item\u003e\n    \u003citem name=\"neuDarkShadowColor\"\u003e...\u003c/item\u003e\n    \u003citem name=\"softEdgeColor\"\u003e...\u003c/item\u003e\n    \u003citem name=\"neuCompatColor\"\u003e...\u003c/item\u003e\n\u003c/style\u003e\n```\n\n### PitView attributes\n\n| attribute | description | value |\n|--|--|--|\n| `app:pitColor`| color of pit from which shadows colors will be computed | color |\n| `app:pitViewAppearance` | appearance of pit | style resource |\n| `app:neuCornerRadius` | corner radius of pit | dimension |\n| `app:pitClipType` | edge(s) of pit which should be clipped (no shadows or corner arc will be drawn) | `no_clip`, `top`, `bottom`, `left`, `right`, `left_right`, `top_bottom` |\n| `app:pitDepth` | depth of pit | dimension |\n\n## ElevatedView\n\n`ElevatedView` internally uses the same neumorphic platform that is used to draw the buttons. To specify the appearance and shadows of the `ElevatedView`, the same attributes  of soft button can be used:\n1. By specifying `app:neuPlatformColor`, synth will compute the shadows and gradients of the view.\n2. By specifying the complete appearance using `app:neuPlatformAppearance` (same as soft button).\n\n### ElevatedView attributes\n\n| attribute | description | value |\n|--|--|--|\n| `app:neuPlatformColor`| color of elevated view | color |\n| `app:neuPlatformAppearance` | appearance of the elevated view (same as soft button) | style resource |\n| `app:neuCornerRadius` | corner radius of the elevated view | dimension |\n| `app:neuShadowOffset` | shadow offset | dimension |\n\n## Min SDK\n\nWe support a minimum SDK of 21. But the neumorphic components will be rendered appropriately only on devices running SDK version 28 or above.\n\n## Contributing\n\nPull requests are welcome! We'd love help improving this library. Feel free to browse through open issues to look for things that need work. If you have a feature request or bug, please open a new issue so we can track it.\n\n## Contributors\n\nSynth would not have been possible if not for the contributions made by CRED's design and frontend teams. Specifically:\n- Rishab Singh Bisht — [Twitter](https://twitter.com/rishabh1310) | [Github](https://github.com/rishabhsinghbisht) | [Linkedin](https://www.linkedin.com/in/rishabh-singh-bisht-b7550938/)\n- Nikhil Panju — [Twitter](https://twitter.com/nikhilpanju) | [Github](https://github.com/nikhilpanju) | [Linkedin](https://www.linkedin.com/in/nikhilpanju/)\n- Madhur Kapadia — [Twitter](https://twitter.com/madhurkapadia) | [Github](https://github.com/madhurkapadia) | [Linkedin](https://www.linkedin.com/in/madhurkapadia)\n- Siddharth Kumar — [Twitter](https://twitter.com/itsiddharth_) | [Linkedin](https://www.linkedin.com/in/itssiddharth/)\n- Hari Krishna\n\n## License\n\n```\nCopyright 2020 Dreamplug Technologies Private Limited.\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n   http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcred-club%2Fsynth-android","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcred-club%2Fsynth-android","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcred-club%2Fsynth-android/lists"}