¿Cómo crear un modo oscuro para una aplicación de Android personalizada en Kotlin?

El modo oscuro es una función que le permite cambiar el tema de color de una aplicación o de todo un sistema operativo a negro o algo parecido. Más allá de las alegrías de vigorizar un diseño desgastado, es posible que desee elegir porque hace que mirar la pantalla del dispositivo sea mucho más cómodo y relajante para los ojos. Los valores típicos de píxel durante el modo regular se encuentran entre 200 y 255. Cada píxel que emite luz con un valor de 255 corresponde a la máxima luz posible que puede emitir, proporcionando más potencia. De manera similar, un valor 0 corresponde a la cantidad mínima, lo que corresponde a que no se suministre energía al píxel. Si uno usa un teléfono inteligente que tiene una pantalla OLED y habilita el modo oscuro, también podría ahorrar algo de batería. Por lo tanto, se vuelve esencial para un desarrollador agregar dicha función en la aplicación deseada. Este artículo quiere compartir contigo la implementación del modo oscuro en Android usando las bibliotecas disponibles. El modo oscuro es un ejemplo de optimización de la experiencia del usuario y de la batería. Se puede implementar en cualquier aplicación que desee un desarrollador.kotlin

Acercarse

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 Kotlin como lenguaje de programación.

Paso 2: cambios realizados en el archivo styles.xml

Vaya al archivo res > valores > estilos.xml y cambie el estilo principal a » Tema.AppCompat.DayNight.DarkActionBar «. A continuación se muestra el código completo del archivo styles.xml .

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
  
</resources>

Paso 3: trabajar con el archivo activity_main.xml

Ahora vaya al archivo activity_main.xml que representa la interfaz de usuario de la aplicación y cree un Switch . Este interruptor alternará entre el modo oscuro y el modo normal. actividad_principal.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    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"
    tools:context=".MainActivity">
  
    <!--Create a switch-->
    <Switch
        android:id="@+id/switch1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Enable dark mode"
        tools:ignore="UseSwitchCompatOrMaterialXml" />
  
</RelativeLayout>

Paso 4: trabajar con el archivo MainActivity.kt

Vaya al archivo MainActivity.kt y consulte el siguiente código. MainActivity.kt

import android.os.Bundle
import android.widget.Switch
import androidx.appcompat.app.AppCompatActivity
import androidx.appcompat.app.AppCompatDelegate
  
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
  
        // Declare the switch from the layout file
        val btn = findViewById<Switch>(R.id.switch1)
  
        // set the switch to listen on checked change
        btn.setOnCheckedChangeListener { _, isChecked ->
  
            // if the button is checked, i.e., towards the right or enabled
            // enable dark mode, change the text to disable dark mode
            // else keep the switch text to enable dark mode
            if (btn.isChecked) {
                AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)
                btn.text = "Disable dark mode"
            } else {
                AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO)
                btn.text = "Enable dark mode"
            }
        }
    }
}

Salida: ejecutar en el emulador