¿Cómo usar el tema Neumorphic en Android?

El tema neumórfico es uno de los hermosos que se usan en muchas de las aplicaciones. Es un hermoso tema en el que podemos agregar un poco de elevación a las vistas de nuestros componentes de diseño para que se vea hermoso. A continuación se muestra la captura de pantalla en la que puede ver el diseño de muestra que se realiza con la ayuda de Neumorphic Theme.

Atributos importantes del uso de Neumorphic Theme

Atributos	Uso
color de fondo	esto se usa para agregar color de fondo a nuestra vista.
radio de esquina	esto se usa para agregar radio de esquina a nuestra vista.
forma	esto se utiliza para dar forma a nuestra vista.
estado	esto se usa para cambiar el estado de vista, como plano, presionado, cóncavo y convexo.

Implementación paso a paso

Paso 1: Crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Java como lenguaje de programación.

Paso 2: agregue la dependencia y el repositorio de JitPack

Navegue a Gradle Scripts > build.gradle(Module:app) y agregue la siguiente dependencia en la sección de dependencias.

implementación ‘com.github.Borutsky:neumorfismo-android:1.0.0-alpha01’

Agregue el repositorio de JitPack a su archivo de compilación. Agréguelo a su root build.gradle al final de los repositorios dentro de la sección allprojects{ }.

todos los proyectos {

repositorios {

…

experto {url «https://jitpack.io»}

}

}

Después de agregar esta dependencia, sincronice su proyecto y ahora avanzaremos hacia su implementación.

Paso 3: trabajar con el archivo activity_main.xml

Vaya a la aplicación > res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo activity_main.xml .

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>

Como estamos trabajando solo con el archivo de diseño, no tenemos que agregar ningún código en nuestro archivo MainActivity.java. Ahora ejecute su aplicación y vea el resultado de la aplicación.

Producción:

Publicación traducida automáticamente

Artículo escrito por chaitanyamunje y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Atributos importantes del uso de Neumorphic Theme

Implementación paso a paso

XML

Deja una respuesta Cancelar la respuesta