Adicionar imagens ao app Android

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

1. Antes de começar

Neste codelab, você vai aprender a adicionar imagens ao seu app usando um elemento Image que pode ser composto.

Pré-requisitos

  • Conhecimento básico sobre como criar e executar um app no Android Studio.
  • Conhecimento básico sobre como adicionar elementos da IU. Por exemplo, elementos de texto que podem ser compostos.

O que você vai aprender

  • Como adicionar uma imagem ou foto ao seu app Android.
  • Como mostrar uma imagem no seu app com um elemento Image que pode ser composto.
  • Práticas recomendadas sobre o uso de recursos String.

O que você vai criar

  • Aprimorar o app Happy Birthday para incluir uma imagem.

O que será necessário

2. Assistir ao vídeo de orientações (opcional)

Se você quiser acompanhar a conclusão deste codelab por um dos instrutores do curso, assista ao vídeo abaixo. Esta etapa é opcional. Você também pode pular o vídeo e começar a seguir as instruções do codelab.

3. Configurar o app

No Android Studio, abra seu projeto Happy Birthday do codelab anterior.

Quando o app for executado, ele vai ficar como o mostrado nesta captura de tela.

212ada011eb0ee83.png

Adicionar uma imagem ao projeto

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

  1. Abra a imagem do seu app de cartão de aniversário usando este link.
  2. Clique em Download.

Exibição da imagem com o botão de download

  1. Clique na imagem com o botão direito do mouse e salve o arquivo no computador como androidparty.png.
  2. Anote onde você salvou a imagem.

Por exemplo, você pode ter usado a pasta Downloads.

  1. No Android Studio, clique em View > Tool Windows > Resource Manager ou na guia Resource Manager ao lado da janela Project.

Imagem mostrando como abrir a guia Resource Manager pelo menu

mostrando a guia Resource Manager

  1. Clique em + (Add resources to the module) > Import Drawables.

Exibição de como selecionar a opção "Import Drawables"

  1. No navegador de arquivos, selecione o arquivo de imagem que você transferiu por download e clique em Open.

Essa ação abre a caixa de diálogo Import Drawables. ab49bbfaa7b77620.png

  1. O Android Studio vai mostrar uma prévia da imagem. Selecione Density na lista suspensa Qualifier Type. Você vai descobrir por que está fazendo isso em uma sessão posterior.

a2e2618aca6236b.png

  1. Selecione No Density na lista Value.

64581b6bcd20181a.png

Os dispositivos Android têm telas de tamanhos variados (por exemplo, smartphones, tablets, TVs etc.), e elas também têm diferentes tamanhos de pixel. Ou seja, enquanto um dispositivo tem 160 pixels por polegada quadrada, outro encaixa 480 pixels no mesmo espaço. Caso você não considere essas variações em densidade de pixel, o sistema pode dimensionar suas imagens, resultando em imagens desfocadas, imagens grandes que consomem muita memória ou imagens com tamanho incorreto.

Quando você redimensiona imagens que ultrapassam o tamanho que o sistema Android consegue processar, é gerado um erro de falta de memória. As fotografias e imagens de plano de fundo, como a atual (androidparty.png), precisam ser colocadas na pasta drawable-nodpi, o que interrompe o comportamento de redimensionamento.

Para ver mais informações sobre densidades de pixel, consulte Suporte a densidades de pixel diferentes.

  1. Clique em Next.

c413a4f51aecf9b7.png

  1. O Android Studio mostra a estrutura de pastas em que a imagem será colocada. Observe a pasta drawable-nodpi.
  2. Clique em Import.

Exibição de uma prévia da imagem que está sendo importada

O Android Studio cria uma pasta drawable-nodpi e coloca a imagem nela. Na visualização de projeto do Android Studio, o nome do recurso é mostrado como androidparty.png (nodpi). No sistema de arquivos do computador, o Android Studio criaria uma pasta chamada drawable-nodpi.

Arquivo androidparty.png em destaque

Arquivo androidparty.png em destaque

Caso a imagem seja importada corretamente, ela será adicionada pelo Android Studio à lista na guia Drawable. Essa lista inclui todos os ícones e imagens do app, então você já pode usar a imagem importada.

435eb5cfd15260f8.png

  1. Volte à visualização do projeto, clique em View > Tool Windows > Project ou clique na guia Project à esquerda.
  2. Clique em app > res > drawable para confirmar que a imagem está na pasta drawable.

