68747470733a2f2f692e696d6775722e636f6d2f744b5a6541774f2e706e67
68747470733a2f2f692e696d6775722e636f6d2f744b5a6541774f2e706e67


Synth is CRED’s built-in library for using neumorphic components in your app.

What actually is new morphism? It’s an impressionistic style that plays with light, shadow, and depth to create a digital experience inspired by the physical world. That’s the definition anyway. We encourage you to try it out to see what you can make of it. If you create anything with Synth, please let us know. We are excited to see where you take it.

A note for the curious: If you want to learn more about Synth, here is a post that describes the concept and philosophy of CRED.

For iOS, check out Synth-iOS

To install

You can install Synth by adding this to your build.gradle file:

dependencies { implementation 'club.cred.android:synth:1.0.0'
}

Usage and SDK restrictions

To use Synth, the top-level layout that contains the Synth Views must specify:

android:clipChildren="false"

Synth only renders neumorphic components on devices running API 28 (Pie) or higher. This is because Synth uses it internally BlurMaskFilter To render shadows and lights drawn outside the view limits, you can easily align Synth Views with other views.

The problem under API 28 is to be made BlurMaskFilter At work we have to use hardware acceleration for the view which cuts off the shadows and highlights. We could solve this by adding padding to the views (similar to CardView) but not doing so due to alignment issues.

Instead, we decided to introduce a “compatible” version of all of our views that would provide a simple solid color background for viewing on devices under API 28.

Soft button

The soft button renders the raised neumorphic platform on which the text is drawn. This elevated platform can be customized in two ways:

  1. By specifying a color for the platform, the synthesizer tries to calculate the light and dark shadow colors
<club.cred.synth.views.SynthButton app:neuButtonType="elevated_soft" app:neuPlatformColor="@color/button_platform_color" ... />
  1. By providing a complete look and feel for all aspects of the elevated platform
<club.cred.synth.views.SynthButton app:neuButtonType="elevated_soft" ... />
<style name="button_platform_appearance"> <item name="neuLightShadowColor">...</item> <item name="neuDarkShadowColor">...</item> <item name="neuFillStartColor">...</item> <item name="neuFillEndColor">...</item> <item name="neuFillPressedStartColor">...</item> <item name="neuFillPressedEndColor">...</item> <item name="neuBorderStartColor">...</item> <item name="neuBorderEndColor">...</item> <item name="neuBorderPressedStartColor">...</item> <item name="neuBorderPressedEndColor">...</item>
</style>

Flat button

The flat button makes a flat surface over the raised neumorphic platform. This flat surface can be customized in two ways:

  1. By specifying a color for the surface, the synthesizer tries to calculate the gradients, edges, etc. of the surface
<club.cred.synth.views.SynthButton app:neuButtonType="elevated_flat" app:neuFlatButtonColor="@colo/button_surface_color" app:neuPlatformAppearance="@style/button_platform_appearance" ... />
  1. By providing a complete appearance for all aspects of the flat surface
<club.cred.synth.views.SynthButton app:neuButtonType="elevated_flat" app:neuFlatButtonAppearance="@style/button_flat_appearance" app:neuPlatformAppearance="@style/button_platform_appearance" ... />
<style name="button_flat_appearance"> <item name="neuButtonStartColor">...</item> <item name="neuButtonEndColor">...</item> <item name="neuButtonBorder1StartColor">...</item> <item name="neuButtonBorder1EndColor">...</item> <item name="neuButtonBorder2StartColor">...</item> <item name="neuButtonBorder2EndColor">...</item> <item name="neuButtonPressedDarkShadowColor">...</item>
</style>

Image button

The image button is simply an image view with a neumorphic platform

<club.cred.synth.views.SynthImageButton app:neuButtonType="elevated_soft" app:srcCompat="@drawable/ic_chevron_left" ... />

Add drawing elements to buttons

You can add a character to a button (to the left of the text). Synth renders a neumorphic pit on which the drawable will be rendered. This pit can be customized in two ways:

  1. If you don’t specify anything, the synthesizer will either do the neuPlatformColor (if it’s a soft button) or neuFlatButtonColor (if it’s a flat button) and calculate the gradient colors and the pressed colors.
