🌞 NeumorphismView 🌚
A set of Custom Viewgroup - FrameLayout and Constraintlayout that allows adding shadows/highlights to each of its children. You can customise the highlights, shadows, background color and stroke.
Table of Contents
Example
Installation
repositories {
maven { url 'https://jitpack.io' }
}
dependencies {
implementation 'com.github.thelumiereguy:NeumorphismView-Android:1.5'
} Features
This comes with two custom viewgroups - Framelayout and Constraintlayout. When you just need to add the effect to a single view, use the Framelayout one and if you want to apply the effect to all children, use the Constrantlayout.
There are a few parameters to add a shadow to your view - deltaX, deltaY, color and shadow radius.
-
DeltaX - Offset accross the X-Axis
-
DeltaY - Offset accross the Y-Axis
-
Shadow color - Color for the shadow, duh
-
Shadow radius - The blur radius used to render the layer's shadow
Usage
In case of NeumorphicCardView, the params are set to itself, but in case of NeumorphicConstraintLayout, the params are set to each of the children. (Refer to the example)
Notes -
- To enable preview in the design tab, set the "enable_preview" attribute.
- To avoid the shadow being clipped by the parent view, you'll need to set the padding manually.
Background
| NeumorphicCardView | NeumorphicConstraintLayout | |
|---|---|---|
| BackgroundColor | neu_backgroundColor | layout_neu_backgroundColor |
| BackgroundVerticalPadding | verticalPadding | layout_verticalPadding |
| BackgroundHorizontalPadding | horizontalPadding | layout_horizontalPadding |
| BackgroundCardRadius | cardRadius | layout_cardRadius |
Note -
Background color is compulsory if you want to draw shadows/highlights as they dont work with Transparent color.
Shadows
| NeumorphicCardView | NeumorphicConstraintLayout | |
|---|---|---|
| Enable Shadow | enableShadow | layout_enableShadow |
| DeltaX | shadowDx | layout_shadowDx |
| DeltaY | shadowDy | layout_shadowDy |
| Shadow color | shadowColor | layout_shadowColor |
| Shadow radius | shadowRadius | layout_shadowRadius |
Highlights
| NeumorphicCardView | NeumorphicConstraintLayout | |
|---|---|---|
| Enable Highlights | enableHighlight | layout_enableHighlight |
| DeltaX | highlightDx | layout_highlightDx |
| DeltaY | highlightDy | layout_highlightDy |
| Highlight color | highlightColor | layout_highlightColor |
| Highlight radius | highlightRadius | layout_highlightRadius |
Stroke
| NeumorphicCardView | NeumorphicConstraintLayout | |
|---|---|---|
| Enable Stroke | enableStroke | layout_enableStroke |
| Stroke Color | stroke_color | stroke_color |
| Stroke Width | stroke_width | stroke_width |
Modify the Parameters Programmatically
childView.updateNeumorphicLayoutParams {
highlightColor = Color.RED
highlightRadius = 107F
} Contribute
Feel free to fork this project, to optimise the code or to add new features.
TODO
- Reduce redraw and improve performance
License
Copyright 2020 Piyush Pradeepkumar
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.