Adicionar imagens ao app Android

1. Introdução

Neste codelab, você vai aprender a adicionar imagens ao seu app usando uma ImageView.

Pré-requisitos

  • Como criar e executar um novo app no Android Studio.
  • Como adicionar, remover e definir atributos em TextViews usando o Layout Editor.

O que você aprenderá

  • Como adicionar uma imagem ou foto ao seu app Android.
  • Como exibir uma imagem no app usando uma ImageView.
  • Como extrair texto para um recurso de string para facilitar a tradução do app e a reutilização de strings.
  • Como permitir que o app seja usado pelo maior número de pessoas possível.

O que você criará

  • Uma ampliação do app Happy Birthday para adicionar uma imagem.

O que é necessário

  • Um computador com o Android Studio instalado
  • O app do codelab "Criar um cartão de aniversário".

2. Configurar o app

  1. Abra seu projeto do codelab anterior no Android Studio. É possível usar o código de solução ou o código criado por você. Quando o app for executado, ele vai ficar parecido com a imagem abaixo.

ab46eb841980bc5b.png

Adicionar uma imagem ao projeto

Nesta tarefa, você fará o download de uma imagem da Internet e a adicionará ao app Happy Birthday.

  1. Clique aqui para acessar a imagem do seu cartão de aniversário no GitHub.
  2. Clique no botão Download à direita. A imagem será exibida.

80745a1810838bd4.png

  1. Clique com o botão direito do mouse na imagem e salve o arquivo no computador como androidparty.png. Preste atenção ao local em que você salvou o arquivo (por exemplo, a pasta Downloads).
  2. No Android Studio, clique em View > Tool Windows > Resource Manager nos menus ou na guia Resource Manager à esquerda da janela Project.
  3. Clique em + abaixo de Resource Manager e selecione Import drawables. Isso abre o navegador de arquivos.

d7f72d9af346ff2c.png

  1. Nesse navegador, encontre o arquivo de imagem que você transferiu por download e clique em Open.
  2. Clique em Next. O Android Studio exibirá uma visualização da imagem.
  3. Clique em Import.
  4. Caso a imagem tenha sido importada corretamente, o Android Studio a adicionará à lista Drawable, Essa lista inclui todos os ícones e imagens do app, então você já pode usar a imagem importada.

e4a7e2568ab80e33.png

  1. Volte à visualização do projeto clicando em View > Tool Windows > Project nos menus ou na guia Project à esquerda.
  2. Confirme se a imagem está na pasta drawable do app, expandindo app > res > drawable.

3af43a9ea1c39ed4.png

3. Adicionar uma ImageView

Para que uma imagem seja exibida no app, é necessário informar o local para exibição. Assim como você usa uma TextView para exibir textos, é possível usar uma ImageView para exibir imagens.

Nesta tarefa, você adicionará uma ImageView ao app e definirá a figura de bolinho que você salvou como a imagem dela. Em seguida, você a posicionará e ajustará o tamanho dela para que preencha a tela.

Adicionar uma ImageView e definir a imagem dela

  1. Na janela Project, abra activity_main.xml (app > res > layout > activity_main.xml).
  1. No Layout Editor, acesse Palette e arraste uma ImageView até o app. Solte-a perto do centro, sem sobreposição ao texto.

A caixa de diálogo Pick a Resource será aberta. Ela lista todos os recursos de imagem disponíveis para o app. A imagem de aniversário estará listada na guia Drawable. Um recurso desenhável é um conceito geral para uma figura que pode ser desenhada na tela. Isso inclui imagens, bitmaps, ícones e muitos outros tipos de recursos desenhados.

  1. Na caixa de diálogo Pick a Resource, localize a imagem do bolo na lista Drawable.
  2. Clique na imagem e depois em OK.

1f98a4e8c3dde1bd.gif

Isso vai adicionar a imagem ao app. Contudo, é provável que ela não esteja no lugar certo e não preencha a tela. Isso será corrigido na próxima etapa.

Posicionar e dimensionar a ImageView

  1. Clique na ImageView e arraste-a pelo Layout Editor. Observe que, enquanto você arrasta, um retângulo rosa aparece ao redor da tela do app na visualização Design. Esse retângulo indica os limites da tela para posicionar a ImageView.
  2. Solte a ImageView para que as bordas esquerda e direita se alinhem ao retângulo rosa. O Android Studio vai "encaixar" a imagem nas bordas quando você chegar perto. Vamos arrumar as partes de cima e de baixo em um instante.

25ab8b0401429ebd.gif

As Views em um ConstraintLayout precisam ter restrições horizontais e verticais para informar ao ConstraintLayout como posicioná-las. Isso será adicionado na próxima etapa.

  1. Mantenha o ponteiro do mouse sobre o círculo na parte de cima do contorno da ImageView, e ele será destacado por outro círculo.
  2. Arraste o círculo até a parte de cima da tela do app, e uma seta o conectará ao ponteiro do mouse à medida que você arrastar. Continue até que ele se encaixe na parte superior da tela. Você adicionou uma restrição da parte de cima da ImageView até a parte de cima do ConstraintLayout.

f3b70726695ea8c9.gif

  1. Adicione uma restrição da parte de baixo da ImageView até a parte de baixo do ConstraintLayout. Talvez ela esteja muito próxima da borda para que você consiga arrastá-la como fez com a parte superior. Nesse caso, clique no + na parte de baixo do Constraint Widget na janela Attributes para adicionar uma restrição. Confira se a margem é 0.

cdde37ea44d6bc1a.png

  1. No painel Attributes, use o Constraint Widget para adicionar uma margem de 0 à esquerda e à direita. Isso cria automaticamente uma restrição nessa direção.

1c58fd4afe6f83bb.png

A imagem agora está centralizada, mas ainda não está ocupando a tela toda. Isso será corrigido nas próximas etapas:

  1. Abaixo do Constraint Widget, na seção Constraints, defina layout_width como 0dp (match constraint). A abreviação 0dp informa ao Android Studio para usar uma match constraint (restrição de correspondência, em inglês) para a largura da ImageView. Devido às restrições que você acabou de adicionar, a largura da visualização será igual à do ConstraintLayout, menos as margens.

9fff7d632ac45a3d.png

  1. Defina layout_height como 0dp (match constraint). Devido às restrições que você adicionou, a altura da ImageView será igual à do ConstraintLayout, menos as margens.

704ef89d2286fd5f.png

  1. A altura e a largura da ImageView são iguais à tela do app, mas a imagem fica centralizada dentro da ImageView e há muito espaço em branco acima e abaixo da imagem. Como isso não fica muito bonito, ajuste o scaleType da ImageView, que informa como dimensionar e alinhar a imagem. Leia mais sobre o ScaleType no guia de referência do desenvolvedor. Agora, o app ficará como o exemplo abaixo.

426fe4a377aef0c6.png

  1. Encontre o atributo scaleType. Pode ser necessário rolar para baixo ou pesquisar esse atributo. Configure valores diferentes para o scaleType e veja o resultado.
  1. Quando terminar, defina scaleType como centerCrop. Isso fará com que a imagem preencha a tela sem distorcê-la.

32350f1cf95adb1d.png

A imagem do bolo agora preencherá toda a tela, conforme mostrado abaixo.

b3ef159159143c95.png

Contudo, não é mais possível ver sua mensagem de aniversário e assinatura. Isso será corrigido na próxima etapa.

Mover a ImageView que está atrás do texto

Depois de fazer com que a ImageView preencha a tela, não será mais possível ver o texto. Isso ocorre porque agora ele está sendo coberto pela imagem. Acontece que a ordem dos elementos da IU importa. Você adicionou as TextViews primeiro e depois adicionou a ImageView, o que significa que a imagem ficou por cima. Quando você adiciona visualizações a um layout, elas vão para o final de uma lista de visualizações e são desenhadas na ordem em que aparecem na lista. A ImageView foi adicionada ao final da lista de Views no ConstraintLayout, o que significa que ela foi desenhada por último, por cima das TextViews. Para corrigir isso, mude a ordem das visualizações e mova a ImageView para o início da lista, para que ela seja desenhada primeiro.

c52a8a80608e453.gif

Em Component Tree, clique na ImageView e arraste-a para que fique acima das TextViews, logo abaixo do ConstraintLayout. Uma linha azul com um triângulo será exibida, mostrando a posição em que a ImageView ficará. Solte a ImageView logo abaixo do ConstraintLayout.

140649e77bd4f05b.gif

A ImageView passará a ser o primeiro item na lista abaixo do ConstraintLayout, seguida pelas TextViews. Os dois textos, "Happy Birthday, Sam!" e "From Emma" passarão a ficar visíveis. Ignore o alerta sobre a falta da descrição de conteúdo por enquanto.

Parabéns! Você adicionou uma imagem ao seu app Android.

4. Adotar boas práticas de programação

Quando você adicionou as TextViews no codelab anterior, o Android Studio as sinalizou com triângulos de alerta. Nesta etapa, você corrigirá esses alertas e também o alerta na ImageView.

Traduzir

Ao escrever apps, é importante lembrar que eles poderão ser traduzidos para outro idioma em algum momento. Como você aprendeu em um codelab anterior, uma string é uma sequência de caracteres, como "Happy Birthday, Sam!".

Uma string fixada no código é escrita diretamente no código do app. Strings fixadas no código dificultam a tradução do app para outros idiomas e fazem com que seja mais difícil reutilizar uma mesma string em locais diferentes do app. Você pode resolver esses problemas "extraindo strings para um arquivo de recursos". Isso significa que, em vez de fixar uma string no código, você a colocará em um arquivo, dará um nome a ela e usará esse nome sempre que quiser usá-la. O nome vai permanecer igual, mesmo que a string seja mudada ou traduzida para outro idioma.

c8cc318f2276fbf0.png

  1. Clique no triângulo laranja ao lado da primeira TextView com a mensagem "Happy Birthday, Sam!". O Android Studio vai abrir uma janela com mais informações e uma sugestão de correção. Talvez seja necessário rolar para baixo para ver Suggested Fix.

A string fixada no código "Happy Birthday, Sam!" precisa usar um recurso de string  ID do problema: HardcodedText  Correção sugerida: extrair recurso de string

  1. Clique no botão Fix. O Android Studio abrirá a caixa de diálogo Extract Resource. Nessa caixa de diálogo, é possível personalizar o nome do recurso de string e alguns detalhes de armazenamento. Resource name é o nome da string. Resource value é a string em si.
  2. Na caixa de diálogo Extract Resource, mude Resource name para happy_birthday_text. Os recursos de string precisam ter nomes em letras minúsculas, e palavras diferentes precisam ser separadas por um sublinhado. Não mude as outras configurações.

2849a324f8a7c805.png

  1. Clique no botão OK.
  2. No painel Attributes, localize o atributo text e observe que o Android Studio já o definiu automaticamente como @string/happy_birthday_text.

579b6eff07a35331.png

  1. Abra strings.xml (app > res > values > strings.xml) e veja que o Android Studio criou um recurso de string chamado happy_birthday_text.
<resources>
    <string name="app_name">Happy Birthday</string>
    <string name="happy_birthday_text">Happy Birthday, Sam!</string>
</resources>

O arquivo strings.xml tem uma lista de strings que o usuário verá no app. Observe que o nome do app também é um recurso de string. Colocar todas as strings em um só lugar facilita a tradução de todo o texto no app e a reutilização de uma string em diferentes partes do app.

  1. Siga as mesmas etapas para extrair o texto da assinatura TextView e nomeie o recurso da string como signature_text.

O arquivo concluído ficará parecido com o seguinte:

<resources>
    <string name="app_name">Happy Birthday</string>
    <string name="happy_birthday_text">Happy Birthday, Sam!</string>
    <string name="signature_text">From Emma.</string>
</resources>

Verificar a acessibilidade do app

Seguir boas práticas de programação com relação à acessibilidade permite que todos os usuários, inclusive pessoas com deficiência, naveguem e interajam mais facilmente com seu app.

O Android Studio apresenta dicas e alertas para ajudar você a tornar seu app mais acessível.

  1. Em Component Tree, observe o triângulo laranja ao lado da ImageView adicionada anteriormente. Ao passar o cursor sobre ele, você verá uma dica com um alerta sobre um atributo contentDescription que está faltando na imagem. A descrição de conteúdo pode ajudar melhorar a usabilidade do app com o TalkBack ao definir o objetivo do elemento da IU.

Contudo, a imagem nesse app só foi incluída para decoração. Em vez de definir a descrição de conteúdo que é anunciada ao usuário, você pode dizer ao TalkBack para ignorar a ImageView, definindo o atributo importantForAccessibility como no.

  1. Em Component Tree, selecione a ImageView.
  2. Na janela Attributes, na seção All Attributes, localize importantForAccessibility e defina esse item como no.

