Construye una aplicación móvil sencilla con Material Design: crea una pantalla de inicio de sesión

Spanish (Español) translation by Ana Paulina Figueroa (you can also view the original English article)

Material Design es un sistema de diseño que ayuda a los equipos a crear experiencias digitales de alta calidad. Reúne estilo, interacción y movimiento para crear jerarquía, significado y continuidad en toda la aplicación.

Material Design viene con componentes de Material para Android, que son necesarios para garantizar que los desarrolladores generen hermosos diseños. En este tutorial obtendrás una descripción general de varios de estos componentes de Android y crearás una página de inicio de sesión usando Material Design.

La página de inicio de sesión contendrá los siguientes componentes:

El logotipo de la aplicación
Los campos de texto de nombre de usuario y contraseña
Un botón para iniciar sesión
Un enlace para restablecer la contraseña

Requisitos previos

Conocimientos básicos sobre el desarrollo en Android
Android Studio (obtén más información aquí si aún no lo tienes)
Un emulador de Android o un dispositivo físico

Android

Cómo comenzar a crear aplicaciones Android

Ashraff Hathibelagal

Comienzo

Para crear un nuevo proyecto en Android Studio, selecciona la Actividad vacía y haz clic en Siguiente. Escribe un nombre, elige una ubicación y selecciona un nivel de API. Haz clic en Finalizar para crear el proyecto.

Agrega las dependencias del proyecto

Navega al archivo build.gradle del módulo de la aplicación y agrega la Biblioteca de soporte MDC de Android, como se muestra a continuación. Luego sincroniza el proyecto.

1	api 'com.google.android.material:material:1.1.0-alpha06'

El diseño de la actividad principal

Ahora editaremos el diseño de la actividad principal, main_activity.xml. La actividad principal contiene un ConstraintLayout simple que actúa como contenedor para el componente TextView.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

ConstraintLayout proporciona una interfaz con la funcionalidad de arrastrar y soltar que te permite colocar un widget determinado en relación con otro. Puedes restringir un widget en el eje horizontal y en el vertical.

Tema y colores de AppCompat

De forma predeterminada, el tema de nuestra aplicación está configurado como Theme.MaterialComponents.DayNight.DarkActionBar. Cambiémoslo a Theme.Appcompact.Light.DarkActionBar. El archivo theme.xml también define otros colores, como se muestra a continuación.

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.RUBBY" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->

        <item name="colorOnBackground">@color/white</item>
    </style>
</resources>

El sistema de color nos permite cambiar rápidamente el esquema de colores de toda la aplicación.

colorPrimary y colorSecondary son los colores de tu marca. colorSecondary proporciona más formas de acentuar partes seleccionadas de tu interfaz de usuario.
colorPrimaryVariant y colorSecondaryVariant son tonos más claros o más oscuros de colorPrimary y colorSecondary.
colorOnPrimary se usa para darle un tinte a los elementos mostrados encima de los colores primarios, como el texto y los iconos.
colorOnSecondary se usa para darle un tinte a los elementos mostrados encima de los colores secundarios, como el texto y los iconos.
colorBackground es el color de fondo de tu aplicación.

El sistema de color de Material Design tiene como objetivo crear armonía en las aplicaciones. Los estándares de Google describen cómo crear una paleta de colores destinada a mejorar la experiencia del usuario. El siguiente diagrama muestra un ejemplo de una paleta de colores que se puede utilizar con Material Design.

Cómo usar la paleta de colores de Material Design

Al elegir los colores para tu aplicación, es recomendable limitarlos a tres tonos primarios y un color secundario. El color primario es el color que aparece con mayor frecuencia en las pantallas y los componentes de tu aplicación. Un color secundario es opcional y brinda contraste a tu aplicación. También puedes usar un color primario para proporcionar contraste. El color secundario debería ser usado para acciones específicas como las siguientes:

Campos de texto y cursores
Botones flotantes
Selección de texto
Barras de progreso
Controles de selección, botones y controles deslizantes
Enlaces

La interfaz de usuario a continuación muestra una representación del uso correcto del color en Material Design.

Componentes de Material Design

Como se mencionó anteriormente en el tutorial, las aplicaciones hechas con Material Design usan componentes de este último. Entre algunos de estos componentes se encuentran los siguientes:

