A Composable New World - Workshop Edition

As our Twitter streams become flooded with the release of Jetpack Compose 1.0, it's time to jump into the UI declarative world and reform the XML and all of the `findViewById` calls that exist scattered throughout the code.

Join me in this talk to see the first steps into this composable new world and build your first app (with Compose)!

Transcript

1. Workshop Edition
   cafonsomota
   @
   A Composable New World!
   

   View Slide

2. 👨💻 Android GDE
   
   
   🗣 Founder @GDGCoimbra and co-founder @Kotlin_Knights
   
   
   ✍ Author @rwenderlich
   
   
   🗺 Loves travel, photography and running
   
   
   🇪🇬 In love with Bamia (well, Egyptian food in general)
   cafonsomota
   @
   

   View Slide

3. 🖥 CodeLab
   
   
   cmota.github.io/a-composable-new-world
   
   
   👉 Code
   
   
   github.com/cmota/a-composable-new-world
   
   
   🍿 YouTube
   
   
   bit.ly/cmota-youtube
   Materials cafonsomota
   @
   

   View Slide

4. 🖥 CodeLab
   
   
   cmota.github.io/a-composable-new-world
   
   
   👉 Code
   
   
   github.com/cmota/a-composable-new-world
   
   
   🍿 YouTube
   
   
   bit.ly/cmota-youtube
   cafonsomota
   @
   Materials
   

   View Slide

5. cmota.github.io/a-composable-new-world
   

   View Slide

6. 1. git clone
   
   
   github.com/cmota/unsplash-compose
   
   
   2. Download Android Studio Dolphin*
   
   
   developer.android.com/studio
   
   
   3. Open 00. Starter Project in Android Studio
   
   
   a-composable-new-world/00. Starter Project
   
   
   * ⚠ There’s a Speci
   fi
   c version for Mac M1
   Materials
   @cafonsomota
   
   
   cmota.github.io/a-composable-new-world
   

   View Slide

7. Jetpack Compose
   

   View Slide

8. developer.android.com/jetpack/compose
   cmota.github.io/a-composable-new-world
   

   View Slide

9. This is item 1
   This is item 2
   This is item 3
   This is item 4
   This is item 5
   This is item 6
   Exercise: Implementing a list
   Imperative UI: XML
   cmota.github.io/a-composable-new-world
   

   View Slide

10. 1. Create an activity
    MainActivity.kt
    Exercise: Implementing a list
    Imperative UI: XML
    cmota.github.io/a-composable-new-world
    

    View Slide

11. 1. Create an activity
    
    
    2.Create the correspondent xml
    activity_main.xml
    Exercise: Implementing a list
    Imperative UI: XML
    cmota.github.io/a-composable-new-world
    

    View Slide

12. 1. Create an activity
    
    
    2.Create the correspondent xml
    
    
    3.Create a fragment
    MainFragment.kt
    Exercise: Implementing a list
    Imperative UI: XML
    cmota.github.io/a-composable-new-world
    

    View Slide

13. 1. Create an activity
    
    
    2.Create the correspondent xml
    
    
    3.Create a fragment
    
    
    4.Create the correspondent xml
    fragment_main.xml
    Exercise: Implementing a list
    Imperative UI: XML
    cmota.github.io/a-composable-new-world
    

    View Slide

14. 1. Create an activity
    
    
    2.Create the correspondent xml
    
    
    3.Create a fragment
    
    
    4.Create the correspondent xml
    
    
    5.Create a recycler view
    RecyclerView
    Exercise: Implementing a list
    Imperative UI: XML
    cmota.github.io/a-composable-new-world
    

    View Slide

15. 1. Create an activity
    
    
    2.Create the correspondent xml
    
    
    3.Create a fragment
    
    
    4.Create the correspondent xml
    
    
    5.Create a recycler view
    
    
    6.Create the adapter
    Adapter
    Exercise: Implementing a list
    Imperative UI: XML
    cmota.github.io/a-composable-new-world
    

    View Slide

16. 1. Create an activity
    
    
    2.Create the correspondent xml
    
    
    3.Create a fragment
    
    
    4.Create the correspondent xml
    
    
    5.Create a recycler view
    
    
    6.Create the adapter
    
    
    7.Create the correspondent xml for items
    item_adapter.xml
    Exercise: Implementing a list
    Imperative UI: XML
    cmota.github.io/a-composable-new-world
    

    View Slide

17. fi
    les created
    5
    (It can be more if we want to add further customization)
    lines of code written
    +200
    (between declarations and xml attributes)
    Exercise: Implementing a list
    @cafonsomota
    
    
    Imperative UI: XML
    cmota.github.io/a-composable-new-world
    

    View Slide

