Embora seu app possa conter apenas texto e cor, é recomendável adicionar mais elementos visuais, como um logotipo ou uma ilustração. O Android tem práticas recomendadas específicas para adicionar gráficos ao seu app, além de várias bibliotecas para criar efeitos gráficos ou adicionar movimento.
Os recursos do Android são chamados de drawables, um tipo de recurso desenhado na tela. Isso inclui, entre outros, bitmaps, formas e vetores.
Ao criar imagens e gráficos, tenha em mente o seguinte:
- Evite incluir texto imutável nos recursos.
- Use formatos vetoriais primeiro sempre que possível.
- Forneça recursos para buckets de resolução.
- Forneça scrim suficiente entre as imagens de plano de fundo e o texto.
- Embora o Android possa conseguir diferentes efeitos de imagem, como gradientes, colorização e desfoques, alguns têm um desempenho mais caro.
- Drawables vetoriais animados oferecem um formato escalonável para pequenas animações da interface.
Como exportar recursos para Android
- Formate os nomes de recursos em letras minúsculas.
- Definir recursos simples para exportar como SVG.
- Defina imagens complexas, como fotos, para exportar como WebP, PNG, JPG.
- Defina o escalonamento correto da resolução, conforme mostrado na tabela a seguir.
| Tamanho da tela | Escala |
|---|---|
mdpi |
1x |
hdpi |
1,5x |
xhdpi |
2x |
xxhdpi |
3x |
xxxhdpi |
4x |
Como opção, você pode converter SVGs em drawables vetoriais (VD) usando o Android Studio. Organize os recursos em diretórios correspondentes à resolução de transferência, conforme mostrado na imagem abaixo. Por exemplo, inclua o tamanho da tela em nomes de pasta.
Tipos de recursos
O Android oferece suporte aos tipos de recursos abaixo.
Vetor
Um gráfico vetorial é um formato sem perdas, o que significa que ele não perde informações visuais quando dimensionado. Os vetores são compostos de pontos matemáticos preenchidos para criar uma imagem.
Formatos vetoriais
O Android oferece suporte aos seguintes formatos de imagem vetorial: SVGs e drawables vetoriais.
Drawables vetoriais são semelhantes aos SVGs, mas são baseados em XML. Eles também oferecem suporte
a vários atributos, como gradientes. Para mais informações sobre o que é compatível,
consulte VectorDrawable. Você pode converter SVGs em drawables vetoriais usando o
Vector Asset Studio.
Casos de uso
Por causa do tamanho pequeno, é melhor criar ícones usando um formato vetorial. Um drawable vetorial animado pode ser usado para adicionar movimento a um ícone.
- Ilustrações são gráficos que ajudam a direcionar usuários, explicar conceitos ou expressar ideias. Elas normalmente expressam o estilo da marca.
- As ilustrações principais são de alta ênfase no restante do conteúdo, usadas para definir a aparência geral e explicar informações principais.
- As ilustrações do Spot são menores, geralmente inline e oferecem suporte ao conteúdo ao redor.
Varredura
Um gráfico com perda, ou um gráfico que perde detalhes quando manipulado por compactação ou dimensionamento, é composto por pixels para compor a imagem. Os gráficos de varredura são normalmente usados para imagens detalhadas, como fotos ou gradientes complexos. Como elas perdem detalhes quando dimensionadas, exporte várias resoluções dessas imagens.
Formatos de raster
O Android é compatível com os seguintes formatos de imagem rasterizados: PNG, GIF, JPG e WebP.
Casos de uso
Os casos de uso incluem imagens com uma variedade de texturas, resultando em uma ampla paleta de cores e gradações, ou imagens que teriam um conjunto excessivamente complexo de pontos de Bézier. Os casos de uso também podem incluir recursos de fotos altamente detalhados, como fotos de produtos, detalhes do local e muito mais.
Tamanho
Ao criar recursos, lembre-se das seguintes considerações.
Buckets de resolução
Seu app precisa fornecer gráficos bitmap com base nos intervalos de densidade da tela ou buckets. O sistema operacional exibe automaticamente o gráfico correto no dispositivo em questão usando esses buckets. Para garantir que gráficos de alta fidelidade sejam mostrados em todos os dispositivos, forneça recursos para cada bucket.
Padding
Ícones e recursos pequenos semelhantes precisam incluir padding intrínseco (integrado) para dar ao recurso espaço suficiente na área de toque e garantir um dimensionamento consistente.
Nomes de arquivos
Os recursos do Android são em letras minúsculas e não incluem um sufixo de resolução.
Mantenha uma convenção de nomenclatura e uma estrutura consistentes para manter seus arquivos e projetos organizados. Por exemplo, nomear ícones com o prefixo "ic_..." pode ajudar a organizar todos os ícones no seu projeto e identificar rapidamente os ícones durante o desenvolvimento.
Outros recursos de link para app
Ícones do app
Os ícones na tela inicial estão disponíveis. Encontre ícones monocromáticos na interface do sistema, incluindo notificações monocromáticas, barra de status e widgets.
Formate ícones de apps como drawables vetoriais para ícones adaptativos e PNG para ícones legados. Para saber mais sobre como criar e visualizar o ícone do app, consulte Projetar e visualizar os ícones do app.
Telas de apresentação
No Android 12 e versões mais recentes, o app pode mostrar uma tela de apresentação animada com o ícone do app enquanto ele é aberto.
Posição
Observe como as imagens precisam ser dimensionadas e posicionadas na tela. Fit, Crop, FillHeight, FillWidth, FillBounds, Inside e None estão disponíveis para definir o dimensionamento de uma imagem.
Você também pode recortar imagens em uma forma para criar efeitos adicionais.
Corte responsivo
Para mostrar imagens de forma responsiva, defina como uma imagem será cortada em diferentes intervalos de pontos de interrupção. Em diferentes intervalos de ponto de interrupção, o corte pode:
- Manter uma proporção fixa.
- Adapte-se a diferentes proporções.
- Mantenha a altura das imagens fixas.
Manter uma proporção
O dimensionamento da imagem pode manter uma proporção fixa entre os intervalos de pontos de interrupção.
Adapte-se a diferentes proporções
As proporções da imagem podem mudar ao se adaptar a diferentes intervalos de pontos de interrupção. Por exemplo, na Figura 9, a proporção de imagem muda de 1:1 para 16:9 entre os pontos de interrupção.
Alturas de imagem fixas
O dimensionamento da imagem pode manter uma altura e largura fluida fixas nos intervalos dos pontos de interrupção. A imagem mantém uma altura fixa, enquanto a largura entre os pontos de interrupção é fluida.
Efeitos
O Android inclui vários efeitos de imagem integrados. Aqui estão alguns efeitos comuns:
Gradientes
No Compose, use o Pincel para desenhar algo na tela. Pincéis diferentes podem ser usados para desenhar formas de cores ou gradientes diferentes. Use os pincéis de gradiente integrados para conseguir diferentes efeitos de gradiente. Esses pincéis permitem especificar a lista de cores que você quer usar para criar um gradiente.
Os pincéis de gradiente podem criar gradientes mais avançados adicionando paradas de cor e blocos, desde que você forneça a lista de cores e porcentagens em que a interrupção ocorre. Use contêineres ou formas para cortar gradientes, preenchimentos de cores sólidas ou imagens.
Desfocar
Aplique efeitos de desfoque em imagens usando o método Modifier.blur() e
fornecendo as proporções de desfoque. Use desfoques com cuidado, porque eles podem afetar
a performance e só estão disponíveis em dispositivos com o Android 12 e versões mais recentes. Para
mais informações, consulte Desfocar uma imagem combinável.
Modos de combinação
O Android é capaz de modificar imagens usando operações booleanas e modos de combinação semelhantes que podem ser encontrados em softwares de design, como união ou multiplicação. Para mais informações, consulte MergeMode.
Tonalidade
Use modos de combinação e preenchimentos para tingir os recursos. Isso permite que você tenha um único recurso e aplique cores diferentes a ele, o que pode reduzir a quantidade de recursos produzidos.
Movimento
Os gráficos podem ser animados programaticamente para criar gráficos com movimento em vez de fazer upload de arquivos de movimento. Isso pode permitir maior flexibilidade e recursos de recursos menores.
Drawables vetoriais animados permitem criar pequenas animações de interface. Caso contrário, saiba mais sobre como animar com frames-chave no Compose. Para saber mais sobre efeitos de imagem, leia Personalizar uma imagem.