O painel "Project" está selecionado

4. Adicionar uma imagem de composição

Para que uma imagem seja mostrada no app, é necessário informar o local de exibição. Do mesmo modo como você usa um elemento Text que pode ser composto para mostrar texto, é possível usar um elemento Image para mostrar uma imagem.

Nesta tarefa, você vai adicionar ao app um elemento Image que pode ser composto, definir a imagem de um cupcake que foi transferida por download, posicionar a imagem e ajustar o tamanho dela para que preencha a tela.

Incluir uma função de composição para adicionar uma imagem

  1. No arquivo MainActivity.kt, adicione uma função BirthdayGreetingWithImage() antes da BirthdayCardPreview().
  2. Transmita dois parâmetros String à função BirthdayGreetingWithImage(): um chamado message para a mensagem de aniversário e outro chamado from para sua assinatura.
@Composable
fun BirthdayGreetingWithImage(message: String, from: String) {
}

Recursos no Jetpack Compose

Os recursos são os arquivos complementares e o conteúdo estático usados pelo seu código, como bitmaps, strings da interface do usuário, instruções de animação, entre outros. Para saber mais sobre recursos no Android, consulte Visão geral dos recursos de app.

É importante sempre separar do código os recursos do app, como imagens e strings, para que eles possam ser mantidos de forma independente. No momento da execução, o Android usa o recurso adequado com base na configuração atual. Por exemplo, você pode querer fornecer um layout de IU diferente de acordo com o tamanho da tela, ou strings diferentes de acordo com a configuração de idioma.

Como agrupar recursos

Coloque cada tipo de recurso em um subdiretório específico do diretório res/ do seu projeto. Por exemplo, abaixo mostramos a hierarquia de arquivos para um projeto simples:

MyProject/
    src/
        MyActivity.kt
    res/
        drawable/
            graphic.png
        mipmap/
            icon.png
        values/
            strings.xml

Como você pode ver nesse exemplo, o diretório res/ contém todos os recursos em subdiretórios, incluindo um diretório drawable para um recurso de imagem, um mipmap/ para ícones na tela de início e um values/ para recursos de string. Se quiser saber mais sobre o uso, o formato e a sintaxe dos recursos do app, consulte a Visão geral dos tipos de recurso.

Como acessar recursos

O Jetpack Compose pode acessar os recursos definidos no seu projeto Android. O acesso pode ser feito usando IDs de recurso que são gerados na classe R do projeto.

A classe R é gerada automaticamente pelo Android e contém os IDs de todos os recursos no projeto. Na maioria dos casos, o ID do recurso é igual ao nome do arquivo. Por exemplo, a imagem na hierarquia de arquivos anterior pode ser acessada com este código:

R.drawable.graphic

"R" é uma classe gerada automaticamente, "drawable" é um subdiretório na pasta "res" e "graphic" é o ID do recurso

Na próxima tarefa, você vai usar o arquivo de imagem androidparty.png, que foi adicionado na tarefa anterior.

  1. Na função BirthdayGreetingWithImage(), declare uma propriedade val e a nomeie como image.
  2. Faça uma chamada para a função painterResource() transmitindo o recurso androidparty. Atribua o valor retornado ao elemento image.
val image = painterResource(R.drawable.androidparty)

A função painterResource() carrega um recurso de imagem drawable e usa o ID do recurso (R.drawable.androidparty, neste caso) como um argumento.

  1. Após a chamada para a função painterResource(), adicione um elemento Image que pode ser composto e, em seguida, transmita o image para o painter como um argumento nomeado.
Image(
   painter = image
)

O Android Studio mostra o erro "None of the following functions can be with the arguments provided" para informar que os argumentos não correspondem às funções. É possível ver o erro ao passar o cursor do mouse sobre o elemento Image. Esse erro ocorre porque os argumentos transmitidos na função Image() que pode ser composta não são suficientes e não correspondem à assinatura da função. Na próxima etapa, você vai corrigir o erro.

Função de imagem destacada e um pop-up com várias funções informando que nenhuma delas pode ser chamada com os argumentos fornecidos

Conferir a acessibilidade do app

Ao seguir as práticas de programação para acessibilidade, você permite que todos os seus usuários, incluindo aqueles com deficiências, naveguem com mais facilidade no seu app e interajam com ele.

O Android Studio apresenta dicas e avisos para ajudar você a deixar seu app mais acessível. O uso de uma descrição de conteúdo define a finalidade de um elemento da IU, o que faz com que seu app seja mais utilizável com o TalkBack.

Contudo, a imagem neste app só foi incluída para fins decorativos. A adição de uma descrição de conteúdo da imagem dificultaria o uso com o TalkBack neste caso específico. Em vez de definir a descrição de conteúdo que é anunciada ao usuário, você pode definir o argumento contentDescription da imagem como null para que o TalkBack ignore o elemento Image.

  • No elemento Image, adicione outro argumento nomeado, o contentDescription, e defina o valor dele como null.
Image(
   painter = image,
   contentDescription = null
)

Visualizar o elemento Image que pode ser composto

Nesta tarefa, você vai visualizar a imagem que pode ser composto e executar o app em um emulador ou dispositivo.

  1. Na função BirthdayCardPreview(), substitua a chamada de função BirthdayGreetingWithText() por uma BirthdayGreetingWithImage().

A função será semelhante a este snippet de código:

@Preview(showBackground = false)
@Composable
fun BirthdayCardPreview() {
   HappyBirthdayTheme {
       BirthdayGreetingWithImage( "Happy Birthday Sam!", "- from Emma")
   }
}
  1. No painel Design, clique em 609ccb451d05cf6b.png Build & Refresh.

Não é mais possível ver o texto, porque a nova função tem apenas um elemento Image, mas não tem um Text.

3bf28a760bbcd266.png

5. Adicionar layout de caixa

Os três elementos básicos de layout padrão do Compose são Column, Row e Box. Você aprendeu sobre Column e Row nos codelabs anteriores. Agora, vamos conhecer melhor o elemento Box que pode ser composto.

O layout Box é um dos elementos de layout padrão do Compose. Use o layout Box para empilhar elementos uns sobre os outros. O layout Box também permite que você configure o alinhamento específico dos elementos que ele contém.

4d191637aaecf374.png

  1. Na função BirthdayGreetingWithImage(), adicione um elemento Box ao redor do elemento Image, conforme mostrado a seguir:
@Composable
fun BirthdayGreetingWithImage(message: String, from: String) {
   val image = painterResource(R.drawable.androidparty)
   //Step 3 create a box to overlap image and texts
   Box {
      Image(
          painter = image,
          contentDescription = null
          )
   }
}
  1. Ao final da função Box, chame a BirthdayGreetingWithText() e transmita a ela a mensagem de aniversário e a assinatura, como mostrado abaixo:
@Composable
fun BirthdayGreetingWithImage(message: String, from: String) {
   val image = painterResource(R.drawable.androidparty)
   //Step 3 create a box to overlap image and texts
   Box {
      Image(
          painter = image,
          contentDescription = null
          )
      BirthdayGreetingWithText(message = message, from = from)
   }
}
  1. Clique em Build & Refresh, no painel Design para ter acesso à prévia atualizada.

Você verá o texto e a imagem.

Imagem de cupcake sobreposta por uma mensagem de aniversário e um texto de assinatura

  1. Para que as mudanças acima sejam aplicadas no emulador ou em um dispositivo, na função onCreate(), substitua a chamada de função BirthdayGreetingWithText() por BirthdayGreetingWithImage().

O bloco setContent será semelhante a este snippet de código:

setContent {
   HappyBirthdayTheme {
       // A surface container using the 'background' color from the theme
       Surface(color = MaterialTheme.colors.background) {
           BirthdayGreetingWithImage( "Happy Birthday Sam!", "- from Emma")
       }
   }
}
  1. Execute o app em um emulador ou dispositivo.

A imagem tem a mesma largura da tela do app, mas está fixada na parte de cima. Há muito espaço em branco na parte de baixo da tela, o que não fica muito interessante. Na próxima tarefa, você vai preencher a largura e altura da tela e dimensionar a imagem.

29eeec700ad8186e.png

6. Posicionar e dimensionar a imagem que pode ser composta

Nesta tarefa, você vai colocar a imagem em tela cheia para deixar seu app mais bonito. Para fazer isso, use os parâmetros Modifier e ContentScale.

Modificadores

Os modificadores são usados para decorar ou adicionar comportamentos aos elementos da IU do Jetpack Compose. Por exemplo, você pode adicionar planos de fundo, padding ou comportamento a linhas, textos ou botões. Para fazer a configuração deles, um elemento de composição precisa aceitar um modificador como parâmetro.

Em um codelab anterior, você aprendeu sobre os modificadores e usou o de padding (Modifier.padding) para adicionar espaço ao redor do elemento Text. Os modificadores podem ajudar muito, e você verá isso neste e nos próximos programas de aprendizagem.

Por exemplo, este elemento Text que pode ser composto tem um argumento Modifier que muda a cor do plano de fundo para verde.

Text(
    text = "Hello, World!",
    // Solid element background color
    modifier = Modifier.background(color = Color.Green)
)

Agora é sua vez de adicionar um argumento Modifier ao elemento Image.

  1. Na função BirthdayGreetingWithImage(), adicione outro argumento ao elemento Image conhecido como modifier e atribua a ele um valor de Modifier.fillMaxHeight().

Isso vai definir a altura do elemento como a altura máxima disponível.

Image(
   painter = image,
   contentDescription = null,
   modifier = Modifier
       .fillMaxHeight()
)

Importe a função androidx.compose.foundation.layout.fillMaxHeight quando solicitado pelo Android Studio.

  1. Adicione uma função .fillMaxWidth() ao modificador.

Se for necessário usar mais de um modificador por vez, você poderá encadear chamadas a modificadores, como mostrado neste snippet de código:

Image(
   painter = image,
   contentDescription = null,
   modifier = Modifier
       .fillMaxHeight()
       .fillMaxWidth()
)

Importe a função androidx.compose.foundation.layout.fillMaxWidth quando solicitado pelo Android Studio.

Dimensionar conteúdo

Você adicionou a imagem ao seu app e a posicionou. Agora, é necessário ajustar o tipo de escala da imagem, que informa como dimensionar para que ela seja mostrada em tela cheia.

Há alguns tipos de ContentScale disponíveis. Use o parâmetro ContentScale.Crop de escalonamento, que dimensiona a imagem de maneira uniforme para manter a proporção de modo que a largura e a altura dela sejam iguais ou maiores que a dimensão correspondente da tela, conforme mostrado nesta imagem:

9d99146daeb20ff2.png

  1. Adicione um argumento nomeado ContentScale à imagem.
Image(
   painter = image,
   contentDescription = null,
   modifier = Modifier
       .fillMaxHeight()
       .fillMaxWidth(),
   contentScale = ContentScale.Crop
)
  1. Importe a propriedade androidx.compose.ui.layout.ContentScale quando solicitado pelo Android Studio.

É bastante código. Está na hora de ver o resultado de todo o seu trabalho.

Visualizar a imagem

  • Clique em Build & Refresh no painel Design.

A imagem do cupcake agora preenche toda a tela de visualização, como mostra esta captura de tela:

Imagem de um cupcake com mensagem de aniversário e assinatura

Executar no dispositivo

Execute o app em um dispositivo ou emulador.

Bom trabalho com a imagem em tela cheia e a mensagem de texto!

7. Alinhar o texto e adicionar padding

Nesta tarefa, você vai preencher e alinhar a mensagem de texto para melhorar ainda mais a aparência do app.

  1. No arquivo MainActivity.kt, role até a função BirthdayGreetingWithText() e localize a mensagem de aniversário, que é o primeiro elemento Text que pode ser composto.
  2. Adicione um argumento nomeado modifier à mensagem de aniversário e atribua a ele um valor de Modifier.fillMaxWidth(). Isso vai definir a largura do elemento de composição como a largura máxima disponível.
  3. Encadeie outra função .wrapContentWidth() ao Modifier. Isso vai unir e alinhar o elemento à largura da tela disponível (ou à largura do pai).
  4. Transmita um argumento Alignment.Start para a função .wrapContentWidth(). Isso vai alinhar o elemento Text que pode ser composto (ou o elemento filho) ao início da tela (ou ao elemento pai).
modifier = Modifier
   .fillMaxWidth()
   .wrapContentWidth(Alignment.Start)

470075ea26fdf4f8.png

O elemento Text da mensagem será semelhante a este snippet de código:

Text(
   text = message,
   fontSize = 36.sp,
   modifier = Modifier
  .fillMaxWidth()
       .wrapContentWidth(Alignment.Start)
)

Importe a propriedade androidx.compose.ui.Alignment do pacote compose.ui.

Padding

Um elemento da IU envolve o conteúdo. Para evitar que eles fiquem muito próximos, você pode especificar a quantidade de padding em cada lado.

Um padding é usado como um modificador, o que significa que ele pode ser aplicado a qualquer elemento que pode ser composto. Para cada lado do elemento, o modificador padding usa um argumento opcional que define a quantidade de padding.

O diagrama mostra os paddings das partes de cima e de baixo, assim como de início e fim

// This is an example. Don't copy it over
Modifier.padding(
    start = 16.dp,
    top = 16.dp,
    end = 16.dp,
    bottom = 16.dp
)
  1. Encadeie a chamada de função .padding() ao Modifier e transmita a ela um argumento nomeado start definido como 16.dp e um argumento nomeado top definido como 16.dp.
Text(
   text = message,
   fontSize = 36.sp,
   modifier = Modifier
       .fillMaxWidth()
       .wrapContentWidth(Alignment.Start)
       .padding(start = 16.dp, top = 16.dp)
)
  1. Se o Android Studio não importar esses pacotes automaticamente, faça a importação de forma manual:
  • androidx.compose.foundation.layout.padding
  • androidx.compose.ui.unit.dp
  1. Clique em Build & Refresh no painel Design e observe o padding na parte de cima e no início da mensagem de aniversário.

A mensagem de aniversário e a assinatura estão alinhadas ao início da tela

  1. De forma semelhante, alinhe sua assinatura ao fim da tela. Adicione também um padding de 16.dp no início e no final.
Text(
   text = from,
   fontSize = 24.sp,
   modifier = Modifier
       .fillMaxWidth()
       .wrapContentWidth(Alignment.End)
       .padding(start = 16.dp, end = 16.dp)
)
  1. Clique em Build & Refresh no painel Design e observe o padding e o alinhamento da sua assinatura.

A mensagem de aniversário está alinhada ao início da tela, e a assinatura está alinhada ao fim dela.

Bom trabalho! Você adicionou uma imagem ao seu app Android.

8. Adotar boas práticas de código

Tradução

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

As strings fixadas no código são escritas diretamente no código do seu app. Elas dificultam a tradução do app para outros idiomas e fazem com que seja mais difícil reutilizar strings em locais diferentes do app. Para resolver esses problemas, você pode extrair strings para um arquivo de recursos. Em vez de fixar strings no código, coloque em um arquivo, nomeie os recursos de string e utilize os nomes sempre que quiser usar as strings. O nome vai continuar igual, mesmo que a string mude ou seja traduzida para outro idioma.

  1. No arquivo MainActivity.kt, role até a função onCreate(). Selecione a string da mensagem de aniversário, "Happy Birthday Sam!".
  2. Clique na lâmpada no lado esquerdo da tela.
  3. Selecione Extract string resource.

A mensagem "Happy Birthday Sam!" está selecionada. Um clique na lâmpada faz com que um menu suspenso seja mostrado

O Android Studio vai abrir a caixa de diálogo Extract Resource. Nela, é possível personalizar o nome do recurso de string e alguns detalhes de armazenamento. O campo Resource name é onde você digita o nome da string que será chamada. O campo Resource value é onde você insere a string.

  1. 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 em OK.
  2. Veja as mudanças no código.

A string fixada no código foi substituída por uma função stringResource().

HappyBirthdayTheme {
   // A surface container using the 'background' color from the theme
   Surface(color = MaterialTheme.colors.background) {
       BirthdayGreetingWithImage( stringResource(R.string.happy_birthday_text), "- from Emma")
   }
}
  1. No painel Project, abra o arquivo strings.xml no caminho app > res > values > strings.xml e observe 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 vê 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 e a reutilização de uma string em diferentes partes do app.

  1. Siga as mesmas etapas para extrair o texto do elemento Text da assinatura, mas desta vez, insira signature_text no campo Resource name.

O arquivo final será semelhante a este snippet de código:

<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>
  1. Execute o app novamente para conferir se ele ainda funciona.

Mensagem de aniversário e assinatura se sobrepondo à imagem do cupcake

9. Desafio

Você fez um bom trabalho adicionando a imagem ao seu app. Aqui está um desafio:

  • Organize ou alinhe os dois elementos de texto que podem ser compostos para que eles fiquem centralizados.

Dica: use o argumento Alignment.CenterHorizontally com a função wrapContentWidth().

O app vai ficar com esta aparência:

Mensagem &quot;Happy Birthday Sam!&quot;, assinatura da Emma, imagem de um cupcake no centro

Para sua referência, este é o código da solução para a função BirthdayGreetingWithText():

@Composable
fun BirthdayGreetingWithText(message: String, from: String) {
   Column {
       Text(
           text = message,
           fontSize = 36.sp,
           modifier = Modifier
               .fillMaxWidth()
               .wrapContentWidth(Alignment.CenterHorizontally)
               .padding(start = 16.dp, top = 16.dp)

       )
       Text(
           text = from,
           fontSize = 24.sp,
           modifier = Modifier
               .fillMaxWidth()
               .wrapContentWidth(Alignment.CenterHorizontally)
               .padding(start = 16.dp, end = 16.dp)
       )
   }
}

10. Acessar o código da solução

O código da solução para o app Happy Birthday está no GitHub.

O GitHub é um serviço que possibilita que desenvolvedores gerenciem 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 no Documentos Google, pode ver as edições e quando elas foram feitas. Da mesma forma, é possível acompanhar o histórico de versões do código em um projeto. Isso é útil quando você trabalha em um projeto individualmente ou com uma equipe.

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

O código da solução para este codelab está no repositório e na ramificação mostrados abaixo:

Ramificações no GitHub

Antes de entender o que é uma ramificação, entenda o que é um repositório. Esse termo se refere a todo o seu projeto (diretórios e arquivos) que você clona (copia) no computador. Uma ramificação é uma versão do seu repositório, ou seja, uma linha de desenvolvimento independente. Neste curso, por exemplo, a ramificação starter pode ser uma versão do seu projeto que você usou para iniciar a criação durante o codelab. A ramificação main ou solution é a versão do seu projeto ao final do codelab, contendo o código completo da solução.

Um repositório pode conter várias ramificações, o que significa que há várias versões do código nele.

  1. Navegue até a página do repositório do GitHub fornecida para o projeto.
  2. Clique no botão Code. Uma caixa de diálogo será aberta.

1debcf330fd04c7b.png

  1. Na caixa de diálogo, clique na guia HTTPS e, em seguida, em d80cda5fcac5cc83.png ao lado do URL para copiá-lo. Esse URL será usado no Android Studio.

52117cef9280e2c3.png

  1. Abra o Android Studio, se ele ainda não estiver aberto, e clique em Get from VCS na janela Welcome to Android Studio.

38e3cb13f6cbf3b8.png

  1. Se o Android Studio já estiver aberto, selecione File > New > Project from Version Control.

eb859f5f2f920118.png

  1. Na janela Git from Version Control, selecione Git no menu Version control.

c1ff21b37a87da88.png

  1. Na caixa de texto de URL, digite o link que você copiou da página do repositório do GitHub.
  2. No menu Directory, selecione o diretório em que você quer clonar o código-fonte do repositório do GitHub.

d872acd8fb88d532.png

  1. Clique em Clone.
  2. Espere o Android Studio fazer o download e abrir o projeto.
  3. No menu de navegação do Android Studio, clique em 8de56cba7583251f.png Run app e confira se o app é criado da maneira esperada.
  4. No menu de navegação, clique em Git > Branches.

3b3d9c44dcc1327a.png

  1. Na caixa de diálogo Git Branches, na seção Remote Branches, selecione o nome da ramificação fornecido anteriormente e clique em Checkout.

4d189e9e70df0234.png

  1. Caso precise trocar de ramificação, clique em Git > Branches e selecione aquela que você quer usar. Em seguida, clique em Smart Checkout.

596d8337aba9e937.png

11. Conclusão

Você adicionou uma imagem ao seu app Happy Birthday, alinhou o texto aos modificadores, seguiu as diretrizes de acessibilidade e facilitou a tradução para outros idiomas. E o mais importante: você terminou de criar seu app Happy Birthday. Compartilhe seu trabalho nas redes sociais e use a hashtag #AndroidBasics para que possamos ver o que você fez.

Resumo

  • A guia Resource Manager no Android Studio ajuda você a adicionar e organizar suas imagens e outros recursos.
  • Um elemento Image que pode ser composto é um elemento de IU que mostra imagens no app.
  • Um elemento Image que pode ser composto precisa ter uma descrição de conteúdo para deixar seu app mais acessível.
  • O texto que é mostrado 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.

Saiba mais