$30 off During Our Annual Pro Sale. View Details »

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.

    View Slide

  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

    View Slide

  3. What will it look like?
    3

    View Slide

  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

    View Slide

  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

    View Slide

  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.

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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!

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  20. That’s it !

    View Slide