18. • Time consuming
    
    
    • Error prone
    
    
    • Several
    fi
    les created
    
    
    • Increasing APK size
    
    
    • Coupled components
    Imperative UI: XML
    Exercise: Implementing a list
    This is item 1
    This is item 2
    This is item 3
    This is item 4
    This is item 5
    This is item 6
    cmota.github.io/a-composable-new-world
    

    View Slide

19. android.googlesource.com/platform/frameworks/base/+/master/core/java/android/view/View.java
    View.java
    TextView extends
    Imperative UI: XML
    cmota.github.io/a-composable-new-world
    

    View Slide

20. View.java
    TextView extends
    ImageView
    Imperative UI: XML
    cmota.github.io/a-composable-new-world
    android.googlesource.com/platform/frameworks/base/+/master/core/java/android/view/View.java
    

    View Slide

21. View.java
    TextView extends
    ImageView
    ViewGroup
    Imperative UI: XML
    cmota.github.io/a-composable-new-world
    android.googlesource.com/platform/frameworks/base/+/master/core/java/android/view/View.java
    

    View Slide

22. View.java
    TextView extends
    ImageView
    ViewGroup
    extends
    LinearLayout
    Imperative UI: XML
    cmota.github.io/a-composable-new-world
    android.googlesource.com/platform/frameworks/base/+/master/core/java/android/view/View.java
    

    View Slide

23. View.java
    TextView extends
    ImageView
    ViewGroup
    extends
    LinearLayout
    RelativeLayout
    …
    Imperative UI: XML
    cmota.github.io/a-composable-new-world
    android.googlesource.com/platform/frameworks/base/+/master/core/java/android/view/View.java
    

    View Slide

24. View.java
    30407 lines of code
    TextView extends
    ImageView
    ViewGroup
    extends
    LinearLayout
    RelativeLayout
    …
    Imperative UI: XML
    cmota.github.io/a-composable-new-world
    android.googlesource.com/platform/frameworks/base/+/master/core/java/android/view/View.java
    

    View Slide

25. With 30407 lines of code and several classes that extend it
    
    
    - Dif
    fi
    cult to scale
    
    
    - Hard to maintain
    
    
    - Every change might re
    fl
    ect on a lot of classes
    
    
    - Bundled to the OS and OEM’s implementation of these components
    @cafonsomota
    
    
    Imperative UI: XML
    cmota.github.io/a-composable-new-world
    

    View Slide

26. Unbundle from platform releases
    
    
    Faster to implement new designs (views/components)
    
    
    Clarify state ownership and event handling
    * adapted from declarative UI patterns (Google I/O’19) - https://www.youtube.com/watch?v=VsStyq4Lzxo&t @cafonsomota
    
    
    Goals
    cmota.github.io/a-composable-new-world
    

    View Slide

27. @cafonsomota
    
    
    Apps in production
    cmota.github.io/a-composable-new-world
    

    View Slide

28. Twitter going all in on Jetpack Compose for
    feature development: greater productivity, less
    bugs
    *android-developers.googleblog.com/2022/04/twitter-going-all-in-on-jetpack-compose.html @cafonsomota
    
    
    Apps in production
    cmota.github.io/a-composable-new-world
    

    View Slide

29. Compose
    

    View Slide

30. compose.animation
    
    
    compose.foundation
    
    
    compose.material
    
    
    compose.material3
    
    
    compose.ui
    
    
    compose.runtime
    
    
    compose.compiler
    
    
    @cafonsomota
    
    
    Jetpack Compose
    cmota.github.io/a-composable-new-world
    

    View Slide

31. compose.animation
    
    
    compose.foundation
    
    
    compose.material
    
    
    compose.material3
    
    
    compose.ui
    
    
    compose.runtime
    
    
    compose.compiler
    
    
    Jetpack Compose
    Compose Compiler
    Compose Runtime
    Compose Animation
    Compose UI
    Compose Foundation
    Compose Material
    Compose Material 3
    Compose UI Toolkit (Android)
    cmota.github.io/a-composable-new-world
    

    View Slide

32. Compose Compiler
    Compose Runtime
    Compose Animation
    Compose UI
    Compose Foundation
    Compose Material
    Compose Material 3
    compose.animation
    
    
    compose.foundation
    
    
    compose.material
    
    
    compose.material3
    
    
    compose.ui
    
    
    compose.runtime
    
    
    compose.compiler
    
    
    Jetpack Compose Compose UI Toolkit (Android)
    cmota.github.io/a-composable-new-world
    

    View Slide

