Come includere un tema scuro nella tua app Android

Per gli sviluppatori, creare un'app per Android è un processo semplice: progettare un'interfaccia utente accattivante è ciò che è effettivamente difficile. Ecco perché abbiamo scritto la guida "Come progettare un'interfaccia utente per app Android che non fa schifo", per gli sviluppatori che hanno bisogno di ispirazione nella creazione di interfacce utente semplici ma accattivanti. In quella guida abbiamo brevemente menzionato l'aggiunta di un tema della modalità notte / buio alle tue app e in questa guida ti guideremo attraverso di essa.

L'aggiunta di un tema in modalità notte / oscura alla tua app può essere un'ottima opzione per i tuoi utenti: consente di risparmiare la durata della batteria ed è molto più facile per gli occhi di notte. Uno sfondo bianco su testo nero o qualsiasi combinazione di colori "brillanti" nell'interfaccia utente è davvero stressante per gli occhi, soprattutto di notte. Pertanto, uno sfondo scuro con testo più chiaro è molto meno stressante e dannoso per gli occhi, motivo per cui molte app popolari hanno iniziato a includere un tema scuro: YouTube e Reddit più di recente, anche se Facebook non ha ancora pubblicato il loro dopo aver promesso di tornare a Potrebbe.

Se desideri aggiungere facilmente una modalità oscura commutabile alla tua app Android, segui questa guida Appuals e commenta se riscontri problemi!

Creazione degli attributi XML

Per prima cosa devi creare un file di attributi XML che gestirà il tema. Questo è molto meglio che includere due set di risorse nel tuo APK per due temi diversi, e quindi gonfiare le dimensioni dell'APK, poiché Android può cambiare nativamente i colori degli attributi attraverso questo XML.

Quindi, nella cartella 'risorse' della tua app, crea un file chiamato attrs.xml e aggiungi queste righe ( questi sono attributi stilizzabili):

Prima di Lollipop non potevamo specificare gli attributi per i disegni, quindi abbiamo dovuto specificare gli ID delle risorse per i disegni. Tuttavia, non è più così.

Aggiunta degli stili

Per farlo funzionare, dobbiamo creare due stili separati che condivideranno la stessa base. Il primo sarà ovviamente il tuo tema principale 'leggero', e il secondo sarà il tuo tema 'scuro'.

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

Ecco gli stili effettivi per una determinata attività:

 # F4F4F6 # 33343B 

Devi specificare uno di questi temi nel Manifest per l'attività dell'app, che in questo caso è FeedActivity.

Stilizzazione delle viste

Ecco un esempio di stilizzare le visualizzazioni: in questo esempio, si tratta di un errore di reindirizzamento "Pagina non trovata".

Come abilitare la commutazione dinamica dei temi

Il modo migliore e più efficiente per abilitare la commutazione dinamica dei temi è caricare il valore SharedPreference che viene utilizzato per memorizzare l'impostazione nell'istanza dell'applicazione utilizzando il modello Singleton, il che significa che non dovremo farlo all'inizio di ogni attività.

 App di classe pubblica estende l'Applicazione {public static final String TAG = "App"; private booleano isNightModeEnabled = false; @Override public void onCreate () {super.onCreate (); // Carichiamo qui lo stato della modalità notturna SharedPreferences mPrefs = PreferenceManager.getDefaultSharedPreferences (this); this.isNightModeEnabled = mPrefs.getBoolean (“NIGHT_MODE”, false); } pubblico booleano isNightModeEnabled () {return isNightModeEnabled; } vuoto pubblico setIsNightModeEnabled (booleano isNightModeEnabled) {this.isNightModeEnabled = isNightModeEnabled; }} 

Poiché questa istanza viene avviata prima di ogni altra cosa, ti consente di chiamare isNightModeEnabled () booleano ogni volta che vuoi, in qualsiasi attività appartenente all'app una volta che è stata aperta.

 la classe finale pubblica FeedActivity estende AppCompatActivity {stringa final statica privata TAG = "FeedActivity"; @Override protetto void onCreate (Bundle savedInstanceState) {if (MyApplication.getInstance (). IsNightModeEnabled ()) {setTheme (R.style.FeedActivityThemeDark); } super.onCreate (savedInstanceState); setContentView (R.layout.activity_feed); }} 

Tuttavia, se si desidera applicare un tema diverso da quello specificato nel file manifest, è necessario farlo prima di chiamare il metodo genitore onCreate ().

Impostazione dello stato tramite AppCompat

AppCompat è davvero utile per una vasta gamma di cose e in questo caso lo useremo per impostare lo stato della modalità. Ciò significa che non è più necessario utilizzare l'istanza dell'app per creare uno stato memorizzato nella cache, riducendo così il gonfiore della cache dell'app ( anche se con un margine molto piccolo ).

 AppCompatDelegate .setDefaultNightMode (AppCompatDelegate.MODE_NIGHT_YES); 

Qui puoi usare:

• AppCompatDelegate.MODE_NIGHT_YES

  AppCompatDelegate.MODE_NIGHT_NO

  AppCompatDelegate.MODE_NIGHT_AUTO

Recupero dello stato

 AppCompatDelegate.getDefaultNightMode (); la classe finale pubblica FeedActivity estende AppCompatActivity {stringa final statica privata TAG = "FeedActivity"; @Override protetto void onCreate (Bundle savedInstanceState) {if (AppCompatDelegate.getDefaultNightMode () == AppCompatDelegate.MODE_NIGHT_YES) {setTheme (R.style.FeedActivityThemeDark); } super.onCreate (savedInstanceState); setContentView (R.layout.activity_feed); }} 

Dovrebbe essere così: puoi continuare a personalizzare e modificare i valori a tuo piacimento, ma questa guida è un'ottima introduzione per iniziare a includere un tema scuro nativo nella tua app Android.