¿Cómo crear aplicaciones de temas oscuros y materiales usando Style en Android?

Para aumentar el tráfico de usuarios de la aplicación de Android, es necesario ajustar el tema y el estilo de la aplicación de Android. En el desarrollo de aplicaciones móviles de hoy en día, también es necesario tener en cuenta la apariencia de la aplicación. Una característica importante en las necesidades del usuario de la aplicación es el tema oscuro. El tema predeterminado para los dispositivos Android era oscuro hasta Android lollipop (5.0), pero Android Q se lanzó en el tercer trimestre de 2019. La mayoría de las aplicaciones implementaron su versión de tema oscuro de la aplicación. En este artículo, se ilustra cómo implementar la versión del tema Material Dark de la aplicación de Android.

¿Por qué tema oscuro?

Los temas oscuros reducen la luminancia emitida por las pantallas de los dispositivos móviles, lo que reduce la fatiga visual. Manteniendo también el mínimo contraste de color. Esto también ayuda en el diseño funcional de la aplicación. Consume menos energía de la batería, ajustándose a la condición actual de luz. Los dispositivos con pantallas OLED pueden beneficiarse de los temas oscuros. Lo que es más importante, hay más fanáticos de la versión del tema oscuro de la aplicación.

Comprender la diferencia entre estilos y temas.

• Los desarrolladores de Android son testigos de la ambigüedad en estilos y temas. La razón es que en Android solo hay nombres de etiqueta <style> , no hay ninguna etiqueta <theme> disponible.
• El estilo es una colección de atributos que definen la apariencia de una sola vista. Los atributos de estilo son la fuente, el color, el tamaño, el color de fondo, etc. Por ejemplo, el tamaño de la fuente puede ser diferente para el encabezado y el cuerpo.
• El tema , por el contrario, se aplica a toda la aplicación, actividad o jerarquía de vista, no solo para vistas individuales. Los temas también pueden aplicar estilos a elementos que no son de vista, como la barra de estado, el fondo de la ventana, etc. Por ejemplo, colorPrimary se aplica a todos los botones de acción flotantes o botones normales de toda la aplicación. Uno puede obtener la diferencia en la siguiente imagen.

• La imagen de arriba puede ver claramente la diferencia entre los estilos y el tema. Donde el estilo se aplica para la vista particular dentro del grupo Vista principal, pero el tema se aplica a todo el grupo de vista principal.
• Pero los estilos y los temas van de la mano. Por ejemplo, el botón de acción flotante y los botones normales en los que se puede hacer clic pueden tener diferentes colores, como colorPrimary y colorSecondary, respectivamente.

Propiedades de tematización de materiales

Las 3 propiedades principales para lograr un tema de material funcional en la aplicación de Android son:

1. Color
2. Tipografía
3. Forma
4. Componentes de diseño de materiales

• Uno puede obtener la información básica sobre estas propiedades puede consultar Introducción al diseño de materiales en Android
• Uno puede haber visto en la actualización reciente de Android Studio (4.1 y superior) Las propiedades de color se hacen diferentes. Esos son:

Variantes de colores primarios:

Variantes de colores secundarios:

Colores de la superficie:

Colores para errores:

Tipografía:

Hay variantes tipográficas predefinidas y bien diseñadas del texto en el sistema Tipografía de diseño de materiales. Echa un vistazo a la siguiente imagen:

Estos son, por defecto, los atributos que vienen con el tema Material Design y se pueden aplicar directamente a TextViews según el contexto del texto en la aplicación.

Pasos para implementar la variante Dark Theme de la Aplicación

Paso 1: Cree un proyecto de Android Studio de actividad vacío:

Cree un proyecto de Android Studio de actividad vacío y seleccione Kotlin como lenguaje de programación. Consulte Android | ¿Cómo crear/comenzar un nuevo proyecto en Android Studio? .

Paso 2: Agrega la dependencia requerida

• Agregue la siguiente dependencia al archivo Gradle de nivel de aplicación y sincronice el proyecto.
• Sin embargo, esta dependencia se agrega de forma predeterminada cuando se crea el nuevo proyecto de Android Studio (versión 4.0 y superior).

implementación ‘com.google.android.material:material:1.3.0-alpha04’

Paso 3: agregar los colores de marca principal y secundario

• Necesitamos decidir principalmente el color primario y secundario, y sacar el código de color. En este caso, el Color Primario es el verde y como complemento se encuentra el rojo_200 y el rojo_700 como colores Secundarios de la marca.
• Uno puede hacer sus propias muestras de color y combinación usando this o this .
• Invoque los siguientes colores para implementar lo mismo en la aplicación dentro del archivo colors.xml.

<?xml version="1.0" encoding="utf-8"?>
<resources>
  
    <!--Primary colors of the application-->
    <color name="green_200">#98d5b0</color>
    <color name="green_light">#e5f5eb</color>
    <color name="green_500">#18ad62</color>
    <color name="green_700">#008c4c</color>
  
    <!--Secondary brand color of the application-->
    <color name="red_200">#eb8baf</color>
    <color name="red_700">#b31058</color>
  
    <!--Other surface colors and red for error color-->
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
    <color name="red">#B00020</color>
  
</resources>

Paso 4: trabajar con los archivos themes.xml

