Home

neomorphism ui android

Tutorial Rocket
neomorphism ui android

Using this: https://github.com/4inodev/Neomorphic-FrameLayout-Android

Gradle Dependency

allprojects {
repositories {
maven { url 'https://jitpack.io' }
}
}

Add the dependency :
implementation 'com.github.4inodev:Neomorphic-FrameLayout-Android:1.03'

colors:

      <color name="background">#e1e6ec</color>
    <color name="highlight">#ffffff</color>
    <color name="shadow_color">#d9dbde</color>



user_login_screen.xml:

<?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="#f1f2f3"
    tools:context=".UserLoginScreen">




    <LinearLayout
        android:padding="10dp"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:layout_gravity="end"
            android:id="@+id/textview_Skip_UserLoginscreen"
            android:textSize="20sp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fontFamily="@font/cerapro_light"
            android:padding="20dp"
            android:text="SKIP"
            />

        <ScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent">

          <LinearLayout
              android:paddingBottom="100dp"
              android:paddingTop="100dp"
              android:layout_gravity="center"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">


             <LinearLayout
                 android:orientation="vertical"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content">

                 <TextView

                     android:paddingStart="10dp"
                     android:fontFamily="@font/cerapro_light"
                     android:text="Welcome"
                     android:textSize="30sp"
                     android:layout_width="match_parent"
                     android:layout_height="wrap_content"/>

                 <TextView
                     android:paddingStart="10dp"
                     android:fontFamily="@font/cerapro_medium"
                     android:text="Sign in to continue"
                     android:textSize="16sp"
                     android:layout_width="match_parent"
                     android:layout_height="wrap_content"/>


             </LinearLayout>

              <com.chinodev.androidneomorphframelayout.NeomorphFrameLayout
                  android:layout_width="match_parent"
                  android:layout_height="wrap_content"
                  app:layout_constraintEnd_toEndOf="parent"
                  app:layout_constraintStart_toStartOf="parent"
                  app:layout_constraintTop_toBottomOf="@+id/textView4"
                  app:neomorph_background_color="@color/background"
                  app:neomorph_corner_radius="10dp"
                  app:neomorph_elevation="6dp"
                  app:neomorph_highlight_color="@color/highlight"
                  app:neomorph_shadow_color="@color/shadow_color"
                  app:neomorph_shadow_type="outer"
                  app:neomorph_view_type="rectangular" >

                  <EditText
                      android:fontFamily="@font/cerapro_medium"
                      android:id="@+id/et_login_emailorphone"
                      android:hint="Username"
                      android:inputType="textEmailAddress"
                      android:background="@drawable/shape_reactangle"
                      android:paddingEnd="20dp"
                      android:paddingStart="20dp"
                      android:layout_width="match_parent"
                      android:layout_height="50dp"/>
              </com.chinodev.androidneomorphframelayout.NeomorphFrameLayout>

              <com.chinodev.androidneomorphframelayout.NeomorphFrameLayout
                  android:layout_width="match_parent"
                  android:layout_height="wrap_content"
                  app:layout_constraintEnd_toEndOf="parent"
                  app:layout_constraintStart_toStartOf="parent"
                  app:layout_constraintTop_toBottomOf="@+id/textView4"
                  app:neomorph_background_color="@color/background"
                  app:neomorph_corner_radius="10dp"
                  app:neomorph_elevation="6dp"
                  app:neomorph_highlight_color="@color/highlight"
                  app:neomorph_shadow_color="@color/shadow_color"
                  app:neomorph_shadow_type="outer"
                  app:neomorph_view_type="rectangular" >

                  <EditText
                      android:fontFamily="@font/cerapro_medium"
                      android:hint="Password"
                      android:inputType="textPassword"
                      android:id="@+id/et_login_password"
                      android:background="@drawable/shape_reactangle"
                      android:paddingEnd="20dp"
                      android:paddingStart="20dp"
                      android:layout_width="match_parent"
                      android:layout_height="50dp"/>


              </com.chinodev.androidneomorphframelayout.NeomorphFrameLayout>

              <TextView
                  android:paddingEnd="10dp"
                  android:fontFamily="@font/cerapro_light"
                android:layout_marginHorizontal="15dp"
                  android:paddingVertical="7dp"
                  android:text="Forgot Password?"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"/>
              <com.chinodev.androidneomorphframelayout.NeomorphFrameLayout
                  android:layout_width="match_parent"
                  android:layout_height="wrap_content"
                  app:layout_constraintEnd_toEndOf="parent"
                  app:layout_constraintStart_toStartOf="parent"
                  app:layout_constraintTop_toBottomOf="@+id/textView4"
                  app:neomorph_background_color="@color/background"
                  app:neomorph_corner_radius="10dp"
                  app:neomorph_elevation="6dp"
                  app:neomorph_highlight_color="@color/highlight"
                  app:neomorph_shadow_color="@color/shadow_color"
                  app:neomorph_shadow_type="outer"
                  app:neomorph_view_type="rectangular" >

                  <androidx.appcompat.widget.AppCompatButton
                      android:id="@+id/btn_login"
                      android:layout_width="match_parent"
                      android:layout_height="wrap_content"
                      android:background="#000000"
                      android:fontFamily="@font/cerapro_medium"
                      android:padding="13dp"
                      android:text="Login"
                      android:textAllCaps="false"
                      android:textColor="@android:color/white"
                      android:textSize="18sp" />

              </com.chinodev.androidneomorphframelayout.NeomorphFrameLayout>
              <LinearLayout
                  android:layout_width="match_parent"
                  android:layout_height="wrap_content"
                  android:layout_marginTop="5dp"
                  android:gravity="center"
                  android:orientation="horizontal">

                  <TextView
                      android:layout_width="wrap_content"
                      android:layout_height="wrap_content"
                      android:fontFamily="@font/cerapro_light"
                      android:text="Don't Have a Account?"
                      android:textColor="@android:color/black"
                      android:textSize="17sp" />

                  <TextView
                      android:id="@+id/sign_up_join_now_Link"
                      android:layout_width="wrap_content"
                      android:layout_height="wrap_content"
                      android:fontFamily="@font/cerapro_medium"
                      android:paddingTop="20dp"
                      android:paddingEnd="25dp"
                      android:paddingBottom="20dp"
                      android:text=" Sign up"
                      android:textColor="@android:color/black"
                      android:textSize="18sp" />
              </LinearLayout>
              
              <LinearLayout
                  android:gravity="center"
                  android:layout_gravity="center"
                  android:orientation="horizontal"
                  android:layout_width="match_parent"
                  android:layout_height="wrap_content">
                  <com.chinodev.androidneomorphframelayout.NeomorphFrameLayout
                      android:layout_width="wrap_content"
                      android:layout_height="wrap_content"
                      app:layout_constraintEnd_toEndOf="parent"
                      app:layout_constraintStart_toStartOf="parent"
                      app:layout_constraintTop_toBottomOf="@+id/textView4"
                      app:neomorph_background_color="@color/background"
                      app:neomorph_corner_radius="10dp"
                      app:neomorph_elevation="6dp"
                      app:neomorph_highlight_color="@color/highlight"
                      app:neomorph_shadow_color="@color/shadow_color"
                      app:neomorph_shadow_type="outer"
                      app:neomorph_view_type="rectangular" >

                      <ImageView
                          android:tint="@android:color/background_dark"
                          android:src="@drawable/facebook_icon_resize"
                          android:padding="10dp"
                          android:layout_width="wrap_content"
                          android:layout_height="wrap_content"/>
                  </com.chinodev.androidneomorphframelayout.NeomorphFrameLayout>

                  <com.chinodev.androidneomorphframelayout.NeomorphFrameLayout
                      android:layout_width="wrap_content"
                      android:layout_height="wrap_content"
                      app:layout_constraintEnd_toEndOf="parent"
                      app:layout_constraintStart_toStartOf="parent"
                      app:layout_constraintTop_toBottomOf="@+id/textView4"
                      app:neomorph_background_color="@color/background"
                      app:neomorph_corner_radius="10dp"
                      app:neomorph_elevation="6dp"
                      app:neomorph_highlight_color="@color/highlight"
                      app:neomorph_shadow_color="@color/shadow_color"
                      app:neomorph_shadow_type="outer"
                      app:neomorph_view_type="rectangular" >
                      <ImageView
                          android:tint="@android:color/background_dark"
                          android:src="@drawable/google_icon_resize"
                          android:padding="10dp"
                          android:layout_width="wrap_content"
                          android:layout_height="wrap_content"/>
                    
                  </com.chinodev.androidneomorphframelayout.NeomorphFrameLayout>


              </LinearLayout>
          </LinearLayout>

        </ScrollView>

    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>




You may like these posts