Neomorphism in Android Studio

Neomorphism is used to add a little elevation to the views of our layout components to make it look beautiful. With few steps you can make components look more aesthetic in your android application.

Prerequisites :

In build gradle (app) add the dependency for neomorphism :

implementation 'com.github.Borutsky:neumorphism-android:1.0.0-alpha01'

There are various dependencies avaiable for neomorphism. (My reference : https://github.com/Borutsky/neumorphism-android)

In build.gradle file add :

allprojects {
    repositories {
        google()
        jcenter()
        maven { url "https://jitpack.io" }
    }
}

Maven is just a tool that manages and simplifies how you build your project and things like running tests, managing conflicts, documentation, modularization, and automatically fetching dependencies that your project needs.

Finally for adding neomorphism, create a empty activity and add the bellow given code to the xml file. I have added the various effect to text fields.

<?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.ConstraintLayout
        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="#9dbbe3"
        android:layout_margin="10dp"
        android:clipChildren="false"
        tools:context=".Neomorphism">


        <com.borutsky.neumorphism.NeumorphicFrameLayout
            android:id="@+id/firstBlock"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_marginBottom="30dp"
            app:background_color="#9dbbe3"
            app:corner_radius="20dp"
            app:layout_constraintBottom_toTopOf="@id/secondBlock"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:shape="rectangle">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="press_me" />

        </com.borutsky.neumorphism.NeumorphicFrameLayout>

        <com.borutsky.neumorphism.NeumorphicFrameLayout
            android:id="@+id/secondBlock"
            android:layout_width="300dp"
            android:layout_height="300dp"
            android:clipChildren="false"
            android:text="Hello World!"
            app:background_color="#9dbbe3"
            app:corner_radius="40dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:shape="rectangle"
            app:state="flat">

            <com.borutsky.neumorphism.NeumorphicFrameLayout
                android:layout_width="200dp"
                android:layout_height="200dp"
                android:layout_gravity="center"
                app:background_color="#9dbbe3"
                app:shape="circle"
                app:state="pressed" />

        </com.borutsky.neumorphism.NeumorphicFrameLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="30dp"
            android:clipChildren="false"
            android:gravity="center"
            android:orientation="horizontal"
            app:layout_constraintTop_toBottomOf="@id/secondBlock">

            <com.borutsky.neumorphism.NeumorphicFrameLayout
                android:layout_width="80dp"
                android:layout_height="80dp"
                app:background_color="#9dbbe3"
                app:corner_radius="20dp"
                app:shape="rectangle"
                app:state="flat">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:text="flat" />

            </com.borutsky.neumorphism.NeumorphicFrameLayout>

            <com.borutsky.neumorphism.NeumorphicFrameLayout
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:layout_marginStart="20dp"
                app:background_color="#9dbbe3"
                app:corner_radius="20dp"
                app:shape="rectangle"
                app:state="concave">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:text="concave" />

            </com.borutsky.neumorphism.NeumorphicFrameLayout>

            <com.borutsky.neumorphism.NeumorphicFrameLayout
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:layout_marginStart="20dp"
                app:background_color="#9dbbe3"
                app:corner_radius="20dp"
                app:shape="rectangle"
                app:state="convex">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:text="convex" />

            </com.borutsky.neumorphism.NeumorphicFrameLayout>

            <com.borutsky.neumorphism.NeumorphicFrameLayout
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:layout_marginStart="20dp"
                app:background_color="#9dbbe3"
                app:corner_radius="20dp"
                app:shape="rectangle"
                app:state="pressed">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:text="pressed" />

            </com.borutsky.neumorphism.NeumorphicFrameLayout>


        </LinearLayout>

    </androidx.constraintlayout.widget.ConstraintLayout>

Some of the effects of neomorphism used here are flat, concave, convex, pressed.

This is the final result. You can get this code from my github account : https://github.com/nidhivanjare/Glassmorphism_Neomorphism

Thank You , Happy coding !