Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Jetpack Compose: The new Way of Building Android UI

Jetpack Compose: The new Way of Building Android UI

Jetpack Compose is a modern toolkit for building native Android UI. It simplifies and accelerates UI development on Android with less code, powerful tools, and intuitive Kotlin APIs.

Umar Saidu Auna

February 18, 2022
Tweet

More Decks by Umar Saidu Auna

Other Decks in Technology

Transcript

  1. This work is licensed under the Apache 2 license.
    Android Development with Kotlin v1.0 1
    Jetpack compose:
    The new way of
    building Android UI
    1
    1
    Umar Saidu Auna
    Software Engineer, gidimo
    tech community Organizer
    umarauna
    February 19, 2022

    View full-size slide

  2. GDG Location
    In the beningi beginning 1.0

    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">
    android:id="@+id/hello_world_text_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Hello World"
    android:textSize="25sp"
    android:gravity="center"
    android:textColor="@color/blue_600"
    />

    View full-size slide

  3. GDG Location
    In the beningi beginning 1.1
    class Beginning : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.begining)
    val textTexView: TextView = findViewById(R.id.hello_world_text_view)
    textTexView.setOnClickListener {
    Toast.makeText(applicationContext, "Hello World",
    Toast.LENGTH_LONG).show()
    }
    }
    }

    View full-size slide

  4. GDG Location
    In the beningi beginning 1.2

    View full-size slide

  5. GDG Location
    Now…
    Text(
    text = “Hello World”,
    style = MaterialTheme.typography.body2,
    color = Color.White,
    modifier = Modifier.padding(8.dp)
    )

    View full-size slide

  6. Getting interesting right?

    View full-size slide

  7. This work is licensed under the Apache 2 license.
    Android Development with Kotlin v1.0 7
    Challenges
    7
    7

    View full-size slide

  8. findViewById() – XML
    val textTexView: TextView = findViewById(R.id.hello_world_text_view)

    View full-size slide

  9. data binding and view binding
    //initialize it
    private lateinit var binding:BottomSheetBuyUnitBinding
    //bind it to Fragment
    binding = BottomSheetBuyUnitBinding.inflate(inflater, container,false)
    return binding.root
    //make use of it
    binding.backImageView.setOnClickListener {
    dismiss()
    }

    View full-size slide

  10. APIs are showing signs of ageing - v3, v7, andridx

    View full-size slide

  11. Recyclerview


    RecyclerViewAdapter()
    ViewHolder()
    OnItemClickListerner()

    View full-size slide

  12. View Class keeps getting bigger and bigger
    - View Class has over 31110 lines of code
    - All the Views(TextView, Button, ImageView,
    RadioButton etc) inherits from the View Class
    - Becomes difficult to maintain

    View full-size slide

  13. More Challenges

    View full-size slide

  14. This work is licensed under the Apache 2 license.
    Android Development with Kotlin v1.0 15
    Jetpack Compose
    15
    15

    View full-size slide

  15. Modern toolkit for building native Android UI. It
    simplifies and accelerates UI development on Android
    with less code, powerful tools, and intuitive Kotlin
    APIs.
    Jetpack Compose

    View full-size slide

  16. 1. React
    2. Litho
    3. Vue.js
    4. Flutter
    ... but it’s written completely in Kotlin and is fully
    compatible with the existing Android view system.
    Inspired by

    View full-size slide

  17. This work is licensed under the Apache 2 license.
    Android Development with Kotlin v1.0 20
    Declarative UI
    20
    20

    View full-size slide

  18. Declarative UI is a UI that’s designed in a declarative
    way.
    You describe what it should be like.
    Declarative UI

    View full-size slide

  19. This pattern is an
    emerging trend that allows
    the developers to design
    the user interface based
    on the data received.
    Declarative Imperative
    This is the most common
    paradigm; it involves having a
    separate prototype/model of the
    application’s UI.

    View full-size slide

  20. This design paradigm makes
    use of one programming
    language to create an
    entire application.
    Declarative Imperative
    A good example is XML layouts
    in Android. We design the
    widgets and components which
    are then rendered for the user
    to see and interact with.

    View full-size slide

  21. This on the other hand
    focuses on the what
    Declarative Imperative
    This design focuses on the how
    rather than the what

    View full-size slide

  22. “Everything is a function”

    View full-size slide

  23. Compose -> UI as Function
    View/XML -> UI as Objects
    Compose Everywhere

    View full-size slide

  24. ● Simplify
    ● Less code
    ● Fix what’s broken
    Goal

    View full-size slide

  25. ● Layouts
    ○ Column
    ○ Row
    ○ Flex(column/row)
    ○ Box(similar to Framelayout)
    ○ ConstraintLayout
    Components

    View full-size slide

  26. ● Built-in Components
    ○ Button
    ○ Text
    ○ Checkbox
    ○ Navigation Drawer
    ○ Navigation Bar
    ○ Scaffold
    ○ AppBar
    Components

    View full-size slide

  27. ● Custom View
    ○ Layout
    ○ Draw
    Components

    View full-size slide

  28. This work is licensed under the Apache 2 license.
    Android Development with Kotlin v1.0 33
    Getting Started
    33
    33

    View full-size slide

  29. Existing Project(gradle:app)

    View full-size slide

  30. Existing Project(gradle:module)

    View full-size slide

  31. This work is licensed under the Apache 2 license.
    Android Development with Kotlin v1.0 37
    Jetpack Compose
    Basics
    37
    37

    View full-size slide

  32. 1. Regular function annotated with @Composable.
    2. Enables your function to call other @Composable functions
    within it.
    Compose function

    View full-size slide

  33. 1. Use setContent to define layout
    2. Call composable function instead of XML file
    Compose in Android app

    View full-size slide

  34. 1. Set Preview Content with @Preview annotation.
    2. Build Project.
    Preview Change with @Preview

    View full-size slide

  35. Live Preview in Android Studio

    View full-size slide

  36. 1. Are used to modify the composable UI elements for example adding margin,
    padding or defining the width and height.
    2. Available modifiers are:background(), clickable, scrollable, draggable,
    swipeable, width(), height(), size(), padding() . . . . .
    Modifiers

    View full-size slide

  37. Mix Compose UI with any Kotlin function, example: for loop
    Compose in Kotlin

    View full-size slide

  38. A layout composable that places its children in a
    vertical sequence.
    COlumn - Vertical Arrangements

    View full-size slide

  39. GDG Location
    Column
    Column(
    modifier = Modifier.padding(16.dp)
    ) {
    Text(
    text = "Happy Meal",
    style = TextStyle(
    fontSize = 26.sp
    )
    )
    Spacer(modifier = Modifier.padding(top = 10.dp))
    Text(
    text = "800 Calories",
    style = TextStyle(
    fontSize = 17.sp
    )
    )
    Spacer(modifier = Modifier.padding(top = 10.dp))
    Text(
    text = "$5.99",
    style = TextStyle(
    color = Color(0XFF85BB65),
    fontSize = 17.sp
    )
    )
    }

    View full-size slide

  40. A layout composable that places its children in a
    horizontal sequence.
    ROw - Horizontal Arrangements

    View full-size slide

  41. GDG Location
    ROw
    Row(
    modifier = Modifier
    .fillMaxWidth(),
    horizontalArrangement = Arrangement.SpaceBetween
    ) {
    Text(
    text = "Happy Meal",
    style = TextStyle(
    fontSize = 26.sp
    )
    )
    Text(
    text = "$5.99",
    style = TextStyle(
    color = Color(0XFF85BB65),
    fontSize = 17.sp
    ),
    modifier = Modifier.align(Alignment.CenterVertically
    )
    )
    }

    View full-size slide

  42. A LazyColumn is a vertically scrolling list that only composes and lays out the
    currently visible items. It’s similar to a Recyclerview in the classic Android
    View system.
    LAzy COlumn

    View full-size slide

  43. @Composable
    fun Planets(planets: List) {
    // A surface container using the 'background' color from the theme
    Surface(color = MaterialTheme .colors.background) {
    Column() {
    Text(
    text = stringResource (R.string.planets),
    style = MaterialTheme .typography.h4,
    modifier = Modifier.padding(10.dp)
    )
    val planet = planets.maxByOrNull { it.moon }
    Text(
    text = getGreetingMessage (planet),
    style = MaterialTheme .typography.h6,
    modifier = Modifier.padding(10.dp)
    )
    LazyColumn() {
    items(planets) { planet ->
    PlanetImageList (planet)
    }
    }
    }
    }
    }

    View full-size slide

  44. Components we converted to compose

    View full-size slide

  45. Components we converted to compose

    View full-size slide

  46. • goo.gle/compose-pathway
    • goo.gle/compose-samples
    • goo.gle/compose-docs
    • goo.gle/compose-slack
    • goo.gle/compose-feedback
    • https://developer.android.com/jetpack/compose/tutorial
    • https://foso.github.io/Jetpack-Compose-Playground/material/button/
    Codelabs

    View full-size slide

  47. This work is licensed under the Apache 2 license.
    Android Development with Kotlin v1.0
    6
    0
    Questions?
    Thank you!
    6
    0
    6
    0
    Umar Saidu Auna
    Software Engineer, gidimo
    tech community Organizer
    umarauna

    View full-size slide