Slide 1

Slide 1 text

Building a Wear OS App with Jetpack Compose.

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

What will it look like? 3

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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.

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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!

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

That’s it !