Exercício: criar um app de super-heróis

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

1. Antes de começar

Parabéns! Neste programa de aprendizagem, você aprendeu os conceitos básicos do Material Design e como adicionar animações simples ao seu app. Agora, vamos colocar tudo em prática.

Nesta Série de aprendizado prático, você vai usar os conceitos do programa de aprendizagem para criar um app de super-heróis. O foco é a criação dos componentes necessários para desenvolver uma lista rolável e uma IU sofisticada usando os princípios do Material Design vistos no codelab Temas do Material Design com o Jetpack Compose.

O código da solução está disponível no final, mas tente resolver os exercícios antes de conferir as respostas. Considere as soluções como uma das maneiras de implementar o app. Existem muitas oportunidades de melhoria, então fique à vontade para fazer testes e usar abordagens diferentes.

Resolva os problemas no seu tempo. Há durações estimadas para cada exercício, mas elas não precisam ser seguidas à risca. Recomendamos que você reserve o tempo que precisar para resolver cada problema com cuidado.

Pré-requisitos

O que é necessário

  • Um computador com acesso à Internet e o Android Studio instalado.

O que você vai criar

Um app chamado Superheroes que mostra uma lista de super-heróis.

O app final vai ficar assim nos temas claro e escuro:

2. Começar

Nesta tarefa, você vai configurar o projeto e criar os dados fictícios para os super-heróis.

  1. Crie um novo projeto com o modelo Empty Compose Activity e defina a versão mínima do SDK como 21.
  2. Faça o download dos recursos necessários: imagens de super-heróis e logotipo do app neste link.
  3. Faça o download dos arquivos da fonte Cabin bold e regular em https://fonts.google.com. Fique à vontade para explorar arquivos de fontes diferentes.
  4. Crie uma classe para armazenar os dados de cada super-herói. Você pode criar um novo pacote com o nome model para organizar o código com a classe de dados Hero. O item da lista pode ficar parecido com este exemplo:

5522f986d46e24d0.png

Cada item da lista de super-heróis mostra três informações exclusivas, um nome, uma descrição e uma imagem.

  1. No mesmo pacote model, crie outro arquivo para todas as informações dos heróis que você quer mostrar. Por exemplo, nome, descrição e recurso de imagem. Confira abaixo um exemplo de conjunto de dados como inspiração.
object HeroesRepository {
   val heroes = listOf(
       Hero(
           nameRes = R.string.hero1,
           descriptionRes = R.string.description1,
           imageRes = R.drawable.android_superhero1
       ),
       Hero(
           nameRes = R.string.hero2,
           descriptionRes = R.string.description2,
           imageRes = R.drawable.android_superhero2
       ),
       Hero(
           nameRes = R.string.hero3,
           descriptionRes = R.string.description3,
           imageRes = R.drawable.android_superhero3
       ),
       Hero(
           nameRes = R.string.hero4,
           descriptionRes = R.string.description4,
           imageRes = R.drawable.android_superhero4
       ),
       Hero(
           nameRes = R.string.hero5,
           descriptionRes = R.string.description5,
           imageRes = R.drawable.android_superhero5
       ),
       Hero(
           nameRes = R.string.hero6,
           descriptionRes = R.string.description6,
           imageRes = R.drawable.android_superhero6
       )
   )
}

3. Temas do Material Design

Nesta seção, você vai adicionar a paleta de cores, a tipografia e as formas do app para melhorar a aparência dele.

Cor

Esta é apenas uma recomendação para o esquema de cores. Fique à vontade para criar um próprio.

ui.theme.Color.kt

//Light Theme
val md_theme_light_background = Color(0xFFFDFCF4)
val md_theme_light_surface = Color(0xFFE0EACE)
val md_theme_light_secondary = Color(0xFF596148)
val md_theme_light_onSurface = Color(0xFF1B1C18)
val md_theme_light_primary = Color(0xFF466800)
val md_theme_light_onPrimary = Color(0xFF223600)

// Dark Theme
val md_theme_dark_background = Color(0xFF1B1C18)
val md_theme_dark_surface = Color(0xFF373F29)
val md_theme_dark_secondary = Color(0xFFDDE6C6)
val md_theme_dark_onSurface = Color(0xFFE4E3DB)
val md_theme_dark_primary = Color(0xFFC1CAAB)
val md_theme_dark_onPrimary = Color(0xFFDDE6C6)

Forma

ui.theme.Shape.kt

import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Shapes
import androidx.compose.ui.unit.dp

val Shapes = Shapes(
   small = RoundedCornerShape(8.dp),
   medium = RoundedCornerShape(16.dp),
   large = RoundedCornerShape(16.dp)
)

Tipografia

ui.theme.Type.kt

import androidx.compose.material.Typography
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.Font
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.sp
import com.example.superheroes.R

val Cabin = FontFamily(
   Font(R.font.cabin_regular, FontWeight.Normal),
   Font(R.font.cabin_bold, FontWeight.Bold)
)

// Set of Material typography styles to start with
val Typography = Typography(
   defaultFontFamily = Cabin,
   h1 = TextStyle(
       fontWeight = FontWeight.Normal,
       fontSize = 30.sp
   ),
   h2 = TextStyle(
       fontWeight = FontWeight.Bold,
       fontSize = 20.sp
   ),
   h3 = TextStyle(
       fontWeight = FontWeight.Bold,
       fontSize = 20.sp
   ),

   body1 = TextStyle(
       fontWeight = FontWeight.Normal,
       fontSize = 16.sp
   )
)

Tema

ui.theme.Theme.kt

import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material.MaterialTheme
import androidx.compose.material.darkColors
import androidx.compose.material.lightColors
import androidx.compose.runtime.Composable

private val DarkColorPalette = darkColors(
   background = md_theme_dark_background,
   surface = md_theme_dark_surface,
   onSurface = md_theme_dark_onSurface,
   primary = md_theme_dark_primary,
   onPrimary = md_theme_dark_onPrimary,
   secondary = md_theme_dark_secondary
)

private val LightColorPalette = lightColors(
   background = md_theme_light_background,
   surface = md_theme_light_surface,
   onSurface = md_theme_light_onSurface,
   primary = md_theme_light_primary,
   onPrimary = md_theme_light_onPrimary,
   secondary = md_theme_light_secondary
)

@Composable
fun SuperheroesTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) {
   val colors = if (darkTheme) {
       DarkColorPalette
   } else {
       LightColorPalette
   }

   MaterialTheme(
       colors = colors,
       typography = Typography,
       shapes = Shapes,
       content = content
   )
}

4. Lista de exibição

A primeira etapa para criar uma lista é criar um item.

  1. Crie um arquivo com o nome HeroesDataSource.kt no pacote com.example.superheroes.
  2. Crie um elemento de composição para representar um item da lista de super-heróis. A captura de tela abaixo é um exemplo da aparência e das especificações da IU. 5522f986d46e24d0.png

Siga estas especificações ou crie um item do seu jeito:

  • A altura do item da lista é de 74 dp
  • O padding do item da lista é de 16 dp
  • A elevação do card é de 2 dp
  • O espaço entre a imagem e o texto é de 16 dp
  • O raio de corte da imagem é de 8 dp
  • O raio de corte do item da lista é de 16 dp
  • A fonte do nome do super-herói está no tamanho H3
  • O corpo da fonte da descrição do super-herói está no tamanho Body1

dc6fbb4070f1876.png

d78e2d324242b224.png

Criar a coluna lenta

  1. Crie outro elemento de composição para mostrar a lista de heróis. Aqui você vai usar uma lazyColumn.
  2. Use as especificações de IU abaixo para o padding.

591dfc1744afbf98.png

Quando terminar a implementação, seu app vai ficar parecido com esta captura de tela:

9bf806c163ed3489.png

5. Adicionar uma barra de apps na parte de cima

Adicione uma barra de apps na parte de cima do aplicativo. Pode ser um texto simples.

  1. Em MainActivity.kt, adicione um elemento de composição para mostrar a barra de apps na parte de cima. Adicione texto a ela. Pode ser o nome do app. Alinhe a barra no centro horizontalmente e verticalmente.
  2. Você pode definir a altura dela como 56 dp e a fonte como H1. Você também pode criar sua própria barra de apps.

d6f672e360efe331.png

  1. Use scaffold para mostrar a barra de apps na parte de cima. Consulte a documentação, se necessário.

Personalizar a cor da barra de status

Para deixar o app mais elegante, personalize a cor da barra de status de acordo com a cor do plano de fundo.

6. 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-superheroes-app.git

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

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