Cómo incluir un tema oscuro en tu Android Aplicación

Para los desarrolladores, crear un Android La aplicación es un proceso sencillo; diseñar una interfaz de usuario atractiva es lo realmente difícil. Por eso escribimos la guía “Cómo diseñar un Android App UI That Doesn’t Suck”, para desarrolladores que necesitan algo de inspiración para crear UI simples pero atractivas. En esa guía mencionamos brevemente cómo agregar un tema de modo oscuro/nocturno a sus aplicaciones, y en esta guía lo guiaremos a través de ello.

Agregar un tema de modo oscuro/nocturno a su aplicación puede ser una excelente opción para sus usuarios: ahorra batería y es mucho más agradable a la vista por la noche. Un fondo blanco sobre texto negro, o cualquier combinación de colores “brillantes” en su interfaz de usuario, es realmente estresante para la vista, especialmente de noche. Por lo tanto, un fondo oscuro con texto más claro es mucho menos estresante y dañino para la vista, razón por la cual muchas aplicaciones populares han comenzado a incluir un tema oscuro: YouTube y Reddit más recientemente, aunque Facebook aún no ha publicado el suyo después de haber prometido uno en Puede.

Si desea agregar fácilmente un modo oscuro alternable a su Android aplicación, sigue esta guía de Appuals y comenta si tienes algún problema.

Creando los atributos XML

Primero necesitas crear un archivo de atributos XML que se encargará de la temática. Esto es mucho mejor que incluir dos conjuntos de recursos en su APK para dos temas diferentes y, por lo tanto, aumentar el tamaño de su APK, como Android Puede cambiar de forma nativa los colores de los atributos a través de este XML.

Entonces, en la carpeta ‘recursos’ de tu aplicación, crea un archivo llamado atributos.xml y agrega estas líneas (estos son atributos que se pueden diseñar):

<declare-styleable name="CTAppTheme">
      <attr name=”primaryTextColor” format=”color”/> 
      <attr name=”secondaryTextColor” format=”color”/> 
      <attr name=”dividerColor” format=”color”/>
      <attr name=”backgroundCardColor” format=”color”/> 
      <attr name=”iconPlaceholder” format=”integer”/>
</declare-styleable>

Antes de Lollipop no podíamos especificar atributos para los elementos dibujables, por lo que teníamos que especificar los ID de recursos para los elementos dibujables; sin embargo, este ya no es el caso.

Agregar los estilos

Para que esto funcione, necesitamos crear dos estilos separados que compartirán la misma base. El primero será obviamente su tema “claro” principal y el segundo será su tema “oscuro”.

<!-- Light base activity theme -->
<style name="ActivityTheme.Primary.Base.Light" parent="Theme.AppCompat.NoActionBar">
    <item name="primaryTextColor">#F4F4F6</item>
    <item name="secondaryTextColor">#96F4F4F6</item>
    <item name="backgroundCardColor">#FFFF</item>
    <item name="dividerColor">#F2F2F3</item>
    <item name="iconPlaceholder">@drawable/i_light_plholder</item>
</style>

<!-- Dark base activity theme -->
<style name="ActivityTheme.Primary.Base.Dark"    parent="Theme.AppCompat.NoActionBar">
    <item name="primaryTextColor">#33343B/item>
    <item name="secondaryTextColor">#8033343B</item>
    <item name="backgroundCardColor">#28292e</item>
    <item name="dividerColor">#F2F2F3</item>
    <item name="iconPlaceholder">@drawable/i_dark_pholder</item>
</style>

Estos son los estilos reales para una actividad determinada:

<!-- Specific Feed activity theme -->
<style name="FeedActivityThemeLight" parent="ActivityTheme.Primary.Base.Light">
    <item name="android:windowBackground">#F4F4F6</item>
</style>

<style name="FeedActivityThemeDark" parent="ActivityTheme.Primary.Base.Dark">
    <item name="android:windowBackground">#33343B</item>
</style>

Debes especificar uno de estos temas en el Manifiesto de la actividad de la aplicación, que en este caso es FeedActivity.

Estilizar las vistas

Aquí hay un ejemplo de cómo estilizar sus vistas; en este ejemplo, es para un error de redireccionamiento “Página no encontrada”.

<ImageView
           android:id="@+id/placeHolderAssetImageView"
           android:layout_width="100dp"
           android:layout_height="100dp"
           android:src="
           android:layout_marginBottom="8dp" />

       <TextView
           android:id="@+id/placeHolderTitleTextView"
           android:text="Page not found."
           android:textSize="16dp"
           android:textColor="?attr/primaryTextColor"
           android:layout_margin="16dp" />

Cómo habilitar el cambio dinámico de tema

La mejor y más eficiente manera de habilitar el cambio dinámico de temas es cargar el valor SharedPreference que se usa para almacenar la configuración en la instancia de la Aplicación usando el patrón Singleton, lo que significa que no tendremos que hacerlo al inicio de cada Actividad.

public class App extends Application {
 public static final String TAG = "App";

private boolean isNightModeEnabled = false;

@Override
 public void onCreate() {
 super.onCreate();

// We load the Night Mode state here
 SharedPreferences mPrefs =  PreferenceManager.getDefaultSharedPreferences(this);
 this.isNightModeEnabled = mPrefs.getBoolean(“NIGHT_MODE”, false);
 }

public boolean isNightModeEnabled() {
 return isNightModeEnabled;
 }

public void setIsNightModeEnabled(boolean isNightModeEnabled) {
 this.isNightModeEnabled = isNightModeEnabled;
 }
}

Debido a que esta instancia se lanza antes que nada, le permite llamar isNightModeEnabled() Booleano cuando quieras, en cualquier actividad perteneciente a la app una vez abierta.

public final class FeedActivity extends AppCompatActivity {
 private final static String TAG = “FeedActivity”;

@Override
 protected void onCreate(Bundle savedInstanceState) {
    if (MyApplication.getInstance().isNightModeEnabled()) {
       setTheme(R.style.FeedActivityThemeDark);
    }
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_feed);
 }
}

Sin embargo, si desea aplicar un tema diferente al especificado en el archivo de manifiesto, debe hacerse antes llamando al método padre onCreate().

Configuración del estado mediante AppCompat

AppCompat es realmente útil para una amplia gama de cosas y, en este caso, lo usaremos para configurar el estado del modo. Esto significa que ya no necesita usar la instancia de la aplicación para crear un estado de caché, lo que reduce la sobrecarga de caché de la aplicación (aunque por un margen muy pequeño).

AppCompatDelegate
.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES);

Aquí puedes usar:

• AppCompatDelegate.MODE_NIGHT_YES
  AppCompatDelegate.MODE_NIGHT_NO
  AppCompatDelegate.MODE_NIGHT_AUTO

Recuperando el estado

AppCompatDelegate.getDefaultNightMode();

public final class FeedActivity extends AppCompatActivity {
 private final static String TAG = “FeedActivity”;

@Override
 protected void onCreate(Bundle savedInstanceState) {
    if (AppCompatDelegate.getDefaultNightMode()
    ==AppCompatDelegate.MODE_NIGHT_YES) {
       setTheme(R.style.FeedActivityThemeDark);
    }
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_feed);
 }
}

Eso debería ser todo: puede continuar personalizando y modificando los valores a su gusto, pero esta guía es una excelente introducción para comenzar a incluir un nativo tema oscuro en tu Android aplicación.