Menús y barra de herramientas de Android
Botones de acción flotantes (BAF), snackbars y CoordinatorLayout
Etiquetas flotantes
AppBar
Barra de herramientas colapsante
Cajón y menús de navegación
Animaciones de Android
RecyclerView y CardView

Comencemos agregando el logotipo usando el componente ImageView de Material Design. Elimina el TextView y agrega lo siguiente a main_activity.xml.

 <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/logo"
        android:layout_width="0dp"
        android:layout_height="250dp"
        android:layout_margin="10dp"
        android:layout_marginTop="44dp"
        android:background="@drawable/logo"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.473"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

A continuación, agrega los campos de texto de nombre de usuario y contraseña. Usaremos el componente de campo de texto de Material Design, que incluye una función integrada que muestra una etiqueta flotante y mensajes de error.

 <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/text_username"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="52dp"
        android:layout_marginEnd="8dp"
        android:backgroundTint="#FFFFFF"
        android:hint="@string/username"
        android:inputType="text"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/logo" />

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/password"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="32dp"
        android:layout_marginEnd="8dp"
        android:hint="@string/password"
        android:inputType="textPassword"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/text_username"
        app:layout_constraintVertical_bias="0.0" />

El atributo android:inputType="textPassword" oculta el texto de entrada cuando alguien está escribiendo la contraseña.

No olvides agregar los recursos de tipo cadena correspondientes a los campos de texto en el archivo strings.xml.

<resources>
    <string name="app_name">RUBBY</string>
    <string name="username">Username</string>
    <string name="password">Password</string>
</resources>

Configura un recurso vectorial

Los recursos vectoriales te permiten configurar imágenes con un solo gráfico vectorial. Agreguemos recursos vectoriales para los campos de texto de nombre de usuario y contraseña. Ve a Dibujable > Nuevo > Recurso vectorial y elige una imagen prediseñada de persona para el campo de texto de nombre de usuario.

Repite el mismo proceso y selecciona un candado para el campo de texto de contraseña.

Ahora se han creado dos archivos XML en la carpeta drawable (dibujable), y puedes usar el archivo dibujable con el atributo android:drawableStart, como se muestra a continuación.

<com.google.android.material.textfield.TextInputEditText
    
    android:id="@+id/username"
    android:drawableTint="#D500F9"
    android:drawableStart="@drawable/person"
    
    />


 <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/password"
        android:drawableStart="@drawable/lock"
        android:drawableTint="#D500F9"
        
        />

La aplicación ahora debería verse así.

A continuación agrega el botón Iniciar sesión. Usaremos el componente Button de Material Design, que viene con un efecto de ondulación de tinta integrado.

    <com.google.android.material.button.MaterialButton
        android:id="@+id/login_button"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:text="@string/login"
        app:backgroundTint="@color/purple_200"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/password"
        app:layout_constraintVertical_bias="0.287" />

Por último, agrega el TextView de contraseña olvidada debajo del botón de inicio de sesión.

    <com.google.android.material.textview.MaterialTextView
        android:id="@+id/forgot_password"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:autoLink="web"
        android:text="@string/forgot_password"
        android:textColorLink="#00B0FF"
        android:textSize="22sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/login_button"
        app:layout_constraintVertical_bias="0.347" />

Fondo redondo

Creemos un fondo redondo para los elementos. Ve a Dibujable > Nuevo recurso dibujable y agrega lo siguiente.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#F5F5F8"/> <!-- this one is ths color of the Rounded Button -->
<corners
    android:bottomRightRadius="10dp"
    android:bottomLeftRadius="10dp"
    android:topLeftRadius="10dp"
    android:topRightRadius="10dp"/>
</shape>

Agrega el fondo a los campos de texto y al botón.

<com.google.android.material.textfield.TextInputEditText
    .............................. 
    android:id="@+id/username"
    android:background="@drawable/round_button"
    ............./>
<com.google.android.material.textfield.TextInputEditText
    .............................. 
    android:id="@+id/password"
    android:background="@drawable/round_button"
    ............./>
<com.google.android.material.button.MaterialButton
      ...................
        android:id="@+id/login_button"
        android:background="@drawable/round_button"
    ...................
        />


La aplicación final debería verse así:

Conclusión

En este tutorial, has aprendido algunos fundamentos de Material Design y has descubierto cómo aplicar colores en este último para que se ajusten a tu marca. La clave para una aplicación hermosa en Material Design radica en unir diferentes elementos mientras sigues sus principios. Para obtener más información, consulta los siguientes artículos: