Make time count with Wear OS 🤖⌚️

Slide 1

Slide 1 text

Lagos Moyin Adeyemi Android GDE Make time count with Wear OS

Slide 2

Slide 2 text

Lagos Moyin Adeyemi Android GDE Make time count with Wear OS

Slide 3

Slide 3 text

“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.”

Slide 4

Slide 4 text

Case Study: Confetti https://github.com/joreilly/Confetti

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

What is important for Confetti Wear?

Slide 16

Slide 16 text

“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

Slide 17

Slide 17 text

P0 What talk is happening now? What talk is happening next? Confetti Wear

Slide 18

Slide 18 text

P1 Tell me more about this talk Confetti Wear

Slide 19

Slide 19 text

P1 Tell me more about this talk Confetti Wear P2 Tell me more about the speakers

Slide 20

Slide 20 text

P3 Navigate to the conference venue Confetti Wear

Slide 21

Slide 21 text

P0 What talk is happening now/next?

Slide 22

Slide 22 text

https://developer.android.com/training/wearables/principles#appropriate-surface Now called “Apps”

Slide 23

Slide 23 text

An entrypoint into your application. Like app widgets, but for Wear OS

Slide 24

Slide 24 text

Confetti Wear A tale of two tiles Next Current Session

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Horologist

Slide 28

Slide 28 text

Android Studio 2021.3.1 or newer

Slide 29

Slide 29 text

Jetpack Compose?

Slide 30

Slide 30 text

Jetpack Compose? ❌ (not for tiles 🥲)

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text

tileRequest() override suspend fun tileRequest( requestParams: RequestBuilders.TileRequest ): TileBuilders.Tile { ... return TileBuilders.Tile.Builder() .setResourcesVersion(RESOURCES_VERSION) .setTimeline(singleTileTimeline) .build() }

Slide 35

Slide 35 text

singleTileTimeline val singleTileTimeline = TimelineBuilders.Timeline.Builder() .addTimelineEntry( TimelineBuilders.TimelineEntry.Builder() .setLayout( LayoutElementBuilders.Layout.Builder() .setRoot( tileLayout(...) .build() ...

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

tileLayout() private fun tileLayout( context: Context, deviceParameters: DeviceParametersBuilders.DeviceParameters, currentSessionClickable: ModifiersBuilders.Clickable, nextSessionClickable: ModifiersBuilders.Clickable ): LayoutElementBuilders.LayoutElement { return PrimaryLayout.Builder(deviceParameters) ...

Slide 38

Slide 38 text

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()

Slide 39

Slide 39 text

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()

Slide 40

Slide 40 text

Slide 41

Slide 41 text

Session Info Screen

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

Jetpack Compose ✅

Slide 44

Slide 44 text

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") }

Slide 45

Slide 45 text

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 { ... }

Slide 46

Slide 46 text

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 ) )

Slide 47

Slide 47 text

Navigating from the tile to the app

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

Slide 51

Slide 51 text

launchActivityClickable() internal fun launchActivityClickable( clickableId: String, androidActivity: ActionBuilders.AndroidActivity ) = ModifiersBuilders.Clickable.Builder() .setId(clickableId) .setOnClick( ActionBuilders.LaunchAction.Builder() .setAndroidActivity(androidActivity) .build() ) .build()

Slide 52

Slide 52 text

openCurrentSession() internal fun openCurrentSession() = ActionBuilders.AndroidActivity.Builder() .setConfettiWearActivity() .addKeyToExtraMapping( MainActivity.EXTRA_SESSION, ActionBuilders.stringExtra(MainActivity.EXTRA_CURRENT_SESSION) ) .build()

Slide 53

Slide 53 text

Slide 54

Slide 54 text

setConfettiWearActivity() internal fun ActionBuilders.AndroidActivity.Builder.setConfettiWearActivity() : ActionBuilders.AndroidActivity.Builder { return setPackageName("com.devfestlagos.wearapp") .setClassName("com.devfestlagos.wearapp.presentation.MainActivity") }

Slide 55

Slide 55 text

Debugging

Slide 56

Slide 56 text

Debugging 1. Debug over Bluetooth https://developer.android.com/training/wearables/get-started/debugging

Slide 57

Slide 57 text

Debugging 1. Debug over Bluetooth 2. Debug over Wi-Fi https://developer.android.com/training/wearables/get-started/debugging

Slide 58

Slide 58 text

Debugging 1. Debug over Bluetooth 2. Debug over Wi-Fi 3. Wireless Debugging

Slide 59

Slide 59 text

Wireless Debugging 1. Enable Developer Options on the watch

Slide 60

Slide 60 text

1. Enable Developer Options on the watch Settings Wireless Debugging

Slide 61

Slide 61 text

1. Enable Developer Options on the watch System > About Settings Wireless Debugging

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

1. Enable Developer Options on the watch System > About Settings “You are now a developer!” Build number x7 Wireless Debugging

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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)

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

Resources ● Ataul - androiddev.social/@ataulm ● d.android.com/wear ● github.com/android/wear-os-samples/tree/main/ComposeAd vanced