Compose Your App

Transcript

1. Ludhiana
   Speaker Image
   Placeholder
   Compose Your App
   Loveleen Kaur
   Android Educator
   Software Engineer, Astrotalk
   

   View Slide

2. Who am I? 󰠁
   ● Loveleen Kaur
   ● Software Engineer - Android @ Astrotalk
   ● Core Team Member @ GDG Chandigarh
   ● Android Educator @ Android Educators Community India
   ● Develop Mobile Applications
   ● Technical Speaker
   ● Happy Android Developer :)
   

   View Slide

3. Agenda
   ● Jetpack Compose
   ● Why
   ● Which Apps are using Compose?
   ● XML vs Compose
   ● Layouts
   ● Modifiers
   ● Pathways
   ● Digital Badges
   ● Resources
   

   View Slide

4. Problem
   With
   Existing UI???
   

   View Slide

5. Jetpack Compose
   ● Modern UI development toolkit
   ● Fully built with Kotlin
   ● Simplifies and accelerates UI development
   ● Less code
   ● Intuitive Kotlin APIs
   ● Powerful API and tools
   

   View Slide

6. Jetpack Compose
   Compose apps are written in the Kotlin
   programming language.
   Kotlin is the language that the majority of
   professional Android developers use to build apps.
   

   View Slide

7. Why Jetpack Compose?
   ● Single language - Kotlin
   ● Less Code
   ● Accelerates Development
   ● UI and operations in same place
   ● Declarative UI
   ● Scope for reusable UI components
   ● Better, testable, debuggable code for UI
   

   View Slide

8. Which apps are using Compose?
   

   View Slide

9. XML vs Compose
   ● Imperative way in View
   ● Bind Views
   ● Access properties via getters
   ● Set properties via setters
   ● Listen View events via listeners
   ● Declarative way in Jetpack Compose
   ● Compose components
   ● Declarative way
   ○ Compose component
   ○ State IN
   ○ Events OUT
   

   View Slide

10. XML vs Compose
    

    View Slide

11. “Jetpack Compose is Love
    that makes
    Android Developers
    happier.”
    

    View Slide

12. Layouts in Compose
    Column Row Box
    

    View Slide

13. Column
    Column {
    Text(...)
    Text(...)
    Text(...)
    }
    

    View Slide

14. Row
    Row{
    Text(...)
    Text(...)
    Text(...)
    }
    

    View Slide

15. Box
    Column {
    Row{
    Text(...)
    Text(...)
    }
    Text(...
    }
    

    View Slide

16. Modifiers
    ● It is like CSS for our Composables
    ● If we need to add decorations or style, we use modifiers
    ● Modification work in sequential manner
    

    View Slide

17. Pathways
    A pathway consists of a sequence of
    learning activities (videos, articles, and
    codelabs), to help you learn about a
    certain technical topic.
    

    View Slide

18. Earn Digital Badges
    For each quiz successfully passed,
    participants earn a badge on their
    developer profiles.
    Carrie
    Sawyer
    

    View Slide

19. Resources
    ● https://developer.android.com/jetpack/compose/tutorial
    ● https://developer.android.com/jetpack/compose
    ● https://developer.android.com/courses/jetpack-compose/course
    

    View Slide

20. Thank You
    Loveleen Kaur
    https://www.linkedin.com/in/loveleen-kaur/
    https://twitter.com/loveleen_nancy
    

    View Slide