Projeto: app Dogglers

1. Antes de começar

Este codelab apresenta um novo app, chamado Dogglers, que você vai criar por conta própria. O codelab mostra as etapas para concluir o projeto do app Dogglers, incluindo a configuração dele e os testes no Android Studio.

Este codelab é diferente dos outros deste curso. Ao contrário dos codelabs anteriores, o objetivo deste não é fornecer um tutorial detalhado sobre como criar um app. A ideia é configurar um projeto que será concluído de forma independente, com instruções sobre como concluir o app e verificar seu trabalho por conta própria.

Em vez do código da solução, fornecemos um pacote de testes como parte do download do app. Você executará esses testes no Android Studio (mostraremos como fazer isso mais adiante neste codelab) e vai testar se o código é aprovado. Isso pode levar algumas tentativas. Até mesmo desenvolvedores profissionais raramente passam em todos os testes na primeira vez. Depois que seu código passar em todos os testes, considere o projeto como concluído.

Entendemos que talvez você queira apenas uma solução para conferir seu trabalho. Não fornecemos o código da solução deliberadamente, porque queremos que você pratique como é ser um desenvolvedor profissional. Isso pode exigir o uso de diferentes habilidades que você ainda não praticou muito, como:

• pesquisar no Google os termos, mensagens de erro e códigos do app que você não reconhece;
• testar o código, ler erros e fazer mudanças no código para testá-lo novamente;
• voltar ao conteúdo anterior nas Noções básicas do Android para relembrar o que você aprendeu;
• comparar um código conhecido (ou seja, o fornecido no projeto ou o anterior da solução em outros apps da Unidade 2) com o que você está escrevendo.

Isso pode parecer complicado no início, mas temos 100% de certeza de que, se você concluiu a Unidade 2, já pode começar o projeto. Leve o tempo que precisar e não desista. Você consegue.

Pré-requisitos

• Este projeto é destinado a usuários que concluíram a Unidade 2 do curso Princípios básicos do Android em Kotlin.

O que você vai criar

• Você vai criar um app chamado Dogglers que mostra informações em uma RecyclerView usando as habilidades aprendidas na Unidade 2.

Pré-requisitos

• Um computador com o Android Studio instalado.

2. Visão geral do app

Este é o projeto do app Dogglers.

No Google, chamamos carinhosamente nossos colegas de trabalho de Googlers. Como muitos Googlers têm animais de estimação, achamos que seria divertido criar um app chamado Dogglers para nossos amigos caninos. Sua tarefa é implementar o Dogglers, que mostra listas de rolagem com cães de estimação de Googlers, além de informações sobre cada um, como nome, idade, hobbies e uma foto. Neste projeto, você vai criar layouts para os itens da RecyclerView no app Dogglers e implementar um adaptador para que a lista de cachorros possa ser apresentada de três maneiras: por rolagem horizontal, rolagem vertical e grade de rolagem vertical.

Ao iniciar o app, você vai ter opções para layouts horizontais, verticais e de grade.

A primeira opção é uma visualização de reciclagem de rolagem vertical com itens que ocupam a largura total da tela.

A segunda opção mostra a lista de cachorros em uma visualização de reciclagem de rolagem horizontal.

A terceira opção mostra os cães em um layout de grade com rolagem vertical, em que dois deles são mostrados em cada linha.

Todos esses layouts usam a mesma classe de adaptador. Sua tarefa será criar os layouts dos cards de reciclagem e, em seguida, implementar o adaptador para que cada item seja preenchido com as informações de cada cachorro.

3. Começar

Fazer o download do código do projeto

O nome da pasta é android-basics-kotlin-dogglers-app. Selecione essa pasta ao abrir o projeto no Android Studio.

1. Navegue até a página do repositório do GitHub fornecida para o projeto.
2. Verifique se o nome da ramificação corresponde ao especificado no codelab. Por exemplo, na captura de tela a seguir, o nome da ramificação é main.

3. Na página do GitHub do projeto, clique no botão Code, que vai mostrar uma janela pop-up.

4. Na janela pop-up, clique no botão Download ZIP para salvar o projeto no seu computador. Aguarde a conclusão do download.
5. Localize o arquivo no computador. Geralmente ele é salvo na pasta Downloads.
6. Clique duas vezes para descompactar o arquivo ZIP. Isso cria 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.

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

3. No navegador de arquivos, vá até a pasta descompactada do projeto, que provavelmente está na pasta Downloads.
4. Clique duas vezes nessa pasta do projeto.
5. Aguarde o Android Studio abrir o projeto.
6. Clique no botão Run para criar e executar o app. Confira se ele é criado da forma esperada.

O projeto é organizado em pacotes separados. Embora a maioria das funcionalidades já esteja implementada, será necessário implementar o DogCardAdapter. Você também precisará modificar dois arquivos de layout. Outros arquivos são discutidos conforme necessário nas instruções abaixo.

Implementar o layout

Os layouts vertical e horizontal são idênticos. Portanto, você só precisa implementar um único arquivo de layout para ambos. O layout de grade mostra as mesmas informações, mas o nome, a idade e os hobbies do cachorro são empilhados verticalmente. Nesse caso, você vai precisar de um layout separado. Os dois layouts exigem quatro visualizações diferentes para exibir informações sobre cada cachorro.

1. Uma ImageView com a foto do cachorro
2. Uma TextView com o nome do cachorro
3. Uma TextView com a idade do cachorro
4. Uma TextView com os hobbies do cachorro

Você também perceberá um estilo em cada card mostrando uma borda e uma sombra. Isso é gerenciado pela MaterialCardView, já adicionada aos arquivos de layout no projeto inicial. Em cada MaterialCardView, há um ConstraintLayout em que você precisará adicionar as visualizações restantes.

Há dois arquivos XML com os quais você precisará trabalhar para implementar os layouts: vertical_horizontal_list_item.xml para os layouts horizontal e vertical e grid_list_item.xml para o layout de grade.

1. Crie o layout de listas verticais e horizontais.

Abra vertical_horizontal_list_item.xml e, no ConstraintLayout interno, crie o layout para corresponder à imagem.

2. Crie o layout de grade.

Abra grid_list_item.xml e, no ConstraintLayout interno, crie o layout para corresponder à imagem.

Implementar o adaptador

Após definir os layouts, a próxima tarefa é implementar o adaptador da RecyclerView. Abra DogCardAdapter.kt no pacote adapter. O arquivo tem muitos comentários TODO, que ajudam a explicar o que é preciso implementar.

Há cinco etapas para implementar o adaptador.

1. Defina uma variável ou constante para a lista de dados sobre os cachorros. A lista pode ser encontrada no pacote data em um objeto chamado DataSource e tem esta aparência:

object DataSource {

   val dogs: List<Dog> = listOf( ...

}

A propriedade dogs é do tipo List<Dog>. A classe Dog é encontrada no pacote model e define quatro propriedades: uma imagem (representada por um ID do recurso) e três propriedades de String.

data class Dog(
   @DrawableRes val imageResourceId: Int,
   val name: String,
   val age: String,
   val hobbies: String
)

Defina a variável estabelecida no DogCardAdapter para a lista dogs no objeto DataSource.

2. Implemente o DogCardViewHolder. O armazenador de visualização tem que vincular as quatro visualizações que precisam ser definidas para cada card de visualização de reciclagem. O mesmo armazenador de visualização será compartilhado com os layouts grid_list_item e vertical_horizontal_list_item, já que todas as visualizações são compartilhadas entre os dois layouts. O DogCardViewHolder precisa incluir propriedades para os seguintes IDs de visualização: dog_image, dog_name, dog_age e dog_hobbies.
3. Em onCreateViewHolder(), é recomendado inflar o layout grid_list_item ou vertical_horizontal_list_item. Como saber qual layout usar? Na definição do adaptador, um valor chamado "layout" do tipo Int é transmitido ao criar uma instância do adaptador.

class DogCardAdapter(
   private val context: Context?,
   private val layout: Int
): RecyclerView.Adapter<DogCardAdapter.DogCardViewHolder>() {

Isso corresponde a um valor definido no objeto Layout, localizado no pacote const.

object Layout {
   val VERTICAL = 1
   val HORIZONTAL = 2
   val GRID = 3
}

O valor do layout será 1, 2 ou 3, mas é possível compará-lo com os identificadores VERTICAL, HORIZONTAL e GRID do objeto Layout.

Para o layout GRID, infle o layout grid_list_item. Já para os layouts HORIZONTAL e VERTICAL, infle o layout vertical_horizontal_list_item. O método retornará uma instância DogCardViewHolder, que representa o layout inflado.

4. Implemente getItemCount() para retornar o tamanho da lista de cachorros.
5. Por fim, você precisa implementar onBindViewHolder() para definir os dados em cada card de visualização de reciclagem. Use a position para acessar os dados corretos do cachorro na lista, depois defina a imagem e o nome dele. Use os recursos de string, dog_age e dog_hobbies, para formatar a idade e os hobbies adequadamente.

Quando terminar de implementar o adaptador, execute o app no emulador para verificar se está tudo certo.

4. Testar o app

O projeto Dogglers contém um destino "androidTest" com vários casos de teste.

Como executar os testes

Para executar os testes, escolha uma das seguintes opções:

Para um único caso de teste, abra uma classe de caso de teste e clique na seta verde à esquerda da declaração da classe. Em seguida, selecione a opção "Run" no menu. Isso vai executar todos os testes do caso.

Na maioria das vezes, convém executar apenas um teste, por exemplo, se apenas um teste for reprovado e os outros forem aprovados. Você pode executar um único teste da mesma forma que faria com todo o caso de teste. Use a seta verde e selecione a opção Run.

Se você tiver vários casos de teste, também pode executar todo o pacote. Assim como na execução do app, você encontra essa opção no menu Run.

O Android Studio usa como padrão o último destino que você executou (app, destinos de teste etc.). Portanto, se o menu ainda mostrar Run > Run 'app', você poderá executar o destino de teste selecionando Run > Run.

Em seguida, escolha o destino do teste no menu pop-up.

Os resultados da execução dos testes vão aparecer na guia Run. No painel à esquerda, aparece uma lista de testes reprovados, se houver algum. Os testes reprovados são marcados com um ponto de exclamação vermelho ao lado do nome da função. Os testes aprovados são marcados com uma marca de seleção verde.

Se um teste for reprovado, o texto do resultado fornecerá informações para ajudar você a corrigir o problema.

Por exemplo, na mensagem de erro acima, o teste está verificando se uma string contendo a palavra "Nox" é exibida. No entanto, o teste é reprovado. O texto não foi encontrado, o que significa que provavelmente ainda não está sendo exibido.