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

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 !