How to Use Neumorphic Theme in Android? - GeeksforGeeks

21 Apr, 2021
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. 
Attributes
Usage
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:
Android-Animation
Android
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Resource Raw Folder in Android Studio
Flutter - Custom Bottom Navigation Bar
How to Read Data from SQLite Database in Android?
How to Post Data to API using Retrofit in Android?
Retrofit with Kotlin Coroutine in Android
How to Get Current Location in Android?
Android Listview in Java with Example
How to Save Data to the Firebase Realtime Database in Android?
Flexbox-Layout in Android
How to Change the Background Color After Clicking the Button in Android?