How to Use Neumorphic Theme in Android?

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

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    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: