Biblioteca de neumorfismos en Android Studio

El neumorfismo es un concepto de diseño utilizado para crear widgets suaves basados ​​en sombras de objetos. Utiliza luces y sombras para crear elementos que parecen flotar sobre la superficie. En otras palabras, el objeto parece sobresalir del fondo. 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.

 

¿Cómo usar en la aplicación de Android?

Construiremos una aplicación aquí usando la Biblioteca de neumorfismo donde solo agregaremos dos botones a nuestra aplicación. Un botón estará en modo plano y otro en modo presionado. Vamos a construirlo.

Implementación paso a paso

Paso 1: crea un nuevo proyecto en Android Studio

Para crear un nuevo proyecto en Android Studio, consulte  Cómo crear/iniciar un nuevo proyecto en Android Studio . El código para eso se proporcionó tanto en Java como en el lenguaje de programación Kotlin para Android.

Paso 2: agregue las dependencias requeridas

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

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

Agregue la biblioteca de soporte en su archivo settings.gradle. Esta librería Jitpack es un novedoso repositorio de paquetes. Está hecho para JVM para que cualquier biblioteca que esté presente en Github y Bigbucket se pueda usar directamente en la aplicación.

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

Después de agregar esta Dependencia, Sincronice el Proyecto y ahora avanzaremos hacia su implementación.

Paso 3: Trabajando con 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 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>

Paso 4: cambia el color de la barra de estado

En la carpeta values/themes.xml , cambie el Color de la barra de estado usando el fragmento de código siguiente.

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

Paso 5: trabajar con el archivo MainActivity

Vaya al archivo MainActivity y consulte el siguiente código. A continuación se muestra el código para el archivo MainActivity. Se agregan comentarios dentro del código para comprender el código con más detalle.

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()
        }
    }
}

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());
    }
}

Producción: