Skip to content

Latest commit

 

History

History
159 lines (102 loc) · 6.12 KB

Readme.md

File metadata and controls

159 lines (102 loc) · 6.12 KB
Raw

🌞 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.



banner

Release API Twitter

Table of Contents

Example

Iscreen

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

Shadows

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

HighlightsExample

Stroke

NeumorphicCardView NeumorphicConstraintLayout
Enable Stroke enableStroke layout_enableStroke
Stroke Color stroke_color stroke_color
Stroke Width stroke_width stroke_width

Modify the Parameters Programmatically

  • In case of NeumorphicConstraintLayout, the parameters are set to each of the children (Layout Params). Please use the following function on the direct children of the NeumorphicConstraintLayout like this - 
    childView.updateNeumorphicLayoutParams {  
                highlightColor = Color.RED  
                highlightRadius = 107F  
}
  • In case of NeumorphicCardView, you can directly modify the properties of the view itself.

    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.