Estilizar widgets de forma eficaz é crucial para alcançar uma experiência do usuário visualmente atraente e consistente. Esta seção aborda os principais conceitos e técnicas para definir a cor e a tipografia e criar os widgets do Android mais úteis e envolventes.
Cor
Use a cor para expressar estilo e comunicar significado. Definir cores adequadas para seus widgets é crucial para a legibilidade, a personalização e, é claro, para expressar a identidade da marca do app.
Use funções e tokens de cores do Material para atender às diretrizes de contraste de acessibilidade e oferecer suporte a recursos de cores dinâmicas, como cores geradas pelo usuário e temas escuros ou claros.
Explore a hierarquia visual com funções de destaque para criar um contraste vibrante nos elementos ou um tema personalizado mais divertido que expresse sua marca.
Consulte as orientações de cores do Material Design para saber mais sobre as funções de cores.
Forma
O formato do widget define o clima dele. Para widgets retangulares, use a propriedade de raio de canto do sistema. Essa propriedade cria consistência em diferentes dispositivos e ajuda a evitar que o conteúdo do widget seja cortado.
Se o widget mostrar um conteúdo de dados mínimo, como uma foto, o clima ou a reprodução da música atual, tente fazer com que todo o widget tenha um formato expressivo para trazer uma explosão de energia à tela inicial do usuário. Se você tiver layouts e dados mais complexos, use formas expressivas para hierarquia visual, destacando novos conteúdos ou uma call-to-action.
Para saber mais, consulte Implementar cantos arredondados.
Temas dinâmicos
A partir do Android 12, um widget pode usar as cores do tema do dispositivo para botões, planos de fundo e outros componentes. Isso oferece consistência visual em diferentes widgets, ícones da tela inicial e papéis de parede, proporcionando aos usuários do Android uma experiência mais coesa. Usar os tokens de cores fornecidos ajuda o widget a parecer integrado em todos os temas de dispositivos fornecidos por diferentes fabricantes e nos temas dinâmicos definidos pelo usuário.
Tema claro e escuro
Um tema escuro é uma versão com pouca luz da interface do dispositivo que mostra principalmente cores de superfície escuras. Os usuários estão mudando cada vez mais para o tema escuro para melhorar a duração da bateria e o conforto dos olhos. Se o widget não se adaptar ao tema escuro, ele vai parecer fora do lugar e pode frustrar os usuários.
Tipografia
A tipografia ajuda a tornar a escrita legível e bonita. Use tamanhos e pesos de fonte para estabelecer uma hierarquia clara, guiando o olhar do usuário para os elementos mais importantes. Preste atenção ao espaçamento entre linhas e letras (kerning) para melhorar a legibilidade, especialmente em textos menores no espaço restrito de um widget.
Hierarquia
A hierarquia é comunicada por meio de diferenças na gramatura da fonte, no tamanho, na altura da linha e no espaçamento entre letras. A escala tipográfica atualizada organiza os estilos de texto em cinco funções nomeadas para descrever as finalidades. Os cinco estilos de texto são exibição, manchete, título, subtítulo e corpo. As novas funções são independentes de dispositivo, permitindo uma aplicação mais fácil em vários casos de uso.
Embora os widgets usem fontes do sistema, ainda é possível adicionar detalhes expressivos com escalas tipográficas dramáticas: use mais negrito em títulos, rótulos e dados.