33. Compose Compiler
    Written in Kotlin
    
    
    Transforms @Composable into UI
    
    
    Doesn’t use the Annotation Processor
    
    
    The plugin works at system/code generation level
    
    
    Doesn’t impact build times
    
    
    Open source
    
    
    Available in the AOSP
    android.googlesource.com/platform/frameworks/support/+/HEAD/compose/compiler
    Compose Compiler
    Compose Runtime
    Compose Animation
    Compose UI
    Compose Foundation
    Compose Material
    Compose Material 3
    Compose UI Toolkit (Android)
    cmota.github.io/a-composable-new-world
    

    View Slide

34. Compose Compiler
    Platform agnostic
    
    
    Doesn’t know what android or UI are
    
    
    Tree management solution
    
    
    Compose Runtime
    Compose Runtime
    Compose Animation
    Compose UI
    Compose Foundation
    Compose Material
    Compose Material 3
    Compose UI Toolkit (Android)
    cmota.github.io/a-composable-new-world
    

    View Slide

35. compose.ui
    
    
    Handles input management, Drawing, Layouts, etc.
    
    
    compose.foundation
    
    
    Contains Basic building: Column, Text, Image, etc.
    
    
    compose.material
    
    
    Material design system to use on components
    
    
    compose.material3
    
    
    Material design 3 system to use on components
    
    
    compose.animation
    
    
    Animations to use easily and out side of the box
    Compose UI Toolkit
    Compose Compiler
    Compose Runtime
    Compose Animation
    Compose UI
    Compose Foundation
    Compose Material
    Compose Material 3
    Compose UI Toolkit (Android)
    cmota.github.io/a-composable-new-world
    

    View Slide

36. Compose UI
    Web
    Compose Compiler
    Compose Runtime
    Compose UI
    Android
    Compose UI
    Desktop
    Compose UI
    Console
    Compose UI
    iOS
    Compose
    cmota.github.io/a-composable-new-world
    

    View Slide

37. blog.jetbrains.com/kotlin/2022/10/compose-multiplatform-1-2-is-out/
    cmota.github.io/a-composable-new-world
    

    View Slide

38. Android, desktop, iOS, and Web
    

    View Slide

39. :androidApp
    @cafonsomota
    
    
    

    View Slide

40. :androidWearApp
    @cafonsomota
    
    
    

    View Slide

41. :desktopApp
    @cafonsomota
    
    
    

    View Slide

42. :iosAppCompose
    @cafonsomota
    
    
    

    View Slide

43. :webApp
    :webApp
    

    View Slide

44. Live Coding
    

    View Slide

45. A set of libraries that provide Compose ready features
    
    
    Examples: Insets, Paging, Permissions, Swipe to refresh, etc.
    📐 Insets
    
    
    🍫 System UI Controller
    
    
    🎨 AppCompat Theme Adapter
    
    
    🧭✨Navigation-Animation
    
    
    📫 Permissions
    
    
    ⏳ Placeholder
    
    
    🌊 Flow Layouts
    🧭🎨 Navigation-Material
    
    
    🖌 Drawable Painter
    
    
    ⬇ Swipe to Refresh
    
    
    📖 Pager
    @cafonsomota
    
    
    Accompanist
    cmota.github.io/a-composable-new-world
    

    View Slide

46. dev-reactions/live-coding.gif
    

    View Slide

47. droidcon Egypt
    

    View Slide

48. droidcon Egypt
    Composing in Your Canvas!
    
    
    Today, @ 18h00, Main Stage
    
    
    by Himanshu Singh
    
    
    Create Multiplatform Chat App with Compose and Ktor
    
    
    Today, @ 18h00, Jameel Stage
    
    
    Ahmed Nabil
    @cafonsomota
    
    
    

    View Slide

49. droidcon Egypt
    Compose Everywhere! From Android to Desktop … Web!
    
    
    Friday, @ 15h15, Jameel Stage
    
    
    by Ahmed Adel
    
    
    Composing your design system in Jetpack Compose
    
    
    Today, @ 16h45, Jameel Stage
    
    
    Frank Tamre
    
    
    @cafonsomota
    
    
    

    View Slide

50. Resources
    

    View Slide

51. Jetpack Compose samples (Google)
    
    
    github.com/android/compose-samples
    
    
    A curated list of Jetpack Compose libraries, projects and articles
    
    
    github.com/jetpack-compose/jetpack-compose-awesome
    
    
    Jetpack Compose Catalog
    
    
    jetpackcompose.app
    
    
    Jetpack/JetBrains Compose Playground
    
    
    foso.github.io/Jetpack-Compose-Playground/
    
    
    Community
    
    
    twitch.tv/intelligibabble
    
    
    joebirch.co/tag/jetpack-compose/
    
    
    jorgecastillo.dev/
    Resources
    

    View Slide

52. Workshop Edition
    cafonsomota
    @
    A Composable New World!
    

    View Slide