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.

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