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

Compose Your App

Compose Your App

Loveleen Kaur

December 30, 2022
Tweet

More Decks by Loveleen Kaur

Other Decks in Technology

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