Codelab sobre o Compose para Wear OS

1. Introdução

Com o Compose para Wear OS, você pode usar o que aprendeu sobre a criação de apps com o Jetpack Compose e criar apps para wearables.

Com o Material Design integrado, o Compose para Wear OS simplifica e acelera o desenvolvimento da interface e ajuda você a criar apps incríveis usando menos código.

Para concluir este codelab, é necessário que você tenha algum conhecimento sobre o Compose, mas você não precisa ser especialista.

Vamos usar o Horologist (link em inglês), um projeto de código aberto criado com base no Jetpack Compose, que ajuda os desenvolvedores a acelerar o desenvolvimento de apps.

Você vai criar vários elementos combináveis (simples e complexos) específicos do Wear e, no final, vai começar a criar seus próprios apps para Wear OS. Vamos começar!

O que você vai aprender

Semelhanças/diferenças entre sua experiência anterior com o Compose
Elementos combináveis simples e como funcionam no Wear OS
Elementos combináveis específicos do Wear OS
O elemento LazyColumn do Wear OS (ScalingLazyColumn)
A versão do elemento Scaffold do Wear OS

O que você vai criar

Você vai criar um app simples que mostra uma lista rolável de elementos otimizados para Wear OS.

Como você vai usar o Scaffold, também terá um texto curvado mostrando o horário na parte de cima da tela, uma vinheta e um indicador de rolagem na lateral do dispositivo.

Confira como ele vai ficar quando você terminar o codelab:

Pré-requisitos

Noções básicas de desenvolvimento para Android
Noções básicas do Kotlin
Noções básicas do Compose

2. Etapas da configuração

Nesta etapa, você vai configurar seu ambiente e fazer o download do projeto inicial.

O que é necessário

Versão estável mais recente do Android Studio.
Dispositivo ou emulador do Wear OS. Novo usuário? Confira como configurar esse recurso.

Fazer o download do código

Se você tiver o git instalado, execute o comando abaixo para clonar o código deste repositório. Para verificar se o git está instalado, digite git --version no terminal ou na linha de comando e verifique se ele é executado corretamente.

git clone https://github.com/android/codelab-compose-for-wear-os.git
cd compose-for-wear-os

Caso você não tenha o git, clique no botão abaixo para fazer o download de todo o código para este codelab:

Você pode executar qualquer um dos módulos no Android Studio a qualquer momento mudando a configuração de execução na barra de ferramentas.

Abrir o projeto no Android Studio

Na janela "Welcome to Android Studio", selecione Open an Existing Project.
Selecione a pasta [Download Location]
Depois que o Android Studio importar o projeto, teste se você pode executar os módulos start e finished em um emulador ou dispositivo físico do Wear OS.
O módulo start será parecido com a captura de tela abaixo. É nele que você vai fazer todo o trabalho.

Conhecer o código inicial

build.gradle contém uma configuração básica de app. Ele inclui as dependências necessárias a fim de criar um app combinável para Wear OS. Abordaremos as semelhanças e diferenças entre o Jetpack Compose e a versão para Wear OS.
O main > AndroidManifest.xml inclui os elementos necessários para criar um app para Wear OS. Esses elementos são os mesmos utilizados em apps que não usam o Compose e são parecidos com os de apps para dispositivos móveis. Por isso, não revisaremos esse ponto.
A pasta main > theme/ contém os arquivos Color, Type e Theme usados pelo Compose para o tema.
O main > MainActivity.kt contém um código boilerplate para criar um app com o Compose, além dos elementos combináveis de nível superior do app, como Scaffold e ScalingLazyList.
O main > ReusableComponents.kt contém funções para a maioria dos elementos específicos do Wear que vamos criar. Faremos grande parte do nosso trabalho nesse arquivo.

3. Analisar as dependências

A maioria das mudanças de dependência relacionadas ao Wear são feitas nas primeiras camadas de arquitetura, destacadas em vermelho abaixo.

Isso significa que muitas das dependências que você já usa com o Jetpack Compose não mudam ao criar um app para Wear OS. Por exemplo, as dependências de interface, ambiente de execução, compilador e animação permanecerão as mesmas.

No entanto, você vai precisar usar as bibliotecas Material, Foundation e Navigation do Wear OS, que são diferentes das usadas anteriormente.

Veja abaixo uma comparação que ajuda a esclarecer as diferenças:

Dependência do Wear OS (androidx.wear.*)	Comparação	Dependência padrão (androidx.*)
androidx.wear.compose:compose-material	*em vez de*	androidx.compose.material:material ₁
androidx.wear.compose:compose-navigation	*em vez de*	androidx.navigation:navigation-compose
androidx.wear.compose:compose-foundation	*além de*	androidx.compose.foundation:foundation
androidx.wear.compose:compose-ui-tooling	*além de*	androidx.compose.ui:ui-tooling-preview

1. Os desenvolvedores podem continuar usando outras bibliotecas relacionadas ao Material, como a ondulação e os ícones do Material estendidos com a biblioteca Wear Compose Material.

Abra o build.gradle e procure "TODO: Review Dependencies" no módulo start. Essa etapa serve apenas para revisar as dependências. Você ainda não adicionará nenhum código.

start/build.gradle:

   def composeBom = platform(libs.androidx.compose.bom)

    // General compose dependencies
    implementation composeBom
    implementation libs.androidx.activity.compose
    implementation libs.compose.ui.tooling.preview

    implementation(libs.androidx.material.icons.extended)

    // Compose for Wear OS Dependencies
    implementation libs.wear.compose.material

    // Foundation is additive, so you can use the mobile version in your Wear OS app.
    implementation libs.wear.compose.foundation

    // Compose preview annotations for Wear OS.
    implementation(libs.androidx.compose.ui.tooling)

    debugImplementation libs.compose.ui.tooling
    debugImplementation libs.androidx.ui.test.manifest
    debugImplementation composeBom

Você reconhecerá várias das dependências gerais do Compose, então elas não serão abordadas.

Vamos às dependências do Wear OS.

Conforme descrito anteriormente, apenas a versão específica para Wear OS do material (androidx.wear.compose:compose-material) é incluída. Isso significa que você não verá nem incluirá androidx.compose.material:material no projeto.

É importante destacar que você pode usar outras bibliotecas do Material com o Wear Material. Neste codelab, isso será feito pela inclusão de androidx.compose.material:material-icons-extended.

Por fim, incluímos a biblioteca foundation do Wear para Compose (androidx.wear.compose:compose-foundation). Essa biblioteca é aditiva e pode ser usada com a foundation padrão que você já usou antes. É provável que você já tenha percebido que nós a incluímos nas dependências gerais do Compose.

Agora que entendemos as dependências, podemos tratar do app principal.

4. Analisar a MainActivity

Realizaremos todo o nosso trabalho no módulo

start

Por isso, todos os arquivos que você abrir precisarão estar lá.

Para começar, abra o arquivo MainActivity no módulo start.

Essa é uma classe muito simples que estende a ComponentActivity e usa setContent { WearApp() } para criar a IU.

Por já ter certo conhecimento sobre o Compose, você provavelmente conhece esse processo. Estamos apenas configurando a interface.

Role a tela para baixo até a função combinável WearApp(). Antes de abordarmos o código em si, observe que há vários comentários "TODO" espalhados por ele. Cada um representa uma etapa deste codelab. Você pode ignorar esse comentários por enquanto.

O código vai ser semelhante a este:

Código na função WearApp():

WearAppTheme {
     /* *************************** Part 4: Wear OS Scaffold *************************** */
    // TODO (Start): Create a AppScaffold (Wear Version)

    // TODO: Swap to ScalingLazyColumnState
    val listState = rememberLazyListState()

    /* *************************** Part 4: Wear OS Scaffold *************************** */
    // TODO (Start): Create a ScreenScaffold (Wear Version)

    // Modifiers used by our Wear composables.
    val contentModifier = Modifier.fillMaxWidth().padding(bottom = 8.dp)
    val iconModifier = Modifier.size(24.dp).wrapContentSize(align = Alignment.Center)

    /* *************************** Part 3: ScalingLazyColumn *************************** */
    // TODO: Swap a ScalingLazyColumn (Wear's version of LazyColumn)
    LazyColumn(
        modifier = Modifier.fillMaxSize(),
        contentPadding = PaddingValues(
            top = 32.dp,
            start = 8.dp,
            end = 8.dp,
            bottom = 32.dp,
        ),
        verticalArrangement = Arrangement.Center,
        state = listState,
    ) {
        // TODO: Remove item; for beginning only.
        item { StartOnlyTextComposables() }

        /* ******************* Part 1: Simple composables ******************* */
        item { ButtonExample(contentModifier, iconModifier) }
        item { TextExample(contentModifier) }
        item { CardExample(contentModifier, iconModifier) }

        /* ********************* Part 2: Wear unique composables ********************* */
        item { ChipExample(contentModifier, iconModifier) }
        item { ToggleChipExample(contentModifier) }
        }

    // TODO (End): Create a ScreenScaffold (Wear Version)
    // TODO (End): Create a AppScaffold (Wear Version)
}

Comece definindo o tema WearAppTheme { }. Isso é feito exatamente da mesma forma que você já fez antes, ou seja, definindo um MaterialTheme com cores, tipografias e formas.

No caso do Wear OS, geralmente recomendamos usar as formas padrão do Material Wear, que são otimizadas para dispositivos redondos. Por isso, ao analisar o arquivo theme/Theme.kt, você vai notar que não modificamos as formas.

Se quiser, você pode abrir o theme/Theme.kt para conferir mais detalhes, mas o processo é igual ao usado para smartphones.

Depois, criaremos alguns modificadores para os elementos combináveis do Wear que vamos desenvolver. Assim, eles não precisam ser especificados todas as vezes. Basicamente, centralizamos o conteúdo e adicionamos padding.

Em seguida, criamos uma LazyColumn que é usada a fim de produzir uma lista de rolagem vertical para muitos itens, como você fez anteriormente.

Código:

item { StartOnlyTextComposables() }

/* ******************* Part 1: Simple composables ******************* */
item { ButtonExample(contentModifier, iconModifier) }
item { TextExample(contentModifier) }
item { CardExample(contentModifier, iconModifier) }

/* ********************* Part 2: Wear unique composables ********************* */
item { ChipExample(contentModifier, iconModifier) }
item { ToggleChipExample(contentModifier) }

Com relação aos itens em si, apenas StartOnlyTextComposables() produz uma interface. O restante vai ser preenchido ao longo deste codelab.

Essas funções estão no arquivo ReusableComponents.kt, que vai ser abordado na próxima seção.

Vamos começar a usar o Compose para Wear OS.

5. Adicionar elementos simples combináveis

Começaremos com três elementos (Button, Text e Card) que você provavelmente já conhece.

Primeiro, removeremos o elemento Hello World.

Pesquise "TODO: Remove item" e apague o comentário e a linha abaixo dele:

Etapa 1

// TODO: Remove item; for beginning only.
item { StartOnlyTextComposables() }

Agora, vamos adicionar o primeiro elemento combinável.

Criar um botão combinável

Abra o ReusableComponents.kt no módulo start, pesquise "TODO: Create a Button Composable" e substitua o método de composição atual pelo código a seguir.

Etapa 2

// TODO: Create a Button Composable (with a Row to center)
@Composable
fun ButtonExample(
    modifier: Modifier = Modifier,
    iconModifier: Modifier = Modifier
) {
    Row(
        modifier = modifier,
        horizontalArrangement = Arrangement.Center
    ) {
        // Button
        Button(
            modifier = Modifier.size(ButtonDefaults.LargeButtonSize),
            onClick = { /* ... */ },
        ) {
            Icon(
                imageVector = Icons.Rounded.Phone,
                contentDescription = "triggers phone action",
                modifier = iconModifier
            )
        }
    }
}

