Livro 2 - Projeto da Mini-Calculadora

5.2. Personalizando o tema do aplicativo

Para personalizar o tema do aplicativo MiniCalculadora, abra o arquivo styles.xml (ou themes.xml) como ilustrado na figura a seguir. 

Dentro deste arquivo estão todas as configurações do tema do aplicativo. Na template atual do Android Studio o tema padrão aparece com informações em branco e se configura para não mostrar a app bar (isso pode ser visto na especificação NoActionBar). Basicamente, o arquivo apenas cria um tema baseado no DayNight do Material Design 3 e coloca um nome de acordo com o projeto.

Vamos realizar adicionar novos campos ao tema e realizar mudanças na aparência do seu aplicativo. Vamos definir as cores primárias, secundárias e configurar a aparência do aplicativo para mostrar a app bar. Mas primeiro vamos lidar com as cores do aplicativo.

Criando recursos de cor

O valor para cada cor é um código em hexadecimal (ex, #B2FAC3) e pode ser obtido através de diferentes fontes. Como referência você pode usar o conjunto de cores do Material Design para pintar seus aplicativos através do site https://materialuicolors.co/ ou escolher sua própria preferência.

Para este aplicativo vamos adicionar novos recursos de cor ao arquivo colors.xml. Para tanto, abra o arquivo e adicione as seguintes cores:

• Cor primária - colorPrimary - #2196F3

• Cor primária escura - colorPrimaryVariant- #1976D2

• Cor de realce - colorSecondary - #FF9100

O arquivo colors.xml deve ficar como:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    ...
    <color name="colorPrimary">#2196F3</color>
    <color name="colorPrimaryVariant">#1976D2</color>
    <color name="colorSecondary">#FF9100</color>
</resources>

Criação do tema personalizado

Agora precisamos configurar o tema do aplicativo para fazer o uso destas novas cores. Assim, abra o arquivo styles.xml e modifique as propriedades para usar os valores corretamente:

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Base.Theme.MiniCalculadora" parent="Theme.Material3.DayNight">
        <!-- Customize your light theme here. -->
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryVariant">@color/colorPrimaryVariant</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/colorSecondary</item>
        <!-- App bar color. -->
        <item name="colorSurface">@color/colorPrimary</item>
        <item name="colorOnSurface">@color/white</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
    </style>

    <style name="Theme.MiniCalculadora" parent="Base.Theme.MiniCalculadora" />
</resources>

Inicialmente removemos a especificação NoActionBar na declaração do tema. A seguir definimos os valores para as cores primárias e secundárias de acordo com as cores declaradas no arquivo colors.xml. Configuramos as cores para a app bar alterando as propriedades das cores de superfícies. E por fim, declaramos especificamente qual será a cor da status bar.

O resultado final é apresentado na imagem a seguir. Para ver a status bar e app bar é necessário ativar a exibição da interface do sistema Android. Procure o ícone parecido com um olho e ative a opção "Show System UI" como na figura.