Criar um app de cartão de visita

Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

1. Antes de começar

Use o que você aprendeu nesta unidade para criar seu próprio app de cartão de visita. Diferente dos codelabs anteriores, em que você recebeu instruções passo a passo, aqui fornecemos apenas diretrizes e sugestões sobre o que é possível criar com os conceitos que aprendeu até agora. Recomendamos que você use sua criatividade para desenvolver o app de maneira independente, com orientações limitadas.

Criar um app por conta própria é um desafio, mas não se preocupe porque você já praticou bastante. É possível usar as habilidades que você aprendeu nesse novo contexto. Você pode consultar os codelabs anteriores se não souber como implementar certas partes do app.

Ao criar o app por conta própria e resolver os problemas encontrados, você aprende mais rápido e retém os conceitos por mais tempo. Outro benefício é que o app pode ser totalmente personalizado e depois você vai poder mostrá-lo aos amigos e familiares.

Pré-requisitos

  • Saber criar e executar um projeto no Android Studio.
  • Experiência com funções de composição, incluindo os elementos Text e Image que podem ser compostos.

O que você vai aprender

  • Como criar layouts simples com os elementos Row e Column e os organizar usando os parâmetros horizontalAlignment e verticalArrangement.
  • Como personalizar elementos do Compose com um objeto Modifier.

O que você vai criar

  • Um app para Android que exibe um cartão de visita.

O que é necessário

  • Um computador com o Android Studio instalado.
  • O logotipo do Android que vai aparecer no app, fornecido para neste repositório (link em inglês).

Veja um exemplo de como o app pode ficar no final deste projeto:

O app mostra um cartão de visita para a Jennifer Doe, com o cargo de Android Developer Extraordinaire, além do número de telefone, nome de usuário nas mídias sociais e endereço de e-mail.

2. Criar uma IU com elementos que podem ser compostos

Criar um protótipo de baixa fidelidade

Ao iniciar um projeto, é útil visualizar como os elementos da IU precisam se encaixar na tela. No trabalho de desenvolvimento profissional, geralmente há designers ou equipes de design que oferecem modelos ou designs de IU que contêm especificações exatas. No entanto, se você não trabalha com um designer, é possível criar um protótipo de baixa fidelidade por conta própria. Esse tipo de protótipo se refere a um modelo ou desenho simples que dá uma ideia básica da aparência do app.

Parece estranho, mas é comum trabalhar sem um designer, e então esboçar modelos de IU simples vira uma habilidade útil para um desenvolvedor. Não se preocupe, você não precisa ser um designer profissional nem mesmo saber usar ferramentas de design. Basta usar uma caneta e um papel, Apresentações ou Desenhos para fazer os esboços.

Para criar um protótipo de baixa fidelidade:

  1. No lugar que preferir, adicione os elementos que compõem o app. Alguns elementos a considerar incluem o logotipo do Android, seu nome, cargo, dados de contato e ícones para indicar os dados. Por exemplo, um ícone de telefone representa um número de telefone.
  2. Adicione esses elementos em posições diferentes e veja como eles ficam. Não se preocupe em acertar na primeira vez. Você pode escolher um design agora e fazer melhoras iterativas mais tarde.

Você pode criar um design de baixa fidelidade parecido com esta imagem:

Um protótipo de baixa fidelidade com marcadores de posição para imagens, texto e ícones.

Converter o design em código

Use o protótipo para traduzir o design em código:

  1. Identifique diferentes seções lógicas dos apps e desenhe limites ao redor delas. Essa etapa ajuda a dividir a tela em pequenos elementos que podem ser compostos e a pensar na hierarquia deles.

Neste exemplo, você pode dividir a tela em duas seções:

  • Logotipo, nome e cargo
  • Dados de contato

Cada seção pode ser convertida em um elemento que pode ser composto. Dessa forma, você pode criar a IU usando pequenos elementos de composição como base. É possível organizar cada uma dessas seções com elementos de composição de layout, como Row ou Column.

Os limites desenhados em um protótipo de baixa fidelidade, que destacam duas seções distintas.

  1. Desenhe limites ao redor de cada seção do app que contém vários elementos da IU. Esses limites ajudam você a ver como um elemento se relaciona com outro na seção.

Limites menores desenhados em cada seção do protótipo de baixa fidelidade para separar o texto, a imagem e os ícones.

Agora é mais fácil ver como você pode organizar os elementos Text, Image, Icon, entre outros, usando layouts que podem ser compostos.

Algumas observações sobre vários elementos que podem ser compostos:

Elementos Row ou Column que podem ser compostos

  • Teste vários parâmetros horizontalArrangement e verticalAlignment nos elementos Row e Column de acordo com o design.

Elementos Image que podem ser compostos

  • Não se esqueça de preencher o parâmetro contentDescription. Como mencionado no codelab anterior, o TalkBack usa o parâmetro contentDescription para ajudar na acessibilidade do app. Se o elemento Image for usado apenas para fins decorativos ou se houver um elemento Text que descreva o elemento Image, defina o parâmetro contentDescription como null. Também é possível personalizar o tamanho da imagem ao especificar os modificadores de height (altura) e width (largura) no parâmetro modifier.

Elementos Icon que podem ser compostos

  • Você pode usar o elemento Icon que pode ser composto para adicionar ícones do Material Design. É possível mudar o parâmetro Tint para ajustar a cor do ícone e o estilo do cartão de visita. De forma parecida com o elemento Image, não se esqueça de preencher o parâmetro contentDescription.

Elementos Text que podem ser compostos

  • Você pode testar vários valores dos parâmetros fontSize, textAlign, color e fontWeight para definir o estilo do texto.

Espaçamento e alinhamento

  • Você pode usar argumentos Modifier, como os modificadores padding e weight, para ajudar a organizar os elementos de composição.
  • Também é possível usar o elemento Spacer de composição para tornar o espaçamento mais explícito.

Personalização de cor

  • É possível usar uma cor personalizada com a classe Color e o código hexadecimal (link em inglês) da cor, que é uma forma hexadecimal de representar cores no formato RGB. Por exemplo, a cor verde do Android tem um código hexadecimal de #3DDC84. Você pode usar essa cor verde para o texto com este código:
Text("Example", color = Color(0xFF3ddc84))
  1. Execute o app em um emulador ou no dispositivo Android para garantir que ele seja compilado.

3. Boa sorte!

Esperamos que este guia inspire você a criar seu próprio cartão de visita com o Compose. Você pode personalizar ainda mais o app com um logotipo próprio ou até mesmo uma foto. Depois que você terminar, mostre seu trabalho aos amigos e familiares. Se quiser compartilhar seu trabalho nas mídias sociais, use a hashtag #AndroidBasics.