Material Theme

Artigo
07/13/2023

Material Theme é um estilo de interface do usuário que determina a aparência de exibições e atividades começando com o Android 5.0 (Lollipop). O Tema material é integrado ao Android 5.0, portanto, ele é usado pela interface do usuário do sistema, bem como por aplicativos. O Tema material não é um "tema" no sentido de uma opção de aparência em todo o sistema que um usuário pode escolher dinamicamente em um menu de configurações. Em vez disso, o Tema material pode ser considerado como um conjunto de estilos base internos relacionados que você pode usar para personalizar a aparência do seu aplicativo.

O Android fornece três tipos de Tema Material:

Theme.Material – Versão escura do Tema material; esse é o tipo padrão no Android 5.0.
Theme.Material.Light – Versão light do Tema do Material.
Theme.Material.Light.DarkActionBar – Versão clara do Tema material, mas com uma barra de ação escura.

Exemplos desses tipos de Tema Material são exibidos aqui:

Você pode derivar do Tema Material para criar seu próprio tema, substituindo alguns ou todos os atributos de cor. Por exemplo, você pode criar um tema que deriva de Theme.Material.Light, mas substitui a cor da barra de aplicativos para corresponder à cor da sua marca. Você também pode estilizar exibições individuais; por exemplo, você pode criar um estilo para CardView que tem cantos mais arredondados e usa uma cor de tela de fundo mais escura.

Você pode usar um único tema para um aplicativo inteiro ou pode usar temas diferentes para diferentes telas (atividades) em um aplicativo. Nas capturas de tela acima, por exemplo, um único aplicativo usa um tema diferente para cada atividade para demonstrar os esquemas de cores internos. Os botões de opção alternam o aplicativo para atividades diferentes e, como resultado, exibem temas diferentes.

Como o Tema material tem suporte apenas no Android 5.0 e posterior, você não pode usá-lo (ou um tema personalizado derivado de Tema Material) para tema do aplicativo para execução em versões anteriores do Android. No entanto, você pode configurar seu aplicativo para usar o Tema material em dispositivos Android 5.0 e fazer fallback normalmente para um tema anterior quando ele for executado em versões mais antigas do Android (consulte a seção Compatibilidade deste artigo para obter detalhes).

Requisitos

A seguir, é necessário usar os novos recursos de Tema material do Android 5.0 em aplicativos baseados em Xamarin:

Xamarin.Android – O Xamarin.Android 4.20 ou posterior deve ser instalado e configurado com o Visual Studio ou Visual Studio para Mac.
O SDK do Android – Android 5.0 (API 21) ou posterior deve ser instalado por meio do Gerenciador de SDK do Android.
Java JDK 1.8 – O JDK 1.7 pode ser usado se você estiver direcionando especificamente o nível de API 23 e anterior. O JDK 1.8 está disponível na Oracle.

Para saber como configurar um projeto de aplicativo android 5.0, consulte Configurando um projeto do Android 5.0.

Usando os temas internos

A maneira mais fácil de usar o Tema material é configurar seu aplicativo para usar um tema interno sem personalização. Se você não quiser configurar explicitamente um tema, seu aplicativo usará como padrão Theme.Material (o tema escuro). Se seu aplicativo tiver apenas uma atividade, você poderá configurar um tema no nível da atividade. Se seu aplicativo tiver várias atividades, você poderá configurar um tema no nível do aplicativo para que ele use o mesmo tema em todas as atividades ou você possa atribuir temas diferentes a atividades diferentes. As seções a seguir explicam como configurar temas no nível do aplicativo e no nível da atividade.

Temas de um aplicativo

Para configurar um aplicativo inteiro para usar um tipo tema de material, defina o android:theme atributo do nó do aplicativo em AndroidManifest.xml como um dos seguintes:

@android:style/Theme.Material – Tema escuro.
@android:style/Theme.Material.Light – Tema claro.
@android:style/Theme.Material.Light.DarkActionBar – Tema claro com barra de ação escura.

O exemplo a seguir configura o aplicativo MyApp para usar o tema claro:

<application android:label="MyApp" 
             android:theme="@android:style/Theme.Material.Light">
</application>

Como alternativa, você pode definir o atributo de aplicativo Theme em AssemblyInfo.cs (ou Properties.cs). Por exemplo:

[assembly: Application(Theme="@android:style/Theme.Material.Light")]

Quando o tema do aplicativo for definido como @android:style/Theme.Material.Light, todas as atividades no MyApp serão exibidas usando Theme.Material.Light.

Temas de uma atividade

Para criar um tema de atividade, adicione uma Theme configuração ao atributo acima da [Activity] declaração de atividade e atribua Theme ao tipo Tema material que você deseja usar. O exemplo a seguir tem como tema uma atividade com Theme.Material.Light:

[Activity(Theme = "@android:style/Theme.Material.Light",
          Label = "MyApp", MainLauncher = true, Icon = "@drawable/icon")]

Outras atividades neste aplicativo usarão o esquema de cores escuras padrão Theme.Material (ou, se configurado, a configuração do tema do aplicativo).

Usando temas personalizados

Você pode aprimorar sua marca criando um tema personalizado que estilos seu aplicativo com as cores da sua marca. Para criar um tema personalizado, você define um novo estilo que deriva de um sabor de Tema Material interno, substituindo os atributos de cor que você deseja alterar. Por exemplo, você pode definir um tema personalizado que deriva de e altera a cor da tela de Theme.Material.Light.DarkActionBar fundo para bege em vez de branco.

O Tema material expõe os seguintes atributos de layout para personalização:

colorPrimary – A cor da barra de aplicativos.
colorPrimaryDark– A cor da barra de status e das barras de aplicativos contextuais; normalmente é uma versão escura do colorPrimary.
colorAccent– A cor dos controles de interface do usuário, como caixas de marcar, botões de opção e caixas de texto de edição.
windowBackground – A cor da tela de fundo da tela de fundo.
textColorPrimary – A cor do texto da interface do usuário na barra de aplicativos.
statusBarColor– A cor da barra de status.
navigationBarColor – A cor da barra de navegação.

Essas áreas de tela são rotuladas no diagrama a seguir:

Por padrão, statusBarColor é definido como o valor de colorPrimaryDark. Você pode definir statusBarColor como uma cor sólida ou defini-la como @android:color/transparent para tornar a barra de status transparente. A barra de navegação também pode ser transparente definindo como navigationBarColor@android:color/transparent.

Criando um tema de aplicativo personalizado

Você pode criar um tema de aplicativo personalizado criando e modificando arquivos na pasta Recursos do seu projeto de aplicativo. Para estilizar seu aplicativo com um tema personalizado, use as seguintes etapas:

Crie um arquivo colors.xml em Recursos/valores – você usa esse arquivo para definir suas cores de tema personalizadas. Por exemplo, você pode colar o seguinte código em colors.xml para ajudá-lo a começar:

<?xml version="1.0" encoding="UTF-8" ?>
<resources>
    <color name="my_blue">#3498DB</color>
    <color name="my_green">#77D065</color>
    <color name="my_purple">#B455B6</color>
    <color name="my_gray">#738182</color>
</resources>

Modifique este arquivo de exemplo para definir os nomes e códigos de cor para recursos de cores que você usará em seu tema personalizado.
Crie uma pasta Resources/values-v21 . Nesta pasta, crie um arquivo styles.xml :

Observe que Resources/values-v21 é específico do Android 5.0 – versões mais antigas do Android não lerão arquivos nesta pasta.
Adicione um resources nó para styles.xml e defina um style nó com o nome do tema personalizado. Por exemplo, aqui está um arquivo styles.xml que define MyCustomTheme (derivado do estilo de tema interno Theme.Material.Light ):

<?xml version="1.0" encoding="UTF-8" ?>
<resources>
    <!-- Inherit from the light Material Theme -->
    <style name="MyCustomTheme" parent="android:Theme.Material.Light">
        <!-- Customizations go here -->
    </style>
</resources>

Neste ponto, um aplicativo que usa MyCustomTheme exibirá o tema de estoque Theme.Material.Light sem personalizações:
Adicione personalizações de cores a styles.xml definindo as cores dos atributos de layout que você deseja alterar. Por exemplo, para alterar a cor da barra de aplicativos para my_blue e alterar a cor dos controles de interface do usuário para my_purple, adicione substituições de cor a styles.xml que se referem aos recursos de cor configurados em colors.xml:

<?xml version="1.0" encoding="UTF-8" ?>
<resources>
    <!-- Inherit from the light Material Theme -->
    <style name="MyCustomTheme" parent="android:Theme.Material.Light">
        <!-- Override the app bar color -->
        <item name="android:colorPrimary">@color/my_blue</item>
        <!-- Override the color of UI controls -->
        <item name="android:colorAccent">@color/my_purple</item>
    </style>
</resources>

Com essas alterações em vigor, um aplicativo que usa MyCustomTheme exibirá uma cor da barra de aplicativos e my_blue controles de interface do usuário no my_purple, mas usará o Theme.Material.Light esquema de cores em todos os outros lugares:

Neste exemplo, MyCustomTheme empresta cores para a cor da tela de Theme.Material.Light fundo, status barra e cores de texto, mas altera a cor da barra de aplicativos para my_blue e define a cor do botão de opção como my_purple.

Criando um estilo de exibição personalizado

O Android 5.0 também possibilita que você estilize uma exibição individual. Depois de criar colors.xml e styles.xml (conforme descrito na seção anterior), você pode adicionar um estilo de exibição para styles.xml. Para estilizar uma exibição individual, use as seguintes etapas:

Edite Recursos/valores-v21/styles.xml e adicione um style nó com o nome do estilo de exibição personalizado. Defina os atributos de cor personalizados para sua exibição dentro desse style nó. Por exemplo, para criar um estilo CardView personalizado que tenha cantos my_blue mais arredondados e use como a cor da tela de fundo cartão, adicione um style nó para styles.xml (dentro do resources nó) e configure a cor da tela de fundo e o raio do canto:

<!-- Theme an individual view: -->
<style name="CardView.MyBlue">

    <!-- Change the background color to Xamarin blue: -->
    <item name="cardBackgroundColor">@color/my_blue</item>

    <!-- Make the corners very round: -->
    <item name="cardCornerRadius">18dp</item>
</style>

No layout, defina o style atributo para essa exibição para corresponder ao nome de estilo personalizado escolhido na etapa anterior. Por exemplo:

<android.support.v7.widget.CardView
    style="@style/CardView.MyBlue"
    android:layout_width="200dp"
    android:layout_height="100dp"
    android:layout_gravity="center_horizontal">

A captura de tela a seguir fornece um exemplo do padrão CardView (mostrado à esquerda) em comparação com um CardView que foi estilizado com o tema personalizado CardView.MyBlue (mostrado à direita):

Neste exemplo, o personalizado CardView é exibido com a cor my_blue da tela de fundo e um raio de canto de 18dp.

Compatibilidade

Para estilizar seu aplicativo para que ele use o Tema material no Android 5.0, mas reverta automaticamente para um estilo compatível com o para baixo em versões mais antigas do Android, use as seguintes etapas:

Defina um tema personalizado em Recursos/valores-v21/styles.xml que deriva de um estilo tema material. Por exemplo:

<resources>
    <style name="MyCustomTheme" parent="android:Theme.Material.Light">
        <!-- Your customizations go here -->
    </style>
</resources>

Defina um tema personalizado em Recursos/valores/styles.xml que deriva de um tema mais antigo, mas usa o mesmo nome do tema acima. Por exemplo:

<resources>
    <style name="MyCustomTheme" parent="android:Theme.Holo.Light">
        <!-- Your customizations go here -->
    </style>
</resources>

Em AndroidManifest.xml, configure seu aplicativo com o nome do tema personalizado. Por exemplo:

<application android:label="MyApp" 
             android:theme="@style/MyCustomTheme">
</application>

Como alternativa, você pode estilizar uma atividade específica usando seu tema personalizado:

[Activity(Label = "MyActivity", Theme = "@style/MyCustomTheme")]

Se o tema usar cores definidas em um arquivo colors.xml , coloque esse arquivo em Recursos/valores (em vez de Recursos/valores-v21) para que ambas as versões do tema personalizado possam acessar suas definições de cor.

Quando seu aplicativo for executado em um dispositivo Android 5.0, ele usará a definição de tema especificada em Recursos/valores-v21/styles.xml. Quando esse aplicativo for executado em dispositivos Android mais antigos, ele retornará automaticamente à definição de tema especificada em Recursos/valores/styles.xml.

Para obter mais informações sobre a compatibilidade de temas com versões mais antigas do Android, consulte Recursos alternativos.

Resumo

Este artigo introduziu o novo estilo de interface do usuário tema material incluído no Android 5.0 (Lollipop). Ele descreveu os três tipos de Tema material internos que você pode usar para estilizar seu aplicativo, ele explicou como criar um tema personalizado para a identidade visual do aplicativo e forneceu um exemplo de como criar um tema para uma exibição individual. Por fim, este artigo explicou como usar o Tema material em seu aplicativo, mantendo a compatibilidade para baixo com versões mais antigas do Android.