Home

Awesome

SSAndroidNeumorphicKit

SSNeumorphicKit is to build Neumorphism design UI in Android.

Kotlin Version Platform API

Demo

FlatBasinPressed
<img src="images/ssneumorphic_flatview.png" width="200" height="400"><img src="images/ssneumorphic_basinview.png" width="200" height="400"><img src="images/ssneumorphic_pressedview.png" width="200" height="400">
LightDark
<img src="images/ssneumorphic_flatview.png" width="280" height="600"><img src="images/ssneumorphic_flatview_dark.png" width="280" height="600">
<img src="images/floatingActionButtonClickAnim.gif" width="280" height="600">

Features

Gradle Dependency

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}
dependencies {
	implementation 'com.github.SimformSolutionsPvtLtd:SSAndroidNeumorphicKit:1.0.0'
}

Attributes

AttributeDescriptionDefault
ss_neumorphic_backgroundColorSet background color#EFEEEE
ss_neumorphic_strokeColorSet stroke colorN/A
ss_neumorphic_strokeWidthSet stroke width0dp
ss_neumorphic_shapeTypeSet shape typeflat
ss_neumorphic_insetSet all sides inset10dp
ss_neumorphic_insetStartSet start inset10dp
ss_neumorphic_insetEndSet end inset10dp
ss_neumorphic_insetTopSet top inset10dp
ss_neumorphic_insetBottomSet bottom inset10dp
ss_neumorphic_shadowElevationSet elevation of the shadow6dp
ss_neumorphic_shadowColorLightSet light shadow color#ffffff
ss_neumorphic_shadowColorDarkSet dark shadow color#d9d9d9
ss_neumorphic_noShadowSet to hide shadowfalse
ss_neumorphic_shapeAppearanceSet shape appearance of the componentShapeAppearance.SSNeumorphic.ComponentName

Usage

<!--  Apply Widget.SSNeumorphic.CardView.Clickable style for click effect.  -->
<com.simformsolutions.ssneumorphic.component.SSNeumorphicCardView
        android:id="@+id/neumorphicCardView"
        style="@style/Widget.SSNeumorphic.CardView"
        android:layout_width="200dp"
        android:layout_height="200dp"
        app:ss_neumorphic_shapeAppearance="@style/ShapeAppearance.MyShape" />

<!--  styles.xml  -->
<style name="ShapeAppearance.MyShape">
    <item name="ss_neumorphic_cornerFamily">rounded</item>
    <item name="ss_neumorphic_cornerRadius">8dp</item>
    <item name="ss_neumorphic_cornerRadiusTopLeft">22dp</item>
    <item name="ss_neumorphic_cornerRadiusBottomRight">22dp</item>
</style>

Find this library useful? :heart:

iOS Library

Awesome Mobile Libraries

Credit

This library was inspired by fornewid/neumorphism

License

Copyright 2022 Simform Solutions

   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.