O triângulo laranja ao lado da ImageView desaparecerá.

  1. Execute o app novamente para conferir se ele ainda funciona.

Parabéns! Você adicionou uma imagem ao seu app Happy Birthday, seguiu as diretrizes de acessibilidade e facilitou a tradução para outros idiomas.

ba4136f24be200c4.png

5. Código da solução

O upload do código de solução do app Happy Birthday foi feito para o GitHub, caso você queira ver o código final.

O GitHub é um serviço que possibilita que desenvolvedores gerenciem os códigos de projetos de software. Ele usa o Git, um sistema de controle de versões que monitora as mudanças feitas em cada versão do código. Se você já viu o histórico de versões de um arquivo do Documentos Google, você sabe que é possível ver as edições que foram feitas e quando isso ocorreu. Da mesma forma, é possível acompanhar o histórico de versões do código em um projeto. Isso é muito útil ao trabalhar em projetos sozinho ou em equipe.

O GitHub também tem um site em que é possível ver e gerenciar o projeto. Esse link do GitHub permite procurar os arquivos do projeto Happy Birthday on-line ou fazer o download deles para seu computador.

Para encontrar o código deste codelab e abri-lo no Android Studio, faça o seguinte.

Acessar o código

  1. Clique no URL fornecido. Isso abre a página do GitHub referente ao projeto em um navegador.
  2. Na página do GitHub do projeto, clique no botão Code, que vai mostrar uma caixa de diálogo.

1debcf330fd04c7b.png

  1. Na caixa de diálogo, clique no botão Download ZIP para salvar o projeto no seu computador. Aguarde a conclusão do download.
  2. Localize o arquivo no computador, que provavelmente está na pasta Downloads.
  3. Clique duas vezes para descompactar o arquivo ZIP. Isso vai criar uma nova pasta com os arquivos do projeto.

Abrir o projeto no Android Studio

  1. Inicie o Android Studio.
  2. Na janela Welcome to Android Studio, clique em Open an existing Android Studio project.

4948a0ef4afe4454.png

Observação: caso o Android Studio já esteja aberto, selecione a opção File > New > Import Project.

3047d8205840651d.png

  1. Na caixa de diálogo Import Project, vá até a pasta descompactada do projeto, que provavelmente está na pasta Downloads.
  2. Na pasta do projeto, selecione a pasta Happy Birthday.
  3. Clique em Open.
  4. Aguarde o Android Studio abrir o projeto.
  5. Clique no botão Run 8de56cba7583251f.png para criar e executar o app. Confira se ele é criado da forma esperada.
  6. Procure os arquivos do projeto na janela de ferramentas Project para ver como o app está configurado.

6. Resumo

  • O Resource Manager no Android Studio ajuda você a adicionar e organizar suas imagens e outros recursos.
  • Uma ImageView é um elemento de IU para exibir imagens no app.
  • As ImageViews precisam ter uma descrição do conteúdo para tornar o app mais acessível.
  • O texto que é exibido ao usuário, como a mensagem de aniversário, precisa ser extraído para um recurso de string de modo a facilitar a tradução do app para outros idiomas.

7. Saiba mais

8. Praticar por conta própria

Faça o seguinte:

  1. Crie seu próprio app de cartão de aniversário com base em seu projeto.
  2. Comece pensando em quais Views você precisará usar.
  3. Em que ordem seria mais fácil adicioná-las?
  4. Quais imagens você precisa adicionar à pasta de drawable?

Existem dois tipos de imagens bitmap comumente usados para apps Android: arquivos JPEG e PNG. Os arquivos PNG podem ter áreas transparentes (vazias). Leia mais sobre formatos de imagem na referência do desenvolvedor.

  1. Lembre-se de posicionar as Views primeiro com restrições e margens e, depois, definir um estilo para elas.
  2. Para destacar o texto em algumas imagens, tente usar shadowColor, shadowDx, shadowDy e shadowRadius.

b4480740bd2e2cd6.png

Confira seu trabalho:

O app final deverá ser executado sem erros e mostrar o cartão de aniversário que você criou.

Parabéns! Você terminou de criar seu próprio app de cartão de aniversário. Compartilhe seu trabalho nas mídias sociais e use a hashtag #LearningKotlin para que possamos vê-lo.