Como incluir um tema escuro no seu aplicativo Android

Para os desenvolvedores, criar um aplicativo para Android é um processo fácil - projetar uma interface de usuário atraente é o que realmente é difícil. É por isso que escrevemos o guia “Como projetar uma interface do aplicativo Android que não sugue”, para desenvolvedores que precisam de inspiração para criar interfaces de usuário simples, mas atraentes. Nesse guia, mencionamos brevemente a adição de um tema de modo escuro / noturno aos seus aplicativos e, neste guia, orientaremos você.

Adicionar um tema de modo escuro / noturno ao seu aplicativo pode ser uma ótima opção para seus usuários - ele economiza a vida útil da bateria e é muito mais fácil para os olhos à noite. Um fundo branco em texto preto, ou qualquer combinação de cores "brilhantes" na sua interface do usuário, é realmente estressante para os olhos, especialmente à noite. Assim, um fundo escuro com texto mais claro é muito menos estressante e prejudicial aos olhos, e é por isso que muitos aplicativos populares começaram incluindo um tema obscuro - YouTube e Reddit mais recentemente, embora o Facebook ainda não tenha publicado o seu depois de prometer um de volta Maio.

Se você quiser adicionar facilmente um modo escuro selecionável ao seu aplicativo Android, siga este guia de app e comente se tiver algum problema!

Criando os Atributos XML

Primeiro, você precisa criar um arquivo de atributos XML que manipule a temática. Isso é muito melhor do que incluir dois conjuntos de recursos no seu APK para dois temas diferentes e, assim, aumentar o tamanho do APK, já que o Android pode alterar nativamente as cores dos atributos por meio desse XML.

Então, na pasta 'resources' do seu aplicativo, crie um arquivo chamado attrs.xml e adicione essas linhas ( estes são atributos estilizáveis):

Antes do Lollipop, não podíamos especificar atributos para drawables, portanto, precisávamos especificar os IDs de recursos para drawables - no entanto, esse não é mais o caso.

Adicionando os estilos

Para fazer isso funcionar, precisamos criar dois estilos separados que compartilharão a mesma base. O primeiro será, obviamente, o seu principal tema 'luz', e o segundo será o seu tema 'sombrio'.

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

Aqui estão os estilos reais para uma determinada atividade:

 # F4F4F6 # 33343B 

Você precisa especificar um desses temas no Manifesto para a atividade do aplicativo, que nesse caso é o FeedActivity.

Estilizando as vistas

Veja um exemplo de como estilizar suas visualizações - neste exemplo, é um erro de redirecionamento "Página não encontrada".

Como ativar a troca de tema dinâmico

A maneira melhor e mais eficiente de ativar a alternância dinâmica de temas é carregar o valor SharedPreference que é usado para armazenar a configuração na instância do Aplicativo usando o padrão Singleton, o que significa que não precisaremos fazer isso no início de cada atividade.

 public class App estende a aplicação {public static final String TAG = "App"; private boolean isNightModeEnabled = false; @Override public void onCreate () {super.onCreate (); // Carregamos o estado do modo noturno aqui SharedPreferences mPrefs = PreferenceManager.getDefaultSharedPreferences (this); this.isNightModeEnabled = mPrefs.getBoolean (“NIGHT_MODE”, false); } booleano público isNightModeEnabled () {return isNightModeEnabled; } public void setIsNightModeEnabled (booleano isNightModeEnabled) {this.isNightModeEnabled = isNightModeEnabled; }} 

Como essa instância está sendo lançada antes de qualquer outra coisa, ela permite que você chame isNightModeEnabled () como sempre que quiser, em qualquer atividade pertencente ao aplicativo depois de aberta.

 classe final pública FeedActivity estende AppCompatActivity {private final estático String TAG = “FeedActivity”; @Override protected void onCreate (Bundle salvoInstanceState) {if (MyApplication.getInstance (). IsNightModeEnabled ()) {setTheme (R.style.FeedActivityThemeDark); } super.onCreate (savedInstanceState); setContentView (R.layout.activity_feed); }} 

No entanto, se você quiser aplicar um tema diferente daquele especificado no arquivo de manifesto, isso deve ser feito antes de chamar o método pai onCreate ().

Definindo o estado usando AppCompat

O AppCompat é realmente útil para uma grande variedade de coisas e, neste caso, vamos usá-lo para definir o estado do modo. Isso significa que você não precisa mais usar a instância do aplicativo para criar um estado em cache, reduzindo assim o excesso de cache do aplicativo ( embora por uma margem muito pequena ).

 AppCompatDelegate .setDefaultNightMode (AppCompatDelegate.MODE_NIGHT_YES); 

Aqui, você pode usar:

• AppCompatDelegate.MODE_NIGHT_YES

  AppCompatDelegate.MODE_NIGHT_NO

  AppCompatDelegate.MODE_NIGHT_AUTO

Recuperando o Estado

 AppCompatDelegate.getDefaultNightMode (); classe final pública FeedActivity estende AppCompatActivity {private final estático String TAG = “FeedActivity”; @Override protected void onCreate (Bundle salvoInstanceState) {if (AppCompatDelegate.getDefaultNightMode () == AppCompatDelegate.MODE_NIGHT_YES) {setTheme (R.style.FeedActivityThemeDark); } super.onCreate (savedInstanceState); setContentView (R.layout.activity_feed); }} 

Deve ser isso - você pode continuar personalizando e ajustando os valores de acordo com o seu gosto, mas este guia é uma ótima introdução para começar a incluir um tema nativo e sombrio no seu aplicativo para Android.