Cómo incluir un tema oscuro en tu aplicación de Android

Para los desarrolladores, crear una aplicación de Android es un proceso fácil: diseñar una interfaz de usuario atractiva es lo que es realmente difícil. Es por eso que escribimos la guía "Cómo diseñar una interfaz de usuario de aplicación de Android que no apesta", para desarrolladores que necesitan algo de inspiración para crear interfaces de usuario simples pero atractivas. En esa guía mencionamos brevemente agregar un tema de modo oscuro / nocturno a sus aplicaciones, y en esta guía lo guiaremos a través de él.

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 fácil para la vista por la noche. Un fondo blanco en texto negro, o cualquier combinación de colores 'brillantes' en su interfaz de usuario, es realmente estresante para los ojos, particularmente en la noche. Por lo tanto, un fondo oscuro con texto más claro es mucho menos estresante y dañino para los ojos, 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 prometerlo nuevamente. Mayo.

Si desea agregar fácilmente un modo oscuro conmutable a su aplicación de Android, siga esta guía de Appuals y comente si tiene algún problema.

Crear los atributos XML

Primero debe crear un archivo de atributos XML que manejará el tema. Esto es mucho mejor que incluir dos conjuntos de recursos en su APK para dos temas diferentes, y así hinchar el tamaño de su APK, ya que Android puede cambiar de forma nativa los colores de los atributos a través de este XML.

Entonces, en la carpeta 'recursos' de su aplicación, cree un archivo llamado attrs.xml y agregue estas líneas ( estos son atributos con estilo):

Antes de Lollipop, no podíamos especificar atributos para los elementos dibujables, por lo que tuvimos que especificar los ID de recursos para los elementos extraíbles; 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 principal "claro", y el segundo será su tema "oscuro".

 # F4F4F6 # 96F4F4F6 #FFFF # F2F2F3 @ drawable / i_light_plholder # 33343B / item> # 8033343B # 28292e # F2F2F3 @ drawable / i_dark_pholder 

Estos son los estilos reales para una actividad determinada:

 # F4F4F6 # 33343B 

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

Estilizando las Vistas

Aquí hay un ejemplo de estilización de sus vistas: en este ejemplo, se trata de un error de redireccionamiento "Página no encontrada".

Cómo habilitar el cambio de tema dinámico

La mejor y más eficiente manera de habilitar el cambio dinámico de tema es cargar el valor de referencia compartida que se utiliza para almacenar la configuración en la instancia de la aplicación utilizando el patrón Singleton, lo que significa que no tendremos que hacerlo al comienzo de cada actividad.

 La aplicación de clase pública extiende la Aplicación {public static final String TAG = "Aplicación"; privado booleano isNightModeEnabled = falso; @Override public void onCreate () {super.onCreate (); // Cargamos el estado del Modo nocturno aquí SharedPreferences mPrefs = PreferenceManager.getDefaultSharedPreferences (this); this.isNightModeEnabled = mPrefs.getBoolean ("NIGHT_MODE", falso); } public boolean isNightModeEnabled () {return isNightModeEnabled; } public void setIsNightModeEnabled (boolean isNightModeEnabled) {this.isNightModeEnabled = isNightModeEnabled; }} 

Debido a que esta instancia se inicia antes que cualquier otra cosa, le permite llamar a isNightModeEnabled () Boolean cuando lo desee, en cualquier actividad que pertenezca a la aplicación una vez que se haya abierto.

 feedActivity de clase final pública amplía 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 que se especifica en el archivo de manifiesto, debe hacerlo antes de llamar al método primario onCreate ().

Establecer el estado usando AppCompat

AppCompat es realmente útil para una amplia gama de cosas y, en este caso, lo usaremos para establecer el estado del modo. Esto significa que ya no necesita usar la instancia de la aplicación para crear un estado almacenado en caché, reduciendo así la acumulación 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 (); feedActivity de clase final pública amplía 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 ajustando valores a su gusto, pero esta guía es una excelente introducción para comenzar a incluir un tema oscuro nativo en su aplicación de Android.