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 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 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 Slide

  4. GDG Location
    In the beningi beginning 1.2

    View Slide

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

    View Slide

  6. Getting interesting right?

    View Slide

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

    View Slide

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

    View 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 Slide

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

    View Slide

  11. Recyclerview


    RecyclerViewAdapter()
    ViewHolder()
    OnItemClickListerner()

    View 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 Slide

  13. More Challenges

    View Slide

  14. View Slide

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

    View Slide

  16. 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 Slide

  17. View Slide

  18. View Slide

  19. 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 Slide

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

    View Slide

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

    View Slide

  22. 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 Slide

  23. 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 Slide

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

    View Slide

  25. View Slide

  26. View Slide

  27. “Everything is a function”

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  32. ● Custom View
    ○ Layout
    ○ Draw
    Components

    View Slide

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

    View Slide

  34. New Project

    View Slide

  35. Existing Project(gradle:app)

    View Slide

  36. Existing Project(gradle:module)

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  41. Live Preview in Android Studio

    View Slide

  42. 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 Slide

  43. View Slide

  44. View Slide

  45. 3
    2
    1

    View Slide

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

    View Slide

  47. View Slide

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

    View Slide

  49. 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 Slide

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

    View Slide

  51. 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 Slide

  52. 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 Slide

  53. @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 Slide

  54. View Slide

  55. View Slide

  56. Components we converted to compose

    View Slide

  57. Components we converted to compose

    View Slide

  58. • 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 Slide

  59. View Slide

  60. 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 Slide