Neumorphic theme is one of the beautiful which is seen used in many of the apps. It is a beautiful theme in which we can add a little elevation to the views of our layout components to make it look beautiful. Below is the screenshot in which you can get to see the sample layout which is made with the help of Neumorphic Theme.
Important Attributes of using Neumorphic Theme
Attributes |
Usage |
---|---|
background_color | this is used to add background color to our view. |
corner_radius | this is used to add corner radius to our view. |
shape | this is used to provide shape to our view. |
state | this is used to change the state of view such as flat, pressed, concave and convex. |
Step by Step Implementation
Step 1: Create a New Project
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.
Step 2: Add dependency and JitPack Repository
Navigate to the Gradle Scripts > build.gradle(Module:app) and add the below dependency in the dependencies section.
implementation ‘com.github.Borutsky:neumorphism-android:1.0.0-alpha01’
Add the JitPack repository to your build file. Add it to your root build.gradle at the end of repositories inside the allprojects{ } section.
allprojects {
repositories {
…
maven { url “https://jitpack.io” }
}
}
After adding this dependency sync your project and now we will move towards its implementation.
Step 3: Working with the activity_main.xml file
Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file.
<? xml version = "1.0" encoding = "utf-8" ?>
< RelativeLayout android:layout_width = "match_parent"
android:layout_height = "match_parent"
android:background = "@color/purple_200"
android:clipChildren = "false"
tools:context = ".MainActivity" >
<!--on below line we are creating a new neumorphic frame layout-->
<!--we are adding radius as 20 and shape as rectangle-->
< com.borutsky.neumorphism.NeumorphicFrameLayout
android:id = "@+id/firstBlock"
android:layout_width = "100dp"
android:layout_height = "100dp"
android:layout_centerHorizontal = "true"
android:layout_marginTop = "100dp"
android:layout_marginBottom = "30dp"
app:background_color = "@color/purple_200"
app:corner_radius = "20dp"
app:shape = "rectangle" >
<!--inside this frame layout we are creating a simple text view-->
< TextView
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_gravity = "center"
android:text = "Press Me"
android:textColor = "@color/white" />
</ com.borutsky.neumorphism.NeumorphicFrameLayout >
< LinearLayout
android:id = "@+id/idLLTwo"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:layout_below = "@id/firstBlock"
android:layout_marginTop = "30dp"
android:clipChildren = "false"
android:gravity = "center"
android:orientation = "horizontal"
android:weightSum = "4" >
<!--on below line we are creating a new neumorphic frame layout-->
<!--we are adding radius as 20 and shape as rectangle-->
< com.borutsky.neumorphism.NeumorphicFrameLayout
android:layout_width = "0dp"
android:layout_height = "80dp"
android:layout_margin = "10dp"
android:layout_weight = "1"
app:background_color = "@color/purple_200"
app:corner_radius = "20dp"
app:shape = "rectangle"
app:state = "flat" >
<!--inside this frame layout we are creating a simple text view-->
< TextView
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_gravity = "center"
android:text = "Flat"
android:textColor = "@color/white" />
</ com.borutsky.neumorphism.NeumorphicFrameLayout >
<!--on below line we are creating a new neumorphic frame layout-->
<!--we are adding radius as 20 and shape as rectangle
in this we are using state as concave-->
< com.borutsky.neumorphism.NeumorphicFrameLayout
android:layout_width = "0dp"
android:layout_height = "80dp"
android:layout_margin = "10dp"
android:layout_weight = "1"
app:background_color = "@color/purple_200"
app:corner_radius = "20dp"
app:shape = "rectangle"
app:state = "concave" >
<!--inside this frame layout we are creating a simple text view-->
< TextView
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_gravity = "center"
android:text = "Concave"
android:textColor = "@color/white" />
</ com.borutsky.neumorphism.NeumorphicFrameLayout >
<!--on below line we are creating a new neumorphic frame layout-->
<!--we are adding radius as 20 and shape as rectangle
in this we are using state as convex-->
< com.borutsky.neumorphism.NeumorphicFrameLayout
android:layout_width = "0dp"
android:layout_height = "80dp"
android:layout_margin = "10dp"
android:layout_weight = "1"
app:background_color = "@color/purple_200"
app:corner_radius = "20dp"
app:shape = "rectangle"
app:state = "convex" >
<!--inside this frame layout we are creating a simple text view-->
< TextView
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_gravity = "center"
android:text = "Convex"
android:textColor = "@color/white" />
</ com.borutsky.neumorphism.NeumorphicFrameLayout >
<!--on below line we are creating a new neumorphic frame layout-->
<!--we are adding radius as 20 and shape as rectangle
in this we are using state as pressed-->
< com.borutsky.neumorphism.NeumorphicFrameLayout
android:layout_width = "0dp"
android:layout_height = "80dp"
android:layout_margin = "10dp"
android:layout_weight = "1"
app:background_color = "@color/purple_200"
app:corner_radius = "20dp"
app:shape = "rectangle"
app:state = "pressed" >
<!--inside this frame layout we are creating a simple text view-->
< TextView
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:layout_gravity = "center"
android:text = "Pressed"
android:textColor = "@color/white" />
</ com.borutsky.neumorphism.NeumorphicFrameLayout >
</ LinearLayout >
</ RelativeLayout >
|
As we are working with the layout file only so we don’t have to add any code in our MainActivity.java file. Now run your app and see the output of the app.
Output: