Como desenvolvedores do Android, tendemos a nos concentrar principalmente na funcionalidade de nossos aplicativos. A funcionalidade por si só, no entanto, raramente é suficiente. No Google Play, que hospeda mais de um milhão de aplicativos hoje, a aparência é tão importante quanto a funcionalidade, se não mais. Se você acha isso difícil de acreditar, sugiro que dê uma olhada rápida nos aplicativos na seção Top Charts do Google Play.
Existem duas abordagens para modificar a aparência dos aplicativos Android. A primeira abordagem envolve a modificação direta das propriedades das visualizações em arquivos XML de layout. Essa abordagem é viável apenas se você estiver trabalhando em um aplicativo simples que tenha um pequeno número de visualizações e atividades. A segunda abordagem envolve criar e usar estilos e temas personalizados. Se você estiver familiarizado com o desenvolvimento da Web, a primeira abordagem é semelhante ao uso de estilos CSS embutidos, e a segunda abordagem é semelhante ao uso de folhas de estilo.
Neste tutorial, você aprenderá a criar estilos e temas personalizados para seus aplicativos Android. Você também aprenderá como os estilos e temas são diferentes uns dos outros e como usá-los corretamente.
1. Criando estilos
Os estilos são obviamente aplicados aos componentes da interface do usuário. Portanto, vamos começar criando uma nova atividade vazia e adicionando duas TextView elementos para seu arquivo XML de layout.
Como você pode ver no código acima, propriedades como layout_width, layout_heighte layout_marginStart etc. são explicitamente incluídos na definição de cada exibição e têm exatamente o mesmo valor. Digamos que você queira alterar o layout_marginStart valor para estes TextView elementos. Você terá que fazer alterações em dois lugares diferentes para que funcione. A situação pioraria se houvesse mais desses elementos.
Uma maneira de evitar a duplicação e facilitar o estilo dessas Views é definir um estilo separado que contenha os valores de todos esses atributos comuns. Você pode fazer isso clicando com o botão direito do mouse no TextView e selecionando Refatorar > Extrair > Estilo.
Você verá agora uma caixa de diálogo onde você pode dar um nome ao estilo e também selecionar os atributos que devem ser incluídos nele. Deixe o nome ser Visualização Alinhada à Esquerda e selecione todos os atributos, exceto layout_marginTop.
Quando você pressiona OKvocê verá que o código da primeira visualização foi alterado.
o TextView agora tem um style atributo que aponta para o LeftAlignedView estilo. Você pode dar uma olhada na definição do estilo abrindo res/values/styles.xml.
Depois que um estilo for criado, você poderá aplicá-lo a qualquer visualização. Por exemplo, veja como você aplicaria LeftAlignedView para o segundo TextView:
Agora, digamos que você queira alterar o layout_marginStart valor para ambos os TextView elementos para 20dp. Você pode simplesmente fazer a alteração em um único local e o layout será atualizado conforme mostrado abaixo:
2. Estendendo Estilos
O Android permite que você crie estilos que usam outros estilos como base. Em outras palavras, permite estender estilos existentes. Existem duas sintaxes diferentes que você pode seguir ao estender um estilo.
A primeira sintaxe é frequentemente chamada de sintaxe implícita e usa uma notação de ponto. Por exemplo, veja como você cria dois estilos derivados, chamados Texto Primário e Texto secundáriousando LeftAlignedView como o estilo pai:
Como você deve ter adivinhado, ambos LeftAlignedView.PrimaryText e LeftAlignedView.SecondaryText tem todas as propriedades de LeftAlignedText. Além desses, eles têm a android:textColor propriedade.
A segunda sintaxe para criar um estilo derivado é geralmente chamada de sintaxe explícita. Envolve o uso de um parent atributo cujo valor é definido para o nome do estilo pai. Aqui está um trecho de código que define um estilo chamado Texto Primário e Texto secundário.
A
Você deve observar que não fornecemos cores codificadas ou referências diretas de recursos ao especificar o valor de textColor atributo. Isso torna mais fácil mudar o estilo de todo o aplicativo de uma só vez, alternando os temas. Aprenderemos como fazer isso na próxima seção.
Aplicar estilos derivados não é diferente de aplicar estilos normais.
A maioria dos desenvolvedores usa a sintaxe implícita ao estender seus próprios estilos e a sintaxe explícita ao estender os estilos de plataforma.
Você também pode usar muitos outros estilos predefinidos com suas visualizações. Por exemplo, você pode usar o textAppearance atributo e defina seu valor para @style/TextAppearance.AppCompat.Display2 para aplicar vários estilos de tipografia predefinidos. Dê uma olhada no arquivo de origem para ver as regras aplicadas quando estilos diferentes são usados.
3. Criando temas
Durante todo esse tempo, aplicamos estilos apenas a visualizações que estão dentro de uma atividade. O Android também permite aplicar estilos a atividades e aplicativos inteiros. Quando um estilo é aplicado a uma atividade ou aplicativo, ele se torna um tema.
Você pode encontrar o arquivo de tema para seu aplicativo navegando até app > res > valores > temas > themes.xml. Aqui está o conteúdo padrão do themes.xml Arquivo:
Todos os aplicativos criados com a versão mais recente do Android Studio usam um tema chamado Theme.MaterialComponents.DayNight.DarkActionBar. Este tema, juntamente com muitos outros, faz parte da biblioteca de Componentes do Material Design. Existem outros valores possíveis que você pode especificar para o tema pai, como Theme.MaterialComponents.Light.DarkActionBar etc.
O arquivo de tema também contém uma lista de itens que especificam valores para diferentes atributos, como colorPrimary, colorSecondary, colorOnPrimary etc. Eles determinam as cores primárias e secundárias da marca para seu aplicativo. Os atributos que incluem a palavra “On” determinam a cor do texto e dos ícones desenhados em diferentes superfícies. Por exemplo, o valor de colorPrimary atributo no tema acima é roxo_500 que se traduz em #6200EE e a colorOnPrimary tem o valor branco que se traduz em #FFFFFF. Isso significa que um botão comum criado usando este tema terá um fundo roxo e texto branco.
Podemos definir outro tema que use um esquema de cores diferente usando o seguinte código:
Os recursos de cores são definidos em outro arquivo chamado cores.xml. Você pode encontrá-lo navegando para res > valores > cores.xml. Eis o seu conteúdo:
#FFBB86FC #FF6200EE #FF3700B3 #FF03DAC5 #FF018786 #FFEF9A9A #FFF44336 #FFD32F2F #FF90CAF9 #FF1976D2 #FF000000 #FFFFFFFF
Você não precisa necessariamente especificar um valor para todos os atributos de cor em seu arquivo. O valor de qualquer atributo de cor que esteja faltando no arquivo de tema será herdado do tema pai. Seu arquivo de tema também pode ter o seguinte conteúdo:
4. Aplicando temas
Antes de aplicarmos o tema que criamos, vamos adicionar algumas visualizações comumente usadas à atividade. Isso tornará mais fácil para nós percebermos os efeitos do tema.
O código a seguir cria alguns arquivos muito grandes, grandes e de tamanho normal TextView elementos. Também adiciona EditText, Button e CheckBox elementos para a interface do usuário.
Com todas as visualizações recém-adicionadas, o layout ficará assim:
Como você pode ver, a atividade atualmente usa o tema padrão onde os tons de cores primárias são derivados roxo e tonalidades de cores secundárias são derivadas de cerceta.
Aplicar Theme.StyleRedBlueo tema que criamos na seção anterior, à sua atividade, abra o arquivo de manifesto do seu projeto e adicione um android:theme atribuir à definição da atividade. Defina seu valor para @style/Theme.StyleRedBlue.
Da mesma forma, você pode aplicar o tema a todo o seu aplicativo definindo o valor do android:theme atributo da definição do aplicativo para @style/Theme.StyleRedBlue.
Se você der uma olhada em sua atividade agora, ela deve parecer muito diferente.
Como os estilos e temas são diferentes?
O conceito de estilos e temas pode ser um pouco confuso para iniciantes porque eles parecem fazer coisas muito semelhantes e ainda servem a propósitos diferentes. Nesta seção, fornecerei uma explicação simples para ajudar a esclarecer todas as suas dúvidas.
Ambos os temas e estilos usam o mesmo