<club.cred.synth.views.SynthButton app:neuButtonType="elevated_soft" app:neuButtonDrawable="@drawable/ic_plus" app:neuButtonDrawablePitRadius="20dp" app:neuPlatformColor="@color/button_platform_color" .. or .. app:neuFlatButtonColor="@color/button_surface_color" ... />
  1. By providing a complete look and feel for all aspects of the symbol pit
<club.cred.synth.views.SynthButton app:neuButtonType="elevated_flat" app:neuButtonDrawable="@drawable/ic_plus" app:neuButtonDrawablePitRadius="20dp" app:neuButtonIconAppearance="@style/button_icon_appearance" ... />
<style name="button_icon_appearance"> <item name="neuFillStartColor">...</item> <item name="neuFillEndColor">...</item> <item name="neuFillPressedStartColor">...</item> <item name="neuFillPressedEndColor">...</item> <item name="neuButtonCompatColor">...</item>
</style>

All button attributes

attributedescriptionvalue
app:neuButtonTypeType of buttonelevated_flat or elevated_soft
app:neuButtonRadiusCorner radius of the buttonDimensions
app:neuPlatformColorColor of the neumorphic platformcolour
app:neuPlatformAppearanceAppearance of a neumorphic platformStyle resource
app:neuFlatButtonColorFlat button surface colorcolour
app:neuFlatButtonAppearanceAppearance of the flat button surfaceStyle resource
app:neuButtonDrawableLeft icon drawing resourcedrawable resource
app:neuButtonDrawablePitRadiusRadius of the pit behind the iconDimensions
app:neuButtonIconAppearanceAppearance of the pit behind the symbolStyle resource
app:neuButtonCompatColorColor of the button on compatible devicescolour

  • PitView and ElevatedView are simple views that can be used to simulate an embossed or embossed neumorphic platform
  • They are not ViewGroups so ideally they can be used in a ConstraintLayout with other views limited to that PitView or ElevatedView.
  • To use them freely with your views, PitDrawable and ElevatedDrawable can be programmatically set as the background for your views.

PitView

PitView Shadows can be specified in two ways:

  1. By specifying a color for the pit, the synthesizer tries to calculate the shadows of the pit
<club.cred.synth.views.PitView app:pitColor="@color/pit_color" app:neuCornerRadius="14dp" ... />
  1. By providing a complete appearance for all aspects of the pit
<club.cred.synth.views.PitView app:pitViewAppearance="@style/pit_view_appearance" app:neuCornerRadius="14dp" ... />
<style name="pit_view_appearance"> <item name="neuLightShadowColor">...</item> <item name="neuDarkShadowColor">...</item> <item name="softEdgeColor">...</item> <item name="neuCompatColor">...</item>
</style>

PitView attributes

attributedescriptionvalue
app:pitColorColor of the pit from which shadow colors are calculatedcolour
app:pitViewAppearanceAppearance of the pitStyle resource
app:neuCornerRadiusCorner radius of the pitDimensions
app:pitClipTypeEdge (s) of the pit to be cut off (no shadows or corner arcs are drawn)no_clip, top, bottom, left, right, left_right, top_bottom
app:pitDepthDepth of the pitDimensions

ElevatedView

ElevatedView Internally uses the same neumorphic platform used to draw the buttons. Set the appearance and shadows of the ElevatedViewthe same attributes of the soft button can be used:

  1. By specifying app:neuPlatformColor, synth calculates the shadows and gradients of the view.
  2. By specifying the complete appearance with app:neuPlatformAppearance (like soft button).

ElevatedView attributes

attributedescriptionvalue
app:neuPlatformColorElevated View Colorcolour
app:neuPlatformAppearanceAppearance of the elevated view (like soft button)Style resource
app:neuCornerRadiusElevated View Corner RadiusDimensions
app:neuShadowOffsetShadow offsetDimensions

Min SDK

We support a minimum SDK of 21. However, the neumorphic components will only be rendered appropriately on devices with SDK version 28 or higher.

Contribute

Pull inquiries are welcome! We would like to help improve this library. Browse open questions to find things that need work. If you have a feature request or bug, please open a new issue so we can follow up.

Contributors

Synth would not have been possible without the input from CRED’s design and front-end teams. Specifically:

License

Copyright 2020 Dreamplug Technologies Private Limited.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

LEAVE A REPLY

Please enter your comment!
Please enter your name here