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

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
  2. GDG Location In the beningi beginning 1.0 <?xml version="1.0" encoding="utf-8"?>

    <LinearLayout 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"> <TextView 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" /> </LinearLayout>
  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() } } }
  4. GDG Location In the beningi beginning 1.2

  5. GDG Location Now… Text( text = “Hello World”, style =

    MaterialTheme.typography.body2, color = Color.White, modifier = Modifier.padding(8.dp) )
  6. Getting interesting right?

  7. This work is licensed under the Apache 2 license. Android

    Development with Kotlin v1.0 7 Challenges 7 7
  8. findViewById() – XML val textTexView: TextView = findViewById(R.id.hello_world_text_view)

  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() }
  10. APIs are showing signs of ageing - v3, v7, andridx

  11. Recyclerview <RecyclerView/> <LayoutItem/> RecyclerViewAdapter() ViewHolder() OnItemClickListerner()

  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
  13. More Challenges

  14. None
  15. This work is licensed under the Apache 2 license. Android

    Development with Kotlin v1.0 15 Jetpack Compose 15 15
  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
  17. None
  18. None
  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
  20. This work is licensed under the Apache 2 license. Android

    Development with Kotlin v1.0 20 Declarative UI 20 20
  21. Declarative UI is a UI that’s designed in a declarative

    way. You describe what it should be like. Declarative UI
  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.
  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.
  24. This on the other hand focuses on the what Declarative

    Imperative This design focuses on the how rather than the what
  25. None
  26. None
  27. “Everything is a function”

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

    Compose Everywhere
  29. • Simplify • Less code • Fix what’s broken Goal

  30. • Layouts ◦ Column ◦ Row ◦ Flex(column/row) ◦ Box(similar

    to Framelayout) ◦ ConstraintLayout Components
  31. • Built-in Components ◦ Button ◦ Text ◦ Checkbox ◦

    Navigation Drawer ◦ Navigation Bar ◦ Scaffold ◦ AppBar Components
  32. • Custom View ◦ Layout ◦ Draw Components

  33. This work is licensed under the Apache 2 license. Android

    Development with Kotlin v1.0 33 Getting Started 33 33
  34. New Project

  35. Existing Project(gradle:app)

  36. Existing Project(gradle:module)

  37. This work is licensed under the Apache 2 license. Android

    Development with Kotlin v1.0 37 Jetpack Compose Basics 37 37
  38. 1. Regular function annotated with @Composable. 2. Enables your function

    to call other @Composable functions within it. Compose function
  39. 1. Use setContent to define layout 2. Call composable function

    instead of XML file Compose in Android app
  40. 1. Set Preview Content with @Preview annotation. 2. Build Project.

    Preview Change with @Preview
  41. Live Preview in Android Studio

  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
  43. None
  44. None
  45. 3 2 1

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

    Compose in Kotlin
  47. None
  48. A layout composable that places its children in a vertical

    sequence. COlumn - Vertical Arrangements
  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 ) ) }
  50. A layout composable that places its children in a horizontal

    sequence. ROw - Horizontal Arrangements
  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 ) ) }
  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
  53. @Composable fun Planets(planets: List<Planets>) { // 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) } } } } }
  54. None
  55. None
  56. Components we converted to compose

  57. Components we converted to compose

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