Projeto: app Dogglers

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

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ê criará

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

Pré-requisitos

  • Um computador com o Android Studio instalado

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ê criará layouts para os itens do 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ê terá opções para layouts horizontais, verticais e de grade.

adf6ec8cce8cc655.png

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

51045288de047217.png

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

ce534bc07ecba432.png

A terceira opção mostra os cães em um layout de grade vertical, no qual dois deles são exibidos em cada linha.

6dac0c59577f6fbb.png

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.

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.

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

Buscar o código

  1. Clique no URL fornecido. Isso abrirá 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 exibirá uma caixa de diálogo.

5b0a76c50478a73f.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 no arquivo ZIP para descompactá-lo. Isso 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.

36cc44fcf0f89a1d.png

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

21f3eec988dcfbe9.png

  1. Na caixa de diálogo Import Project, vá até a pasta do projeto descompactada, que provavelmente está na pasta Downloads.
  2. Clique duas vezes nessa pasta do projeto.
  3. Aguarde o Android Studio abrir o projeto.
  4. Clique no botão Run 11c34fc5e516fb1c.png para criar e executar o app. Confira se ele é compilado da forma esperada.
  5. Procure os arquivos do projeto na janela de ferramentas Project para ver como o app está configurado.

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 a seguir.

93c2c1fee50a493b.png

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 exibe as mesmas informações, mas o nome, a idade e os hobbies do cachorro são empilhados verticalmente. Nesse caso, você 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: horizontal_vertical_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.

73a663ae61811a4b.png

  1. Crie o layout de grade.

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

50dd020683b63b1a.png

Implementar o adaptador

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

3192d25f55b403bc.png

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.

  1. 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.
  2. Em onCreateViewHolder(), é recomendado inflar o layout grid_list_item ou vertical_horizontal_list_item. Como saber qual layout usar? Na definição do adaptador, é possível ver que 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 horizontal_vertical_list_item. O método retornará uma instância DogCardViewHolder, que representa o layout inflado.

  1. Implemente getItemCount() para retornar o tamanho da lista de cachorros.
  2. 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.

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

583b42ccd1e5b22.png

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 executará todos os testes do caso.

a32317d35c77142b.png

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.

ac6244434cfafb60.png

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

7a925c5e196725bb.png

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

ee1e227446c536fe.png

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

d570c947769db65c.png

Os resultados da execução dos testes serão exibidos na guia Run. No painel à esquerda, você verá 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.

6d68f2bf589501ae.png

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

63f37b6428781c02.png

Por exemplo, na mensagem de erro acima, o teste verifica se uma TextView está usando um recurso de string específico. No entanto, o teste é reprovado. O texto após "Expected" e "Got" não coincide, ou seja, o valor esperado para o teste não corresponde ao valor do app em execução.

Gostaríamos de saber sua opinião sobre este projeto. Responda a esta pesquisa rápida: seu feedback nos ajudará a orientar projetos futuros neste curso.