Exercício: criar o app Sports

1. Antes de começar

Parabéns! Neste programa de treinamentos, você aprendeu a fazer com que um app seja adaptável usando a classe WindowWidthSize e o layout canônico. Agora é hora de colocar isso em prática.

Nestes exercícios, você vai usar os conceitos que aprendeu no programa de treinamentos para criar o app Sports. O app inicial é totalmente funcional para um layout para dispositivos móveis. Sua tarefa é fazer com que ele seja adaptável para telas grandes.

O código da solução está disponível no final, mas tente resolver os exercícios antes de conferir as respostas. Faça os exercícios no seu próprio ritmo. Cada exercício tem uma duração estimada, mas não é necessário segui-la à risca. Recomendamos que você reserve o tempo que precisar para resolver cada exercício com cuidado.

Pré-requisitos

• Conclua as atividades básicas do Android no Compose nos codelabs Criar um app adaptável com a navegação dinâmica e Criar um app adaptável com layout adaptável.

O que é necessário

• Um computador com acesso à Internet e o Android Studio instalado
• Acesso ao GitHub

O que você vai criar

O app Sports adaptável a telas grandes. O app final vai ficar parecido com esta imagem:

2. Começar

Fazer o download do código inicial

No Android Studio, abra a pasta basic-android-kotlin-compose-training-sports.

URL do código inicial:

https://github.com/google-developer-training/basic-android-kotlin-compose-training-sports/tree/starter

Nome da ramificação com o código inicial: starter

3. Definir como o app Sports vai ser adaptado para telas grandes

Para adaptar o app Sports para telas grandes, primeiro defina o tipo de layout que funciona melhor para o app nesse tipo de tela.

1. Para começar, confira os layouts disponíveis no tamanho de tela compacto. O app tem duas telas: a de lista, que corresponde ao elemento combinável SportsList, e a de detalhes, que corresponde ao SportsDetail.

2. Revise o layout canônico (link em inglês) para determinar o layout mais adequado ao caso de uso do app Sports.
3. Faça um esboço de um possível layout de tela expandida. Use um software de design visual simples ou um pedaço de papel para conferir como as telas se encaixam no layout expandido.

4. Criar a tela expandida no código

Agora que você tem uma visão clara da aparência do layout expandido, vamos converter isso em código.

1. Crie um elemento combinável para a tela expandida que mostre a lista e a tela de detalhes. Você pode dar o nome SportsListAndDetails a ele e colocá-lo no arquivo SportsScreens.kt.
2. Crie uma visualização para que fique mais fácil conferir o elemento combinável SportsListAndDetails na interface.

3. Confira se o botão "Voltar" funciona corretamente na tela aberta. O app precisa fechar quando o usuário pressionar o botão "Voltar" e o sistema abrir a tela principal. Para mudar esse comportamento, transmita o lambda adequado ao elemento combinável SportsDetails. Dica: é possível acessar a Activity do app em (LocalContext.current as Activity).

5. Mudar o layout do app acordo com o tamanho da janela

Para adicionar o elemento combinável de tela expandida ao app, execute as seguintes tarefas:

1. Adicione androidx.compose.material3:material3-window-size-class a build.gradle.kts do app.
2. Calcule windowSizeClass na MainActivity e transmita a widthSizeClass para o elemento combinável SportsApp.
3. Crie um novo diretório chamado utils e um novo nome de arquivo WindowStateUtils.kt.
4. Adicione uma classe enum em WindowStateUtils para indicar dois contentType diferentes. Você pode nomear os tipos como ListOnly e ListAndDetail.
5. No elemento combinável SportsApp, determine o contentType com base na widthSizeClass.
6. Mostre o elemento combinável SportsListAndDetails quando contentType for ListAndDetail e mantenha o comportamento anterior quando o contentType for ListOnly.
7. No elemento combinável SportsAppBar, mude o comportamento para que o botão "Voltar" não apareça e a barra de apps mostre Sports quando a página da lista for aberta na tela.
8. Use o emulador redimensionável para conferir os recursos de interface e navegação para telas compactas e expandidas.

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

Para fazer o download do código do codelab concluído, use este comando git:

$ git clone https://github.com/google-developer-training/basic-android-kotlin-compose-training-sports.git

Se preferir, você pode fazer o download do repositório como um arquivo ZIP, descompactar e abrir no Android Studio.

Fazer o download do ZIP

Observação: o código da solução está na ramificação main do repositório transferido por download.

Se você quiser conferir o código da solução, acesse o GitHub (em inglês).