Neumorphism Library in Android Studio

Neumorphism is a design concept used to make soft widgets based on object shadows. It uses highlights and shadows to create elements that appear to be floating above the surface. In other words, the object seems to extrude from the background. 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.

How to Use in Android Application?

We will be building an application here using the Neumorphism Library where we will only add two buttons to our app. One button will be in flat mode and one in pressed mode. Let’s build it.

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. The code for that has been given in both Java and Kotlin Programming Language for Android.

Step 2: Add the Required Dependencies

Navigate to the Gradle Scripts > build.gradle(Module:app) and Add the Below Dependency in the Dependencies section.

implementation 'com.github.fornewid:neumorphism:0.3.0'

Add the Support Library in your settings.gradle File. This library Jitpack is a novel package repository. It is made for JVM so that any library which is present in Github and Bitbucket can be directly used in the application.

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()
        
        // add the following
        maven { url "https://jitpack.io" }
    }
}

After adding this Dependency, Sync the Project and now we will move towards its implementation.

Step 3: Working with activity_main.xml

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"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <soup.neumorphism.NeumorphButton
        android:id="@+id/Button1"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:layout_margin="30dp"
        android:textSize="14sp"
        app:neumorph_shapeType="flat"
        app:neumorph_backgroundColor="@color/white"
        android:text="Sample Button 1"
        android:textColor="#308d46"
        android:textStyle="bold"
        android:fontFamily="sans-serif"
        android:layout_marginTop="5dp"
        android:gravity="center"/>

    <soup.neumorphism.NeumorphButton
        android:id="@+id/Button2"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:layout_margin="30dp"
        android:textSize="14sp"
        app:neumorph_shapeType="pressed"
        app:neumorph_backgroundColor="@color/white"
        android:text="Sample Button 2"
        android:textColor="#308d46"
        android:textStyle="bold"
        android:fontFamily="sans-serif"
        android:layout_marginTop="5dp"
        android:gravity="center"/>
</LinearLayout>

Step 4: Change the StatusBar Color

In the values/themes.xml folder, change the StatusBar Color using the below code snippet.

<item name="android:statusBarColor" tools:targetApi="l">#308d46</item>

Step 5: Working with the MainActivity File

Go to the MainActivity File and refer to the following code. Below is the code for the MainActivity File. Comments are added inside the code to understand the code in more detail.

Kotlin

import android.os.Bundle
import android.widget.Button
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val button1 = findViewById<Button>(R.id.Button1)
        val button2 = findViewById<Button>(R.id.Button2)

        button1.setOnClickListener {
            Toast.makeText(this, "Button 1 was clicked", Toast.LENGTH_SHORT).show()
        }

        button2.setOnClickListener {
            Toast.makeText(this, "Button 2 was clicked", Toast.LENGTH_SHORT).show()
        }
    }
}

Java

import android.os.Bundle;
import android.widget.Button;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Button button1 = findViewById(R.id.Button1);
        Button button2 = findViewById(R.id.Button2);

        button1.setOnClickListener(v -> Toast.makeText(MainActivity.this, "Button 1 was clicked", Toast.LENGTH_SHORT).show());

        button2.setOnClickListener(v -> Toast.makeText(MainActivity.this, "Button 2 was clicked", Toast.LENGTH_SHORT).show());
    }
}

Output: