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

Building a Wear OS App with Jetpack Compose by Antoine Gagnon

Building a Wear OS App with Jetpack Compose by Antoine Gagnon

Wear OS App using Compose
UI for all the layout using Compose
Animations using Compose

To see :
- The presentation : https://youtu.be/oUtcsPn0zRA
- The sample app : https://github.com/AntoineGagnon/RideToWork

GDG Montreal

August 30, 2022
Tweet

More Decks by GDG Montreal

Other Decks in Programming

Transcript

  1. Building a Wear OS App with Jetpack Compose.

  2. What are we doing today? Description We’ll be using Compose

    UI to build a Wear OS application. Objectives Build a Wear OS App With Compose UI Using Wear OS specific components With animations What’s the app? Get information about whether or not you should ride your bike to work today at a quick glance with concise information, and nice animations. 2 1 2 3 4
  3. What will it look like? 3

  4. 4 How are we building it? The steps 1 Getting

    the weather data P 5 2 Building the main screen P 7 3 Showing the next days data P 10 4 Adding weather animations P 13
  5. 5 Summary Getting the weather data Building the main screen

    Showing the next days data Adding weather animations What’s next? Getting the weather data
  6. 6 Summary Getting the weather data Building the main screen

    Showing the next days data Adding weather animations What’s next? It’s all fake. Sorry about that. Our “API” gives us: • Weather for the next few days • Amount of rain • Amount of snow • Temperature From it we derive rules that tell us if we can ride or not.
  7. 7 Summary Getting the weather data Building the main screen

    Showing the next days data Adding weather animations What’s next? Building the main screen
  8. 8 Summary Getting the weather data Building the main screen

    Showing the next days data Adding weather animations What’s next? A simple screen to start. Getting familiar with Compose. We create a ComponentActivity and set its content We create our main layout with different data states and our first Wear OS component We set our actual content, a big white text with a background color based on the ride status
  9. 9 Summary Getting the weather data Building the main screen

    Showing the next days data Adding weather animations What’s next? Adding a bit more to it Handling different screens
  10. 10 Summary Getting the weather data Building the main screen

    Showing the next days data Adding weather animations What’s next? Showing the next days data
  11. 11 Summary Getting the weather data Building the main screen

    Showing the next days data Adding weather animations What’s next? Using pre-made components Wear OS Material components Using a classic Compose Icon to display the images Using a Chip component to display our data easily Using a ScalingLazyColumn to get the fading lens effect at the top and bottom
  12. 12 Summary Getting the weather data Building the main screen

    Showing the next days data Adding weather animations What’s next? Other components Specifically made for Wear OS Pickers More Chips Sliders and Steppers Page indicators
  13. 13 Summary Getting the weather data Building the main screen

    Showing the next days data Adding weather animations What’s next? Adding weather animations
  14. 14 Summary Getting the weather data Building the main screen

    Showing the next days data Adding weather animations What’s next? What kind of animation ? Weather animations
  15. 15 Summary Getting the weather data Building the main screen

    Showing the next days data Adding weather animations What’s next? Make the sun spin Simple stuff • Icon of the sun • Rotation value
  16. 16 Summary Getting the weather data Building the main screen

    Showing the next days data Adding weather animations What’s next? Make the sun spin FUSION!
  17. 17 Summary Getting the weather data Building the main screen

    Showing the next days data Adding weather animations What’s next? Make the sun spin One extra line
  18. 18 Summary Getting the weather data Building the main screen

    Showing the next days data Adding weather animations What’s next? Make rain/snow fall Building blocks • Random X between 0 and the edge of the screen • The Y increases with time (that’s the animation!) • Random delay until the drop starts to fall down • Icon of a raindrop or snow flake
  19. 19 Summary Getting the weather data Building the main screen

    Showing the next days data Adding weather animations What’s next? Make rain/snow fall Painting on Canvas
  20. That’s it !