Agora, a função combinável ButtonExample(), onde o código se encontra, vai gerar um botão centralizado.

Vamos analisar o código:

A função Row só é usada aqui para centralizar o elemento Button na tela redonda. Note que fazemos isso aplicando o modificador que criamos na MainActivity e o transmitindo para essa função. Ao usar a rolagem em uma tela circular mais tarde, precisamos garantir que o conteúdo não seja cortado, e é por isso que ele é centralizado.

Em seguida, criamos o Button. O código é o mesmo usado anteriormente para um botão em apps, mas neste caso, usamos ButtonDefault.LargeButtonSize. É importante que você use esses tamanhos predefinidos, porque eles são otimizados para dispositivos Wear OS.

Depois, definimos o evento de clique como uma lambda vazia. Em nosso caso, como os elementos combinável servem apenas para demonstração, não precisamos disso. No entanto, a comunicação com um ViewModel, por exemplo, seria necessária em um app real para executar a lógica de negócios.

Em seguida, definimos um ícone dentro do botão. O código é o mesmo usado antes para o Icon. O ícone também é derivado da biblioteca androidx.compose.material:material-icons-extended.

Por fim, definimos o modificador configurado anteriormente para os ícones.

Se você executar o app, o resultado vai ficar assim:

É provável que você já tenha programado códigos como esse antes, o que é ótimo. A diferença é que agora você tem um botão otimizado para o Wear OS.

É muito simples. Vamos analisar outro caso.

Criar um elemento combinável de texto

No ReusableComponents.kt, pesquise "TODO: Create a Text Composable" e substitua o método de composição atual pelo código abaixo.

Etapa 3

// TODO: Create a Text Composable
@Composable
fun TextExample(modifier: Modifier = Modifier) {
    Text(
        modifier = modifier,
        textAlign = TextAlign.Center,
        color = MaterialTheme.colors.primary,
        text = stringResource(R.string.device_shape)
    )
}

Vamos criar o elemento combinável Text, definir o modificador, alinhar o texto, definir uma cor e, por fim, configurar o texto usando um recurso de string.

Para desenvolvedores do Compose, os elementos combináveis de texto são bastante conhecidos e o código é idêntico ao usado antes.

Este é o resultado:

A função combinável TextExample(), em que colocamos nosso código, agora gera um elemento combinável de texto com a nossa cor principal do Material Design. A string é extraída do arquivo res/values/strings.xml.

Estamos indo bem. Vamos analisar o último elemento combinável, o Card.

Criar um card combinável

No ReusableComponents.kt, pesquise "TODO: Create a Card" e substitua o método combinável atual pelo código abaixo.

Etapa 4

// TODO: Create a Card (specifically, an AppCard) Composable
@Composable
fun CardExample(
    modifier: Modifier = Modifier,
    iconModifier: Modifier = Modifier
) {
    AppCard(
        modifier = modifier,
        appImage = {
            Icon(
                imageVector = Icons.Rounded.Message,
                contentDescription = "triggers open message action",
                modifier = iconModifier
            )
        },
        appName = { Text("Messages") },
        time = { Text("12m") },
        title = { Text("Kim Green") },
        onClick = { /* ... */ }
    ) {
        Text("On my way!")
    }
}

O Wear é um pouco diferente aqui, porque há dois cards principais: AppCard e TitleCard.

Em nosso caso, queremos mostrar um Icon no card, então vamos usar o AppCard, já que o TitleCard tem menos slots. Consulte o guia Cards para saber mais.

Vamos criar o elemento combinável AppCard, definir o modificador dele, adicionar um Icon, incluir vários parâmetros combináveis Text (um para cada espaço diferente no card) e, por fim, definir o texto principal.

Este é o resultado:

