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

Jetpack Compose: The new Way of Building Androi...

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 Now… Text( text = “Hello World”, style =

    MaterialTheme.typography.body2, color = Color.White, modifier = Modifier.padding(8.dp) )
  5. This work is licensed under the Apache 2 license. Android

    Development with Kotlin v1.0 7 Challenges 7 7
  6. 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() }
  7. 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
  8. This work is licensed under the Apache 2 license. Android

    Development with Kotlin v1.0 15 Jetpack Compose 15 15
  9. 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
  10. 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
  11. This work is licensed under the Apache 2 license. Android

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

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

    Imperative This design focuses on the how rather than the what
  16. • Layouts ◦ Column ◦ Row ◦ Flex(column/row) ◦ Box(similar

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

    Navigation Drawer ◦ Navigation Bar ◦ Scaffold ◦ AppBar Components
  18. This work is licensed under the Apache 2 license. Android

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

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

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

    instead of XML file Compose in Android app
  22. 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
  23. A layout composable that places its children in a vertical

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

    sequence. ROw - Horizontal Arrangements
  26. 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 ) ) }
  27. 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
  28. @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) } } } } }
  29. • 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
  30. 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