Comment inclure un thème sombre dans votre application Android

Pour les développeurs, créer une application Android est un processus simple. Concevoir une interface utilisateur attrayante est ce qui est réellement difficile. C'est pourquoi nous avons écrit le guide «Comment concevoir une interface utilisateur pour applications Android qui ne craint pas», destiné aux développeurs qui ont besoin d'inspiration pour créer des interfaces utilisateur simples mais attrayantes. Dans ce guide, nous avons brièvement mentionné l’ajout d’un thème du mode nuit / nuit à vos applications. Dans ce guide, nous vous expliquerons ce thème.

L'ajout d'un thème de mode nuit / nuit à votre application peut constituer une excellente option pour vos utilisateurs: cela permet de préserver la batterie et de réduire considérablement les risques pour les yeux la nuit. Un fond blanc sur du texte noir, ou toute combinaison de couleurs «vives» dans votre interface utilisateur, est très stressant pour les yeux, en particulier la nuit. Ainsi, un fond sombre avec un texte plus clair est beaucoup moins stressant et moins nocif pour les yeux. C'est pourquoi de nombreuses applications populaires ont commencé à inclure un thème sombre - YouTube et Reddit, bien que Facebook ne l'ait toujours pas publié après en avoir promis une de retour. Mai.

Si vous souhaitez ajouter facilement un mode sombre pouvant être basculé à votre application Android, suivez ce guide Appuals et commentez-le en cas de problème!

Création des attributs XML

Vous devez d’abord créer un fichier d’attributs XML qui gérera les thèmes. C'est bien mieux que d'inclure deux ensembles de ressources dans votre APK pour deux thèmes différents, et donc de gonfler la taille de votre APK, car Android peut modifier de manière native les couleurs des attributs via ce XML.

Ainsi, dans le dossier "Ressources" de votre application, créez un fichier nommé attrs.xml et ajoutez ces lignes ( il s'agit d'attributs pouvant être stylés):

Avant Lollipop, nous ne pouvions pas spécifier d'attributs pour les tirables, nous devions donc spécifier les identifiants de ressources pour les tirables. Toutefois, ce n'est plus le cas.

Ajouter les styles

Pour que cela fonctionne, nous devons créer deux styles distincts qui partagent la même base. Le premier sera évidemment votre thème principal 'léger', et le second sera votre thème 'sombre'.

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

Voici les styles actuels pour une activité donnée:

 # F4F4F6 # 33343B 

Vous devez spécifier l'un de ces thèmes dans le manifeste pour l'activité de l'application, qui dans ce cas est FeedActivity.

Styliser les vues

Voici un exemple de stylisation de vos vues - dans cet exemple, il s’agit d’une erreur de redirection «Page non trouvée».

Comment activer le changement de thème dynamique

Le moyen le plus efficace et le plus efficace d'activer le changement de thème dynamique consiste à charger la valeur SharedPreference utilisée pour stocker le paramètre dans l'instance de l'application à l'aide du modèle Singleton, ce qui signifie que nous n'aurons pas à le faire au début de chaque activité.

 classe publique App étend Application {public statique final String TAG = "App"; booléen privé isNightModeEnabled = false; @Override public void onCreate () {super.onCreate (); // Nous chargeons ici l'état du mode nuit SharedPreferences mPrefs = PreferenceManager.getDefaultSharedPreferences (this); this.isNightModeEnabled = mPrefs.getBoolean (“NIGHT_MODE”, false); } public boolean isNightModeEnabled () {return isNightModeEnabled; } public void setIsNightModeEnabled (booléen isNightModeEnabled) {this.isNightModeEnabled = isNightModeEnabled; }} 

Etant donné que cette instance est lancée avant toute autre chose, elle vous permet d’appeler quand vous le souhaitez la méthode isNightModeEnabled () Boolean, dans toute activité appartenant à l’application une fois ouverte.

 public final class FeedActivity étend 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); }} 

Toutefois, si vous souhaitez appliquer un thème différent de celui spécifié dans le fichier manifeste, vous devez le faire avant d' appeler la méthode onCreate () parente.

Définition de l'état à l'aide d'AppCompat

AppCompat est vraiment utile pour un grand nombre de choses, et dans ce cas, nous allons l'utiliser pour définir l'état du mode. Cela signifie que vous n'avez plus besoin d'utiliser l'instance d'application pour créer un état mis en cache, réduisant ainsi le fardeau de la mémoire cache de l'application ( bien que de très petite marge ).

 AppCompatDelegate .setDefaultNightMode (AppCompatDelegate.MODE_NIGHT_YES); 

Ici, vous pouvez soit utiliser:

  • AppCompatDelegate.MODE_NIGHT_YES

    AppCompatDelegate.MODE_NIGHT_NO

    AppCompatDelegate.MODE_NIGHT_AUTO

Récupération de l'état

 AppCompatDelegate.getDefaultNightMode (); public final class FeedActivity étend 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); }} 

Cela devrait être le cas - vous pouvez continuer à personnaliser et à peaufiner les valeurs à votre guise, mais ce guide est une excellente introduction pour vous permettre de commencer à inclure un thème sombre natif dans votre application Android.

Des Articles Intéressants