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

Introduction to Jetpack Compose

Mohit S
March 22, 2022

Introduction to Jetpack Compose

In this talk, I'll go over the basics of how to build Android apps using Jetpack Compose. I'll share how to build different types of layouts and setup your app's architecture. We'll look at basic examples of using different features provided by the Jetpack Compose library.

Mohit S

March 22, 2022
Tweet

More Decks by Mohit S

Other Decks in Programming

Transcript

  1. Modifiers Hello World Text( modifier = Modifier .border(width = 2.dp,

    Color.Red) .background(Color.Green) .padding(12.dp), text = "Hello World" )
  2. Modifiers Hello World Text( modifier = Modifier .padding(12.dp) .border(width =

    2.dp, Color.Red) .background(Color.Green), text = "Hello World” )
  3. Column Column( 
 verticalArrangement = Arrangement.Center 
 ) { Text("Hello

    World") Text("Hello World") Text("Hello World") } Hello World Hello World Hello World
  4. Column Column( 
 Arrangement.SpaceBetween 
 ) { Text("Hello World") Text("Hello

    World") Text("Hello World") } Hello World Hello World Hello World
  5. Column Column( 
 horizontalAlignment = Alignment.End 
 ) { Text("Hello

    World") Text("Hello World") Text("Hello World") } Hello World Hello World Hello World
  6. Column Column( 
 Alignment.CenterHorizontally 
 ) { Text("Hello World") Text("Hello

    World") Text("Hello World") } Hello World Hello World Hello World
  7. Row

  8. Layout Modifiers Column( 
 Modifier .background(Color.Green) .fillMaxWidth() ) { Text(text

    = “Hello World”) Text(text = "Hello World") } Hello World Hello World
  9. Layout Modifiers Column( 
 Modifier .background(Color.Green) .fillMaxSize() ) { Text(text

    = “Hello World”) Text(text = "Hello World") } Hello World Hello World
  10. Layout Modifiers Column( 
 Modifier .background(Color.Green) .width(200.dp) ) { Text(text

    = “Hello World”) Text(text = "Hello World") } Hello World Hello World 200dp
  11. Box

  12. Scaffold Scaffold( topBar = { Text(text = "Home") } )

    { Text(text = “Hello World”) } Home Hello World
  13. Managing State 0 + - Button( onClick = { counter

    -- } ) { Text(text = “-") }
  14. Managing State Search @Composable fun SearchView(onSearch: (String) -> Unit) {

    OutlinedTextField( keyboardOptions = KeyboardActions( onSearch = { } ) ) }
  15. Managing State Search @Composable fun SearchView(onSearch: (String) -> Unit) {

    OutlinedTextField( keyboardOptions = KeyboardActions( onSearch = { onSearch(query) } ) ) }
  16. What is a side effect? • Work outside of composable

    function • Open new screen when tapping button • Show no network message
  17. Launched Effect @Composable fun HomeView() { 
 var counter by

    remember { mutableStateOf(0) } LaunchedEffect(key1 = Unit) { while (true) { delay(2000) counter ++ } } }
  18. Launched Effect @Composable fun HomeView() { 
 var counter by

    remember { mutableStateOf(0) } LaunchedEffect(key1 = Unit) { while (true) { delay(2000) counter ++ } } }
  19. Launched Effect @Composable fun HomeView() { 
 var counter by

    remember { mutableStateOf(0) } LaunchedEffect(key1 = Unit) { while (true) { delay(2000) counter ++ } } }
  20. Launched Effect @Composable fun HomeView() { 
 var counter by

    remember { mutableStateOf(0) } LaunchedEffect(key1 = Unit) { while (true) { delay(2000) counter ++ } } }