Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Make time count with Wear OS 🤖⌚️

Make time count with Wear OS 🤖⌚️

This talk will teach you about building Wear OS applications with Compose and Material Design. I will discuss my process of creating a countdown application with Jetpack Compose, Tiles and the Horologist APIs. You will also learn how to test your application on a Wear emulator.

You will leave this talk ready to (re)build your Wear OS applications with Jetpack Compose and Material Design.

Moyinoluwa Adeyemi

November 28, 2022
Tweet

More Decks by Moyinoluwa Adeyemi

Other Decks in Technology

Transcript

  1. “This talk will teach you about building Wear OS applications

    with Compose and Material Design. I will discuss my process of creating a countdown application with Jetpack Compose, Tiles and the Horologist APIs. You will also learn how to test your application on a Wear emulator. You will leave this talk ready to (re)build your Wear OS applications with Jetpack Compose and Material Design.”
  2. “Focus on one or two needs of your target users

    rather than a full app experience. Don't migrate an entire mobile codebase and put a Wear OS user interface on top. Instead, find critical tasks that work well on the wrist and streamline the experience on Wear OS.” https://developer.android.com/training/wearables/design/getting-started
  3. P1 Tell me more about this talk Confetti Wear P2

    Tell me more about the speakers
  4. Horologist Horologist is a group of libraries that aim to

    supplement Wear OS developers with features that are commonly required by developers but not yet available. https://github.com/google/horologist#-tiles
  5. SuspendingTileService class ConfettiWearTileService : SuspendingTileService() { override suspend fun resourcesRequest(

    requestParams: RequestBuilders.ResourcesRequest ): ResourceBuilders.Resources {} override suspend fun tileRequest( requestParams: RequestBuilders.TileRequest ): TileBuilders.Tile {} }
  6. SuspendingTileService class ConfettiWearTileService : SuspendingTileService() { override suspend fun resourcesRequest(

    requestParams: RequestBuilders.ResourcesRequest ): ResourceBuilders.Resources {} override suspend fun tileRequest( requestParams: RequestBuilders.TileRequest ): TileBuilders.Tile {} }
  7. SuspendingTileService class ConfettiWearTileService : SuspendingTileService() { override suspend fun resourcesRequest(

    requestParams: RequestBuilders.ResourcesRequest ): ResourceBuilders.Resources {} override suspend fun tileRequest( requestParams: RequestBuilders.TileRequest ): TileBuilders.Tile {} }
  8. tileRequest() override suspend fun tileRequest( requestParams: RequestBuilders.TileRequest ): TileBuilders.Tile {

    ... return TileBuilders.Tile.Builder() .setResourcesVersion(RESOURCES_VERSION) .setTimeline(singleTileTimeline) .build() }
  9. tileLayout() tileLayout( context = this, deviceParameters = requestParams.deviceParameters, currentSessionClickable =

    launchActivityClickable( clickableId = "current_session", androidActivity = openCurrentSession() ), nextSessionClickable = launchActivityClickable( clickableId = "next_session", androidActivity = openNextSession() ), )
  10. tileLayout() private fun tileLayout( context: Context, deviceParameters: DeviceParametersBuilders.DeviceParameters, currentSessionClickable: ModifiersBuilders.Clickable,

    nextSessionClickable: ModifiersBuilders.Clickable ): LayoutElementBuilders.LayoutElement { return PrimaryLayout.Builder(deviceParameters) ...
  11. tileLayout() return PrimaryLayout.Builder(deviceParameters) .setContent( CompactChip.Builder( context, "Happening Now!", currentSessionClickable, deviceParameters

    ) .setChipColors(ChipColors.primaryChipColors(ConfettiTileTheme.colors)) .build() ).setPrimaryChipContent( CompactChip.Builder(context, "Next talk", nextSessionClickable, deviceParameters) .setChipColors(ChipColors.secondaryChipColors(ConfettiTileTheme.colors)) .build() ) .build()
  12. return PrimaryLayout.Builder(deviceParameters) .setContent( CompactChip.Builder( context, "Happening Now!", currentSessionClickable, deviceParameters )

    .setChipColors(ChipColors.primaryChipColors(ConfettiTileTheme.colors)) .build() ).setPrimaryChipContent( CompactChip.Builder(context, "Next talk", nextSessionClickable, deviceParameters) .setChipColors(ChipColors.secondaryChipColors(ConfettiTileTheme.colors)) .build() ) .build() tileLayout()
  13. Register the Service in the AndroidManifest.xml file <service android:name=".presentation.ui.tile.ConfettiWearTileService" android:description="@string/description"

    android:exported="true" android:icon="@drawable/icon" android:label="@string/label" android:permission="com.google.android.wearable.permission.BIND_TILE_PROVIDER"> <intent-filter> <action android:name="androidx.wear.tiles.action.BIND_TILE_PROVIDER" /> </intent-filter> <!-- The tile preview shown when configuring tiles on your phone --> <meta-data android:name="androidx.wear.tiles.PREVIEW" android:resource="@drawable/tile_preview_icon" /> </service>
  14. Session Info Card AppCard( modifier = Modifier .fillMaxWidth() .padding(bottom =

    8.dp), appName = { Text("Main Room") }, time = { Text("40m") }, title = { Text("Make time count with Wear OS") }, onClick = TODO() ) { Text("Moyin") }
  15. Curved “Happening Now!” Text if (LocalConfiguration.current.isScreenRound) { val happeningNow =

    stringResource(R.string.happening_now) val primaryColor = MaterialTheme.colors.primary CurvedLayout( anchor = 90F, anchorType = AnchorType.Center, modifier = Modifier.fillMaxSize() ) { curvedRow { ... }
  16. curvedRow() curvedRow { curvedText( text = happeningNow, angularDirection = CurvedDirection.Angular.CounterClockwise,

    style = CurvedTextStyle( fontSize = 18.sp, color = primaryColor ), modifier = CurvedModifier .radialGradientBackground( 0f to Color.Transparent, 0.2f to Color.DarkGray.copy(alpha = 0.2f), 0.6f to Color.DarkGray.copy(alpha = 0.2f), 0.7f to Color.DarkGray.copy(alpha = 0.05f), 1f to Color.Transparent ) )
  17. Remember the TileLayout? tileLayout( context = this, deviceParameters = requestParams.deviceParameters,

    currentSessionClickable = launchActivityClickable( clickableId = "current_session", androidActivity = openCurrentSession() ), nextSessionClickable = launchActivityClickable( clickableId = "next_session", androidActivity = openNextSession() ), )
  18. tileLayout() tileLayout( context = this, deviceParameters = requestParams.deviceParameters, currentSessionClickable =

    launchActivityClickable( clickableId = "current_session", androidActivity = openCurrentSession() ), nextSessionClickable = launchActivityClickable( clickableId = "next_session", androidActivity = openNextSession() ), )
  19. launchActivityClickable() internal fun launchActivityClickable( clickableId: String, androidActivity: ActionBuilders.AndroidActivity ) =

    ModifiersBuilders.Clickable.Builder() .setId(clickableId) .setOnClick( ActionBuilders.LaunchAction.Builder() .setAndroidActivity(androidActivity) .build() ) .build()
  20. 1. Enable Developer Options on the watch System > About

    Settings Build number x7 Wireless Debugging
  21. 1. Enable Developer Options on the watch System > About

    Settings “You are now a developer!” Build number x7 Wireless Debugging
  22. 1. Enable Developer Options on the watch 2. Connect the

    watch to a Wi-Fi network Wireless Debugging
  23. 1. Enable Developer Options on the watch 2. Connect the

    watch to a Wi-Fi network Settings Wireless Debugging
  24. 1. Enable Developer Options on the watch 2. Connect the

    watch to a Wi-Fi network Settings Wireless Debugging Connectivity > Wi-Fi
  25. 1. Enable Developer Options on the watch 2. Connect the

    watch to a Wi-Fi network Settings Wireless Debugging Connectivity > Wi-Fi Connect to a network (it must be the same network the development machine is connected to)
  26. 1. Enable Developer Options on the watch 2. Connect the

    watch to a Wi-Fi network 3. Retrieve Wi-Fi pairing code from the watch Wireless Debugging
  27. 1. Enable Developer Options on the watch 2. Connect the

    watch to a Wi-Fi network 3. Retrieve Wi-Fi pairing code from the watch Wireless Debugging Settings
  28. 1. Enable Developer Options on the watch 2. Connect the

    watch to a Wi-Fi network 3. Retrieve Wi-Fi pairing code from the watch Wireless Debugging Settings Developer Options > Wireless Debugging
  29. 1. Enable Developer Options on the watch 2. Connect the

    watch to a Wi-Fi network 3. Retrieve Wi-Fi pairing code from the watch Wireless Debugging Settings Developer Options > Wireless Debugging Wireless Debugging > Pair New Device
  30. 1. Enable Developer Options on the watch 2. Connect the

    watch to a Wi-Fi network 3. Retrieve Wi-Fi pairing code from the watch 4. Pair using the pairing code in Android Studio Wireless Debugging
  31. 1. Enable Developer Options on the watch 2. Connect the

    watch to a Wi-Fi network 3. Retrieve Wi-Fi pairing code from the watch 4. Pair using the pairing code in Android Studio Wireless Debugging
  32. 1. Enable Developer Options on the watch 2. Connect the

    watch to a Wi-Fi network 3. Retrieve Wi-Fi pairing code from the watch 4. Pair using the pairing code in Android Studio Wireless Debugging