• En primer lugar, aplicar el tema DayNight DarkActionBar tanto al tema claro como al tema oscuro de la aplicación de la siguiente manera:

<style name=”Theme.GFGArticle” parent=”Theme.MaterialComponents.DayNight.DarkActionBar”>

• Siguiendo el Sistema de color proporcionado por las Pautas de diseño de materiales como se mencionó anteriormente, a continuación se muestra el sistema de color aplicado para el tema claro y el tema oscuro de la aplicación.
• Los siguientes valores\theme.xml se aplican cuando la aplicación está bajo el tema claro.

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.GFGArticle" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/green_500</item>
        <item name="colorPrimaryVariant">@color/green_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. -->
    </style>
</resources>

• Los siguientes valores-night\themes.xml se aplican cuando la aplicación tiene un tema oscuro.

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

• Eche un vistazo a las siguientes imágenes donde residen estos archivos dentro del Proyecto Android Studio.

Paso 5: trabajar con el archivo activity_main.xml

• El diseño principal de la aplicación consiste en el sistema Material Design Type. Y un botón de acción flotante extendida y un botón de acción flotante normal para demostrar el color de la marca secundaria de la aplicación.
• Todas las vistas de texto en el diseño heredan el estilo del sistema de tipo Material. Por ejemplo, “estilo=”@estilo/TextAppearance.MaterialComponents.Headline4”.

<?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"
    tools:context=".MainActivity"
    tools:ignore="HardcodedText">
  
    <!--Switch button to toggle between the Light and Dark Mode-->
    <com.google.android.material.switchmaterial.SwitchMaterial
        android:id="@+id/switchMaterial"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:checked="false"
        android:text="SWITCH TO DARK MODE"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
  
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="4dp"
        android:clipToPadding="false"
        android:orientation="vertical"
        android:padding="16dp"
        app:layout_constraintBottom_toTopOf="@+id/extendedFloatingActionButton"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/switchMaterial">
  
        <!--TextView with the Headline 4 as Material type system-->
        <TextView
            style="@style/TextAppearance.MaterialComponents.Headline4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="HEADLINE 4" />
  
        <!--TextView with the Headline 5 as Material type system-->
        <TextView
            style="@style/TextAppearance.MaterialComponents.Headline5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="HEADLINE 5" />
  
        <!--TextView with the Headline 6 as Material type system-->
        <TextView
            style="@style/TextAppearance.MaterialComponents.Headline6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="HEADLINE 6" />
  
        <!--TextView with the Subtitle 1 as Material type system-->
        <TextView
            style="@style/TextAppearance.MaterialComponents.Subtitle1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="SUBTITLE 1" />
  
        <!--TextView with the Subtitle 2 as Material type system-->
        <TextView
            style="@style/TextAppearance.MaterialComponents.Subtitle2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="SUBTITLE 2" />
  
        <!--TextView with the Body 1 as Material type system-->
        <TextView
            style="@style/TextAppearance.MaterialComponents.Body1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Body 1" />
  
        <!--TextView with the Body 2 as Material type system-->
        <TextView
            style="@style/TextAppearance.MaterialComponents.Body2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Body 2" />
  
        <!--TextView with the Buttons as Material type system-->
        <!--However this type system is applied to text inside the buttons only-->
        <TextView
            style="@style/TextAppearance.MaterialComponents.Button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TEXT VIEW FOR BUTTON" />
  
        <!--TextView with the Caption as Material type system-->
        <TextView
            style="@style/TextAppearance.MaterialComponents.Caption"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Caption" />
  
        <!--TextView with the Overline texts as Material type system-->
        <TextView
            style="@style/TextAppearance.MaterialComponents.Overline"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="OVERLINE" />
  
        <!--Buttons to demonstrate, how Material dark theme changes
             the primary color's contrast
            when switched from light theme to dark theme-->
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="BUTTON 1" />
  
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="BUTTON 2" />
  
    </LinearLayout>
  
    <!--Floating action buttons to demonstrate how the 
        secondary brand color of the application can be used-->
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="16dp"
        android:src="@drawable/ic_add"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />
  
    <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
        android:id="@+id/extendedFloatingActionButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginBottom="16dp"
        android:text="EXTENDED FAB"
        app:icon="@drawable/ic_add"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent" />
  
</androidx.constraintlayout.widget.ConstraintLayout>

Interfaz de usuario de salida:

Paso 6: trabajar con el archivo MainActivity.kt

Dentro del archivo MainActivity.kt se ha manejado el detector de cambio verificado del botón de cambio de material. Y si el dispositivo no admite el tema oscuro de la aplicación, este proyecto en sí admite la versión de tema oscuro para todo tipo de API.

package com.aditya.gfgarticle
  
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.appcompat.app.AppCompatDelegate
import com.google.android.material.switchmaterial.SwitchMaterial
  
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
  
        // Instance for the material switch
        val switchMaterial: SwitchMaterial = findViewById(R.id.switchMaterial)
  
        // handle the checked changes for the material switch
        switchMaterial.setOnCheckedChangeListener { buttonView, isChecked ->
            when (isChecked) {
                // if checked toggle to dark mode
                true -> AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)
  
                // if unchecked toggle back to light mode
                false -> AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO)
            }
        }
    }
}

Producción: