Jetpack Compose for Put on OS

With Jetpack Compose for Put on OS, you possibly can construct stunning consumer interfaces for watches. It has tons of elements to select from. On this tutorial, you’ll find out about all the important elements — akin to Inputs, Dialogs, Progress Indicators and Web page Indicators. You’ll additionally study when to make use of a Vignette and a TimeText.

Getting Began

Obtain the starter mission by clicking the Obtain Supplies button on the high or backside of the tutorial. Unzip it and import into Android Studio. Construct and run.

The OneBreath app is a set of breath-holding instances. It additionally has a stopwatch to trace new data and save them within the assortment.

Mess around with the app to get a sense of what you’ll construct on this tutorial.

Take a look at ApneaRecordLocalSource.kt and ApneaRecordRepository.kt – these courses mock an area information supply. It is going to assist to check the app, nevertheless it gained’t maintain your information between app launches.

Look additionally at StopWatchViewModel.kt. That is the view mannequin for the long run stopwatch display. It is going to maintain counting time.

You don’t have to alter something in these three courses. Simply deal with the UI.

Utilizing Appropriate Dependencies

Swap to the starter mission. Go to the app-level construct.gradle and add the next dependencies:

implementation "androidx.put on.compose:compose-material:$wear_compose_version"
implementation "androidx.put on.compose:compose-navigation:$wear_compose_version"
implementation "androidx.put on.compose:compose-foundation:$wear_compose_version"

Why do you want these? In a Put on OS app, it is best to use the Put on OS variations for compose-material and compose-navigation as a result of they’re completely different from their common siblings. As for the compose-foundation library, it builds upon its common model so you will have each dependencies.

Now that you’ve got all mandatory dependencies, construct and run. You’ll see the next display:

Time to dive in!

Watching over the Navigation

To start, you’ll add Compose navigation so you possibly can navigate between screens.

Navigating Compose for Put on OS

Navigation in Compose for Put on OS is quite a bit just like the common Compose navigation.

Open MainActivity.kt and declare a NavHostController above apneaRecordLocalSource:

non-public lateinit var navController: NavHostController

In setContent() above OneBreathTheme(), initialize a swipeDismissableNavController:

navController = rememberSwipeDismissableNavController()

The distinction between Put on OS and an everyday app is in how the consumer navigates again. Since watches don’t have again buttons, navigation again occurs when customers swipe to dismiss. That’s why you’ll use a SwipeDissmissableNavHost() right here.

Contained in the OneBreathTheme(), substitute the momentary Field() composable with the entry level to the app:

OneBreathApp(
  swipeDismissableNavController = navController,
  apneaRecordRepository = apneaRecordRepository
)

Right here, you move the not too long ago created navController and the repository to OneBreathApp(), the place you’ll arrange the app navigation.

Go to OneBreathApp.kt. As you possibly can see, it makes use of Scaffold(). However not like the common Compose Scaffold(), it has new attributes like timeText and vignette. You’ll get again to those later. For now, deal with SwipeDismissableNavHost(), the place you move navController and startDestination as parameters.

Take a look at the Vacation spot.kt file within the ui/navigation folder:

sealed class Vacation spot(
  val route: String
) {
  object Information : Vacation spot("data")
  object DayTrainingDetails : Vacation spot("dayTrainingDetails")
  object StopWatch : Vacation spot("stopWatch")
}

This sealed class describes all of the potential routes within the app. Now you possibly can arrange navigation for these routes. In OneBreathApp.kt, substitute SwipeDismissableNavHost‘s empty physique with the related routes:

composable(route = Vacation spot.StopWatch.route) {
}

composable(route = Vacation spot.TrainingDayDetails.route) {
}

composable(route = Vacation spot.Information.route) {
}

Add the next inside the primary route composable:

val stopWatchViewModel = StopWatchViewModel(apneaRecordRepository)
StopWatchScreen(stopWatchViewModel)

Right here, you create a StopWatchViewModel and move it to the StopWatchScreen().

The following route is Vacation spot.TrainingDayDetails. This can lead you to the TrainingDayDetailsScreen(), the place you’ll see the stats for all of the breath holds you tried on that day. In a big app, you’d create a particulars display route based mostly on the id of the merchandise you wish to show and use that id in a related DetailsViewModel. However this app is moderately easy, so you possibly can simply maintain a reference to a particular coaching day within the OneBreathApp(). Thus, add this line above Scaffold():

var selectedDay: TrainingDay? = null

Write this code contained in the composable with Vacation spot.TrainingDayDetails:

selectedDay?.let { day ->  // 1
  TrainingDayDetailsScreen(
    day.breaths,  // 2
    onDismissed = { swipeDismissableNavController.navigateUp() }  // 3
   )
}

Right here’s what’s occurring within the code above:

1. Navigate solely after you set the selectedDay.
2. Solely the checklist of makes an attempt is important to show the small print.
3. In contrast to the earlier route, you set the onDismissed() callback explicitly right here since you’re utilizing SwipeToDismissBox() in TrainingDayDetails().

HorizontalViewPager and SwipeToDismissBox Navigation

Earlier than transferring on to the subsequent vacation spot, open TrainingDayDetailsScreen.kt. The rationale why the compose navigation in OneBreathApp.kt is completely different for this display is the SwipeToDismissBox() composable. The SwipeToDismissBox() has two states:

if (isBackground) {
  Field(modifier = Modifier.fillMaxSize())  // 1
} else {
  Field(
    modifier = Modifier
      .fillMaxSize()
      .edgeSwipeToDismiss(state)  // 2
  ) {
    HorizontalPager(state = pagerState, rely = maxPages) { web page ->
      selectedPage = pagerState.currentPage
      DetailsView(makes an attempt[page].utbTime, makes an attempt[page].totalDuration)
    }
  }
}

1. SwipeToDismissBox() has a background scrim, which on this case is only a black full-screen field.
2. In a standard state, this Field() composable holds a HorizontalPager, which lets you scroll by means of the small print display horizontally, but additionally makes swipe-to-dismiss motion unimaginable. That’s why you should place it inside a SwipeToDismissBox() and have the edgeSwipeToDismiss() modifier to navigate again solely when the consumer swipes proper within the small house on the left a part of the display.

Lastly, arrange the final navigation route: Vacation spot.Information. Again in OneBreathApp.kt in SwipeDismissableNavHost(), add the next code contained in the related composable:

RecordsListScreen(
  apneaRecordRepository.data,  // 1
  onClickStopWatch = {  // 2
    swipeDismissableNavController.navigate(
      route = Vacation spot.StopWatch.route
    )
  },
  onClickRecordItem = { day ->  // 3
    selectedDay = day
    swipeDismissableNavController.navigate(
      route = Vacation spot.TrainingDayDetails.route
    )
  }
)

Right here’s what’s occurring:

1. The data checklist display shows a listing of data from the native supply.
2. If you faucet the New Coaching button, it redirects you to the stopwatch display.
3. If you select a specific coaching day from the checklist, it redirects to the coaching day particulars display.

As you possibly can see, for the clicking occasions, this composable makes use of the 2 routes you’ve simply arrange.

You’re executed with the navigation — good job! However there’s nothing spectacular to see within the app but. So, it’s time to study in regards to the Compose UI elements for Put on OS.

Attending to Know the Elements

Open RecordsListScreen.kt and add the next to RecordsListScreen() physique:

ScalingLazyColumn {  // 1
  merchandise {
    StopWatchListItemChip(onClickStopWatch)  // 2
  }
  for (merchandise in data) {
    merchandise {
      RecordListItemChip(merchandise, onClickRecordItem)
    }
  }
}

Right here’s what this implies:

1. ScalingLazyColumn() is a Put on OS analog for LazyColumn(). The distinction is that it adapts to the spherical watch display. Construct and refresh the previews in RecordsListScreen to get a visible illustration.
2. Each merchandise within the ScalingLazyColumn() is a Chip(). Take a look at StopWatchListItemChip() and RecordListItemChip() — they’ve placeholders for onClick, icon, label, secondaryLabel and different parameters.

Construct and run. You’ll see a set of breath holds:

You may both begin a brand new coaching or select a coaching day report from the checklist after which swipe to dismiss.

Congratulations — you nailed the navigation!

Now, open StopWatchScreen.kt. This display shows the information processed within the StopWatchViewModel. On high of the StopWatchScreen() composable, there are two states that affect the recomposition:

val state by stopWatchViewModel.state.collectAsState() // 1
val period by stopWatchViewModel.period.collectAsState() // 2

1. This state handles all elements of the UI that don’t depend on the present stopwatch time, such because the StartStopButton() or the textual content trace on high of it.
2. The period state will set off recomposition of the progress indicator and the time textual content each second.

For now, the StopWatchScreen() solely counts the time. However as soon as the consumer finishes their breath maintain, the app ought to ask for a sure enter. This can be a good place to make use of a dialog.

Utilizing Dialogs

You should utilize Put on OS dialogs similar to the common Compose dialogs. Take a look at the dialog() composable in StopWatchScreen():

Dialog(
  showDialog = showSaveDialog,  // 1
  onDismissRequest = { showSaveDialog = false }  // 2
) {
  SaveResultDialog(
    onPositiveClick = {  // 3
    },
    onNegativeClick = {
    },
    outcome = period.toRecordString()
  )
}

Right here’s what’s occurring:

1. You launched showSaveDialog on the high of StopWatchScreen(). It controls whether or not this dialog is seen or not.
2. A easy callback resets showSaveDialog to false and hides the dialog.
3. SaveResultDialog() is an Alert() dialog and requires onPositiveClick() and onNegativeClick() callbacks.

To activate this dialog, within the StartStopButton() discover the onStop() callback and add the code under stopWatchViewModel.cease():

if (state.utbTime > 0) {
  showSaveDialog = true
}

In freediving, the primary essential metric on your breath maintain is the Urge To Breathe (UTB) time. That is the second when the CO2 reaches a sure threshold and your mind indicators your physique to inhale. Nevertheless it doesn’t imply you’ve run out of oxygen but.

Take a look at the cease() perform in StopWatchViewModel.kt. It controls what occurs when the consumer faucets the cease button. On the primary faucet, it saves the UTB time to an area variable. On the second faucet, time monitoring really stops. That’s why you set showSaveDialog to true solely when utbTime has already been recorded.

Construct and run. Take a deep breath and begin the stopwatch. When you faucet the button two instances — one for UTB and one for ultimate time — you’ll see the SaveResultDialog dialog:

Subsequent, you’ll add some interactive elements to this app.

Including Inputs

Go to SaveResultDialog.kt. That is an Alert, which is likely one of the Put on OS dialog varieties. The opposite kind is Affirmation. You may study extra in regards to the variations between the 2 varieties within the official documentation.

Take a look at the parameters of Alert(). It has an non-compulsory icon and a title, which is already created. The physique of this alert dialog makes use of a Textual content() composable. You solely must set the buttons for the consumer interplay. Set the negativeButton and positiveButton parameters to:

negativeButton = {
  Button(
    onClick = onNegativeClick,  // 1
    colours = ButtonDefaults.secondaryButtonColors()  // 2
  ) {
    Icon(
      imageVector = Icons.Crammed.Clear,  // 3
      contentDescription = "no"
    )
  }
},
positiveButton = {
  Button(
    onClick = onPositiveClick,
    colours = ButtonDefaults.primaryButtonColors()
  ) {
    Icon(
      imageVector = Icons.Crammed.Test,
      contentDescription = "sure"
    )
  }
}

As you possibly can see, utilizing Button() in Put on OS is easy:

1. An important half is offering the buttons with an onClick callback, which you’ll set in a second.
2. You may specify the colours for the buttons.
3. You may also select an icon — on this case, it’s a cross for the damaging motion and a tick for the optimistic motion.

Again within the StopWatchScreen.kt, discover SaveResultDialog() and alter the onPositiveCallback() and onNegativeCallback() to:

onPositiveClick = {
  showSaveDialog = false
  stopWatchViewModel.save()
},
onNegativeClick = {
  showSaveDialog = false
  stopWatchViewModel.refresh()
}

In each instances right here, you shut the dialog. If the consumer agrees to avoid wasting the outcome, you name the related technique from StopWatchViewModel. In any other case, you simply must refresh the values proven within the StopWatchScreen().

Construct and run.

You may work together with the dialog and save or discard the breath maintain outcome. Both approach, you navigate again to the StopWatchScreen().

Buttons are one strategy to work together with the consumer. There are additionally a number of enter choices in Put on OS. You should utilize one of many following:

• Slider: To select from a variety of values.
• Stepper: In order for you a vertical model of a slider.
• Toggle chip: To change between two values.
• Picker: To pick particular information.

Within the OneBreath app, you’ll cope with a Slider().

Open AssessmentDialog.kt. Add the next line above the Alert(), doing all the required imports:

var worth by keep in mind { mutableStateOf(5f) }

This can maintain the worth of an InlineSlider() with an preliminary worth of 5. Within the subsequent step, you’ll set the worth vary to 10.

Add the InlineSider() to the empty physique of Alert() dialog:

InlineSlider(
  worth = worth,
  onValueChange = { worth = it },
  increaseIcon = { Icon(InlineSliderDefaults.Enhance, "glad") },
  decreaseIcon = { Icon(InlineSliderDefaults.Lower, "unhappy") },
  valueRange = 1f..10f,
  steps = 10,
  segmented = true
)

As you possibly can see, it has a number of parameters for the worth, the buttons, the worth vary, the variety of steps and whether or not it has segments or not. The worth of this slider adjustments when the consumer faucets the Enhance or Lower buttons. Because you wish to save this worth together with the breath maintain time outcomes, substitute the empty onClick parameter in positiveButton:

onClick = {
  onPositiveClick(worth)
}

And now, again in StopWatchScreen.kt, use the AssessmentDialog() similar to you probably did with SaveResultDialog(). First, add a variable under showSaveDialog:

var showRatingDialog by keep in mind { mutableStateOf(false) }

Then, on the backside of StopWatchScreen() add a dialog. Use the showRatingDialog as a deal with to point out or conceal the dialog and use AssessmentDialog() as content material:

Dialog(
  showDialog = showRatingDialog,
  onDismissRequest = { showRatingDialog = false }
) {
  AssessmentDialog(
    onPositiveClick = { ranking ->
      showRatingDialog = false
      stopWatchViewModel.save(ranking)  // 1
    },
    onNegativeClick = {
      showRatingDialog = false
      stopWatchViewModel.save()  // 2
    }
  )
}

Right here’s what occurs:

1. After tapping the optimistic button, you save the self-rating within the database together with different values from the StopWatchViewModel.
2. When the consumer doesn’t wish to charge himself, you simply save the outcome.

Additionally, substitute stopWatchViewModel.save() in SaveResultDialog() with showRatingDialog = true, since you wish to present one dialog after one other and save the outcome solely after the AssessmentDialog().

Construct and run. If you happen to selected to maintain the report within the first dialog, you’ll see the second dialog as properly:

Prepared for some even cooler Put on OS Composables? It’s time to speak about Vignette and TimeText.

Including a Vignette

Open OneBreathApp.kt and take a look at the parameters in Scaffold() once more.
Set vignette parameter to:

vignette = {
  if (currentBackStackEntry?.vacation spot?.route == Vacation spot.Information.route) {
    Vignette(vignettePosition = VignettePosition.TopAndBottom)
  }
}

This situation means the vignette can be there just for the RecordsListScreen(). A vignette is a UI function that dims an edge a part of the display. In your case, it’s TopAndBottom, as laid out in vignettePosition.

Evaluate the report checklist display with and with out the vignette:

With out Vignette	With Vignette

See the distinction? Within the right-hand model, the sides are barely darker.

TimeText

One other important Put on OS UI part is TimeText(). Nonetheless in OneBreathApp.kt, substitute the empty timeText parameter in Scaffold() with:

timeText = {
  if (currentBackStackEntry?.vacation spot?.route == Vacation spot.TrainingDayDetails.route) {  // 1
    TimeText(
      startLinearContent = {  // 2
        Textual content(
          textual content = selectedDay?.date.toFormattedString(),
          colour = colorPrimary,
          fashion = textStyle
        )
      },
      startCurvedContent = {  // 3
        curvedText(
          textual content = selectedDay?.date.toFormattedString(),
          colour = colorPrimary,
          fashion = CurvedTextStyle(textStyle)
        )
      }
    )
  } else TimeText()  // 4
}

Right here’s a breakdown of this code:

1. You solely wish to present an extra textual content earlier than the time within the coaching day particulars display. This extra textual content will maintain the date of the report.
2. TimeText() adapts to spherical and sq. watches. For sq. watches, it makes use of TimeTextDefaults.timeTextStyle().
3. For spherical watches, use CurvedTextStyle().
4. All of the screens besides the coaching day particulars display will nonetheless present the present time on high.

Construct and run. You’ll see the present time on high now. Faucet on one of many inexperienced chips. Within the coaching day particulars display, you’ll additionally see the date:

Progress Indicator

Wouldn’t or not it’s good to have one thing like a clock hand for the stopwatch? You are able to do that with a Put on OS CircularProgressIndicator.

Go to StopWatchScreen.kt and add the next to the highest of the Field(), proper above Column():

CircularProgressIndicator(
  progress = period.toProgress(),
  modifier = Modifier
    .fillMaxSize()
    .padding(all = 1.dp)
)

This indicator will recompose each second and present the present period of your breath maintain. It’s normally really helpful to go away a spot for the TimeText() by including startAngle and endAngle parameters, however in OneBreath you’ll sacrifice these to make the indicator resemble a clock hand.

Construct and run the app and begin the stopwatch. You’ll see the clock ticking:

This CircularProgressIndicator() is determinate, however you may as well use its indeterminate model to point out a loading indicator – simply miss the progress parameter. It might seem like this:

Web page Indicator

When you’re nonetheless operating the app, go to the report checklist display and faucet on one of many coaching day gadgets. Right here, within the particulars display, you possibly can web page by means of all of your breath holds on that day. Could be good to know what web page you’re on, proper? A HorizontalPageIndicator will make it easier to with that.

Go to TrainingDayDetailsScreen.kt. In SwipeToDismissBox(), add this under val pagerState = rememberPagerState() :

val pageIndicatorState: PageIndicatorState = keep in mind {
  object : PageIndicatorState {
    override val pageOffset: Float
      get() = 0f
    override val selectedPage: Int
      get() = selectedPage
    override val pageCount: Int
      get() = maxPages
  }
}

Right here, you create a PageIndicatorState that connects the HorizontalPager() and HorizontalPageIndicator(). The selectedPage is about while you scroll by means of the pager. The pageCount is the entire variety of makes an attempt on the coaching day. The pageOffset is 0f on this case, however you need to use it to animate the indicator.

To make use of it, add HorizontalPageIndicator() proper under HorizontalPager:

HorizontalPageIndicator(
  pageIndicatorState = pageIndicatorState,
  selectedColor = colorAccent
)

Construct and run. Choose a coaching day from the checklist. You’ll see a paging indicator on the backside:

HorizontalPageIndicator() is an instance of a horizontal paging indicator. If you happen to want a vertical indicator, you need to use a PositionIndicator(). Take a look at the official supplies for extra elements.

The place to Go From Right here?

Obtain the finished mission recordsdata by clicking the Obtain Supplies button on the high or backside of the tutorial.

Congratulations! Now you can monitor your breath-holding data with the app you’ve simply constructed. Now, take a deep breath and set a brand new private report! :]

If you happen to’re considering studying extra about numerous Put on OS Composables, take a look at the official documentation documentation, in addition to the Horologist library for superior date and time pickers. And for those who get pleasure from Put on OS growth, don’t miss out on the Creating Tiles for Put on OS video course.

We hope you loved this tutorial. In case you have any questions or feedback, please be a part of the discussion board dialogue under!