Você provavelmente percebeu que, para esses elementos combináveis, o código do Compose é praticamente o mesmo usado antes, o que é ótimo. Isso significa que você pode colocar em prática todo o conhecimento que já adquiriu.

Agora, vamos analisar alguns novos elementos combináveis.

6. Adicionar elementos combináveis exclusivos para Wear OS

Nesta seção, abordaremos os elementos Chip e ToggleChip.

Criar um ícone combinável

Os ícones são especificados nas diretrizes do Material Design (link em inglês), mas não há uma função combinável na biblioteca padrão do Material.

O objetivo deles é permitir uma ação rápida, executada com um único toque. Isso é muito útil para um dispositivo Wear, que tem espaço de tela limitado.

Para você ter uma ideia do que pode ser criado, confira algumas variações da função combinável Chip:

Vamos criar o código.

No ReusableComponents.kt, pesquise "TODO: Create a Chip" e substitua o método combinável atual pelo código abaixo.

Etapa 5

// TODO: Create a Chip Composable
@Composable
fun ChipExample(
    modifier: Modifier = Modifier,
    iconModifier: Modifier = Modifier
) {
    Chip(
        modifier = modifier,
        onClick = { /* ... */ },
        label = {
            Text(
                text = "5 minute Meditation",
                maxLines = 1,
                overflow = TextOverflow.Ellipsis
            )
        },
        icon = {
            Icon(
                imageVector = Icons.Rounded.SelfImprovement,
                contentDescription = "triggers meditation action",
                modifier = iconModifier
            )
        },
    )
}

Como o elemento combinável Chip usa muitos dos mesmos parâmetros utilizados em outros elementos (modificador e onClick), não precisamos relembrar esses pontos.

Ele também tem um rótulo, para o qual criaremos um ícone e um elemento combinável Text.

O código do Icon precisa ser exatamente igual ao que você viu em outros elementos combináveis. A diferença é que, para esse caso, extraímos o ícone Self Improvement da biblioteca androidx.compose.material:material-icons-extended.

Vamos ver o resultado. Não se esqueça de rolar a tela para baixo:

Agora, vamos abordar a variação do Toggle, o elemento combinável ToggleChip.

Criar um elemento combinável ToggleChip

O ToggleChip é semelhante a um Chip, mas permite que o usuário interaja com um botão de opção, de alternância ou uma caixa de seleção.

No ReusableComponents.kt, pesquise "TODO: Create a ToggleChip" e substitua o método combinável atual pelo código abaixo.

Etapa 6

// TODO: Create a ToggleChip Composable
@Composable
fun ToggleChipExample(modifier: Modifier = Modifier) {
    var checked by remember { mutableStateOf(true) }
    ToggleChip(
        modifier = modifier,
        checked = checked,
        toggleControl = {
            Switch(
                checked = checked,
                modifier = Modifier.semantics {
                    this.contentDescription = if (checked) "On" else "Off"
                }
            )
        },
        onCheckedChange = {
            checked = it
        },
        label = {
            Text(
                text = "Sound",
                maxLines = 1,
                overflow = TextOverflow.Ellipsis
            )
        }
    )
}

Agora, a função combinável ToggleChipExample(), em que esse código se encontra, gera um ToggleChip usando um botão de alternância, em vez de uma caixa de seleção ou um botão de opção.

Primeiro, vamos criar um MutableState. Não fizemos isso nas outras funções porque estamos fazendo apenas demonstrações da interface para apresentar as possibilidades do Wear OS.

Em um app normal, é recomendável transmitir o estado marcado e a lambda para processar o toque. Desse modo, o elemento pode ficar sem estado (Saiba mais).

Estamos usando um caso simples apenas para mostrar como o ToggleChip funciona com a alternância, mesmo sem causar nenhuma mudança de estado.

Em seguida, vamos definir o modificador, o estado marcado e o controle de alternância para mostrar a chave que queremos.

Vamos criar uma lambda para mudar o estado e, por fim, definir o marcador com um elemento combinável Text e configurar alguns parâmetros básicos.

Este é o resultado:

Agora você já viu vários elementos específicos do Wear OS. Como mencionado, a maior parte do código é quase igual ao código usado antes.

Vamos para algo um pouco mais avançado.

7. Migrar para o ScalingLazyColumn

É provável que você já tenha usado o elemento LazyColumn nos seus apps para dispositivos móveis para produzir uma lista de rolagem vertical.

Como dispositivos redondos são menores nas partes de cima e de baixo, há menos espaço para mostrar itens. Por isso, o Wear OS tem uma versão própria do LazyColumn, que oferece melhor suporte para esses dispositivos.

O ScalingLazyColumn estende o LazyColumn para que esse elemento ofereça suporte para o escalonamento e a transparência na parte de cima e de baixo da tela, deixando o conteúdo mais legível para o usuário.

Veja uma demonstração:

Observe que o item é redimensionado para o tamanho original à medida que se aproxima do centro e, ao se afastar, diminui novamente e fica mais transparente.

Confira um exemplo mais concreto de um app:

Descobrimos que isso é muito útil para facilitar a leitura.

Agora que você sabe como a ScalingLazyColumn funciona na prática, vamos começar a converter nossa LazyColumn.

Vamos usar a Horologist ScalinglazyColumn (link em inglês) para garantir que os itens da lista tenham o padding correto e não sejam cortados em diferentes tamanhos de tela do dispositivo.

Converter em um ScalingLazyColumnState do Horologist

Em MainActivity.kt, pesquise "TODO: Swap to ScalingLazyColumnState" e substitua o comentário e a linha abaixo por esse código. Observe como especificamos quais são o primeiro e o último componentes para que os melhores valores de padding sejam usados para evitar qualquer recorte de conteúdo.

Etapa 7

// TODO: Swap to ScalingLazyColumnState
val listState = rememberResponsiveColumnState(
    contentPadding = ScalingLazyColumnDefaults.padding(
        first = ItemType.SingleButton,
        last = ItemType.Chip,
    ),
)

Os nomes são quase idênticos. Assim como o LazyListState processa o estado de uma LazyColumn, o ScalingLazyColumnState processa o estado de uma ScalingLazyColumn.

Converter em uma ScalingLazyColumn do Horologist

Agora, vamos trocar para o elemento ScalingLazyColumn.

No arquivo MainActivity.kt, pesquise "TODO: Swap a ScalingLazyColumn". Primeiro, substitua LazyColumn por Horologist ScalingLazyColumn.

Em seguida, remova contentPadding, verticalArrangement, modifier e autocentering. A ScalingLazyColumn do Horologist já oferece configurações padrão que garantem um efeito visual melhor, já que a maior parte da janela de visualização será preenchida com itens de lista. Na maioria dos casos, os parâmetros padrão são suficientes. Se o cabeçalho estiver na parte de cima da tela, recomendamos que você o coloque no ResponsiveListHeader (link em inglês) como o primeiro item.

Etapa 8

// TODO: Swap a ScalingLazyColumn (Wear's version of LazyColumn)
ScalingLazyColumn(
    columnState = listState

Pronto! Este é o resultado:

Você vai notar que o conteúdo é redimensionado e a transparência é ajustada na parte de cima e de baixo da tela à medida que o usuário usa a rolagem, exigindo pouco trabalho para migração.

Esse processo pode ser visto claramente nos elementos de meditação ao rolar a tela para cima e para baixo.

Agora, vamos ao último tema: o Scaffold do Wear OS.

8. Adicionar um Scaffold

O Scaffold oferece uma estrutura de layout para ajudar você a organizar as telas em padrões comuns, assim como acontece em apps para dispositivos móveis. Contudo, diferente de barras de apps, FABs, gavetas ou outros elementos específicos para dispositivos móveis, ele tem suporte para quatro layouts específicos do Wear com componentes de nível superior: horário, indicador de rolagem/posição e indicador de página.

Os elementos ficam assim:

	`TimeText`
	`PositionIndicator`
	`PageIndicator`

Vamos analisar os três primeiros componentes em detalhes, mas antes vamos implementar o Scaffold.

Vamos usar o AppScaffold e o ScreenScaffold do Horologist, que adicionam um TimeText

por padrão à tela e garantem a animação correta ao navegar entre eles.

Além disso, o ScreenScaffold adiciona um PositionIndicator para conteúdo rolável.

Adicionar um Scaffold

Vamos adicionar o código boilerplate do AppScaffold e do ScreenScaffold agora.

Encontre o comentário TODO (Start): Create a AppScaffold (Wear Version) e adicione este código abaixo dele.

Etapa 9

WearAppTheme {
// TODO (Start): Create a Horologist AppScaffold (Wear Version)
AppScaffold {

Encontre "TODO (Start): Create a ScreenScaffold (Wear Version)" e adicione o código abaixo dele.

// TODO (Start): Create a Horologist ScreenScaffold (Wear Version)
ScreenScaffold(
    scrollState = listState,
){

Agora, adicione a chave de fechamento no local certo.

Encontre "TODO (End): Create a ScreenScaffold (Wear Version)" e adicione a chave de fechamento:

Etapa 10

// TODO (End): Create a ScreenScaffold (Wear Version)
}

Encontre "TODO (End): Create a AppScaffold (Wear Version)" e adicione a chave de fechamento:

Etapa 10

// TODO (End): Create a AppScaffold (Wear Version)
}

Primeiro, vamos executar o app. Você verá algo como:

Observe que ele adiciona:

Um TimeText que usa texto curvado internamente e oferece aos desenvolvedores uma maneira fácil de mostrar o horário, sem que seja necessário adicionar o elemento combinável nem ter trabalho com classes de horário. Além disso, as diretrizes do Material Design recomendam que você mostre o horário na parte de cima da tela no app, e ele desaparece durante a rolagem.
Um PositionIndicator (também conhecido como indicador de rolagem), que é um indicador do lado direito da tela que mostra a localização atual do indicador com base no tipo de objeto de estado transmitido. Em nosso caso, o estado vai ser ScalingLazyColumnState (link em inglês).

Vamos ver como ficou agora:

Tente rolar para cima e para baixo. O indicador de rolagem só será mostrado enquanto você estiver rolando a tela.

Muito bem! Você concluinterface uma demonstração da interface com a maioria dos elementos combináveis do Wear OS.

9. Parabéns

Parabéns! Você aprendeu as noções básicas do Compose no Wear OS.

Agora, você pode colocar em prática todo o conhecimento que você já tem sobre Compose e começar a criar apps incríveis para Wear OS.

Qual é a próxima etapa?

Confira os outros codelabs do Wear OS:

Criar seu primeiro bloco do Wear OS

Feedback

Queremos saber sobre suas experiências com o Compose para Wear OS e o que você pode criar. Participe da discussão no canal #compose-wear do Kotlin Slack (link em inglês) e continue enviando feedback no Issue Tracker.

Aproveite os códigos!

Codelab sobre o Compose para Wear OS

1. Introdução

O que você vai aprender

O que você vai criar

Pré-requisitos

2. Etapas da configuração

O que é necessário

Fazer o download do código

Abrir o projeto no Android Studio

Conhecer o código inicial

3. Analisar as dependências

4. Analisar a MainActivity

5. Adicionar elementos simples combináveis

Criar um botão combinável

Criar um elemento combinável de texto

Criar um card combinável

6. Adicionar elementos combináveis exclusivos para Wear OS

Criar um ícone combinável

Criar um elemento combinável ToggleChip

7. Migrar para o ScalingLazyColumn

Converter em um ScalingLazyColumnState do Horologist

Converter em uma ScalingLazyColumn do Horologist

8. Adicionar um Scaffold

Adicionar um Scaffold

9. Parabéns

Qual é a próxima etapa?

Leia mais

Feedback