Jetpack Compose no Wear OS

A Google recentemente anunciou na Google I/O o beta do Jetpack Compose para o Wear OS, a verso do Android para Smartwatch. Um dos principais foco do Compose a criao de interface de maneira rpida usando sintaxe declarativa, semelhante ao que h no iOS com SwiftUI, hoje demostrarei a criao de um simples aplicativo em poucos minutos utilizado o que h de mais moderno para desenvolvimento de aplicativos para Android.

O Aplicativo

O aplicativo que vamos desenvolver consiste em controlar a quatidade de copos de gua voc tomou ao logo do dia, para isso vamos precisar da verso mais recente do Android Studio, no meu caso estou utilizado o Android Studio Electric Eel (2022.1.1) Canary 5

Iniciando um novo projeto

Com Android Studio aberto vamos em criar um novo projeto

Na lista de template vai ter um chamando Wear OS >> Empty Compose Activity, selecionaremos e vamos continuar.

O prximo passo configurar o nosso app como nome, id, localizao do projeto, e verso mnima do Android Wear OS. Para esse exemplo utilizaremos a API Level 30, conforme na imagem acima.

Vai ser gerado as seguintes arquivos e pastas, a customizao no Compose no acontecer via os arquivos de resources (RES) em formato XML, em vez disso para diminuir a curvar de aprendizagem boa parte do app feito usado Kotlin, como a personalizao do app que agora fica localizado em /theme, por enquanto vamos apenas trocar as cores.

package com.tiagodanin.waterwearos.presentation.themeimport ...val Blue700 = Color(0xFF1976d2)val Blue900 = Color(0xFF0d47a1)val DeepPurple200 = Color(0xFFb39ddb)val DeepPurple400 = Color(0xFF512da8)internal val wearColorPalette: Colors = Colors(    primary = Blue700,    primaryVariant = Blue900,    secondary = DeepPurple200,    secondaryVariant = DeepPurple400,    error = Color.Red,    onPrimary = Color.Black,    onSecondary = Color.Black,    onError = Color.Black)

Para isso basta informar na referncia da varivel primary, por exemplo, a nova cor que deseja. Nesse caso vou usar um Azul pois remete a gua.

OBS: A funo Color a representao da cor em ARGB, exemplo vermelho (FFFF0000), representado como Color(0xFFFF0000).

Criando a Tela

A tela principal j criada por padro ele fica localizando no MainActivity.kt, se rodamos o app no emulador (ou dispositivo fsico) vamos ter a seguinte tela:

O primeiro passo agora criamos a tela principal do nosso jeito, mas antes de adicionamos elementos relacionados ao nosso aplicativo, precisamos mostrar elemento comuns do sistema, nos smartphones temos a StatusBar (onde mostrar a hora) e NavigationBar, no Wear OS tambm temos algo semelhante que pode mostrar horas, indicador de pgina entre outros aspectos, ele conhecido como Scaffold:

@OptIn(ExperimentalWearMaterialApi::class)@Composablefun WearApp() {    WaterWearOSTheme {        Scaffold(            modifier = Modifier                .fillMaxSize()                .background(MaterialTheme.colors.background),            timeText = {                TimeText()            },        ) {}    }}

Nosso Layout principal montado da seguinte maneira:

• WaterWearOSTheme { UI Compose } o nosso utilitrio para aplicar o tema em todos os elementos de UI que tem dentro dele
• Scaffold(Props) { UI Compose} criar uma estrutura base de layout
  • modifier: Modifier Modificadores de layout e elementos comuns
  • timeText = { UI Compose } informar qual relgio ser mostrado no topo
• TimeText() layout padro do relgio que fica no topo

Uma das vantagens do Jetpack Compose a fcil customizao de elementos j existentes, uma das maneiras mais simples de fazer isso usando os modificadores (Modifier) que esto disponveis na maioria dos componentes, como no caso do Scaffold, onde foi definido que ele ocuparia o mximo da tela (.fillMaxSize()) e teria um fundo na cor preta (.background(MaterialTheme.colors.background)). O Resultado que vamos obter :

Podemos prosseguir agora o app, vamos criar uma nova funo de Compose para uma barra de progresso de quantidade de gua tomada no dia, mas antes preciso importar ela dentro do corpo do Scaffold.

@OptIn(ExperimentalWearMaterialApi::class)@Composablefun WearApp() {    WaterWearOSTheme {        Scaffold(            modifier = Modifier                .fillMaxSize()                .background(MaterialTheme.colors.background),            timeText = {                TimeText()            },        ) {            ProgressIndicatorWater() // Corpo        }    }}@Composablefun ProgressIndicatorWater() {} // Nova UI Compose

Como j de esperado h uma maneira de fazer a barra de progresso usando os componentes padro do Compose, assim como no Jetpack Compose para smartphone, o nome dela [CircularProgressIndicator](https://developer.android.com/reference/kotlin/androidx/wear/compose/material/package-summary#CircularProgressIndicator(kotlin.Float,androidx.compose.ui.Modifier,kotlin.Float,kotlin.Float,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp), e o que diferencia no Wear so poucas coisas, uma delas e a disposio dos elementos sobre a tela.

Vamos olhar uma parte da assinatura desse componente que estamos usando, no momento estamos da seguinte maneira o codigo

@Composablefun ProgressIndicatorWater() {    CircularProgressIndicator(        startAngle = 360f,        endAngle = 0f,        progress = 0.5f,        strokeWidth = 5.dp,        modifier = Modifier            .fillMaxSize()            .padding(all = 10.dp)    )}

O que precisamos para criar a nossa barra saber onde posicionar, para isso precisamos entende algumas das propriedades da nossa tela.

• startAngle ngulo de comeo da barra
• endAngle ngulo de fim da barra
• progress O progresso total, onde 1.0f 100% e 0.0f 0%

A disposio dos ngulos dada da seguinte maneira:

Com base nisso podemos finalizar a barra antes do texto da hora, configurando da seguinte maneira startAngle = 295f, endAngle = 245f:

Estamos perto do final, agora precisamos adicionar informaes (litros tomados) e ao (beber gua) para cada copo de gua, para isso vamos fazer uma nova funo de UI Compose e usar um elemento de layout flexvel para alinhamento:

Os trs principais elementos so:

• Box: elementos dentro do outros / Sobrepostos
• Column: Um em baixo do outro (Coluna)
• Row: Um do lado do outro (Linha)

Queremos a seguinte estrutura no ProgressIndicatorWater

Para isso podemos usar o Box.

@Composablefun ProgressIndicatorWater() {    // Box para centralizar    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {        CircularProgressIndicator(            startAngle = 295f,            endAngle = 245f,            progress = 0.5f,            strokeWidth = 5.dp,            modifier = Modifier                .fillMaxSize()                .padding(all = 10.dp)        )        InfoWater() // Importao do novo Compose    }}@Composablefun InfoWater() {}

J dentro do InfoWater precisamos de algo como Column

@Composablefun InfoWater() {    Column(        modifier = Modifier.fillMaxSize(),        verticalArrangement = Arrangement.Center,        horizontalAlignment = Alignment.CenterHorizontally,    ) {}}

E por fim adicionaremos os dois elementos de composio que planejavamos, nada diferente do que j no Android Mobile com Jetpack Compose. O Boto e o Texto.

@Composablefun InfoWater() {    Column(        modifier = Modifier.fillMaxSize(),        verticalArrangement = Arrangement.Center,        horizontalAlignment = Alignment.CenterHorizontally,    ) {        // Nosso texto        Text(            modifier = Modifier                .fillMaxWidth()                .padding(horizontal = 30.dp),            textAlign = TextAlign.Center,            color = MaterialTheme.colors.primary,            text = "Voc j bebeu 1 litro de gua hoje" // Texto        )        // Nosso boto        Button(            modifier = Modifier.padding(top = 5.dp),            onClick = {                      // Ao do click            },        ) {            Icon(                painter = painterResource(id = R.drawable.cup_water),                contentDescription = "Cup Water",                modifier = Modifier                    .size(ButtonDefaults.DefaultButtonSize)                    .wrapContentSize(align = Alignment.Center),            )        }    }}

O cone em questo que importei no padro do kit de desenvolvimento, voc pode baixa ele por fora, eu utilizo o Material Design Icons Community.

Depois de feito o donwload do SVG dele, no menu de opes da pasta res, selecione:

Lembrando de que para importar voc pode usar o mesmo nome, exemplo R.drawable.[nome].

Lgica

por fim a parte lgica, criaremos um estado para quantidade de litros:
private val count: MutableState<Float> = mutableStateOf(0f)

e vamos modificar a nossa barra de progresso para levar em conta que 3 litros o ideal.

@Composablefun ProgressIndicatorWater() {    val recomedByDay = 3.0f // 3 Litros    // Progresso = Todal do dia / Recomendao    val progressOfDay: Float = count.value / recomedByDay    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {        CircularProgressIndicator(            startAngle = 295f,            endAngle = 245f,            progress = progressOfDay, // Valor do progresso            strokeWidth = 5.dp,            modifier = Modifier                .fillMaxSize()                .padding(all = 10.dp)        )        InfoWater()    }}

O mesmo com nosso texto e boto, vamos mostrar a quantidade e no evento do clique do boto considera 500ml gua ingerida.

@Composablefun InfoWater() {    Column(        modifier = Modifier.fillMaxSize(),        verticalArrangement = Arrangement.Center,        horizontalAlignment = Alignment.CenterHorizontally,    ) {        Text(            modifier = Modifier                .fillMaxWidth()                .padding(horizontal = 30.dp),            textAlign = TextAlign.Center,            color = MaterialTheme.colors.primary,            text = "Voc j bebeu ${count.value} litro de gua hoje" // Resultado        )        Button(            modifier = Modifier.padding(top = 5.dp),            onClick = { count.value += 0.5f }, // Ao        ) {            Icon(                painter = painterResource(id = R.drawable.cup_water),                contentDescription = "airplane",                modifier = Modifier                    .size(ButtonDefaults.DefaultButtonSize)                    .wrapContentSize(align = Alignment.Center),            )        }    }}

Se abrimos o app novamente vamos o seguinte resultado

No desenvolvimento desse app foram usados alguns dos componentes disponveis do Jetpack Compose para Wear OS, no link abaixo voc pode conferir diversos outros UI Compose:

developer.android.com/training/wearables/compose

Voc pode seguir as implementaes adicionado novas funcionalidade como persitencia de dados

Link do repositrio: Github.com/TiagoDanin/WearOS-Count-Water-App