Revolutionized UI Development with Compose Playground

DISCUSS THE BACKGROUND OF UI, WHY AND HOW TO USE JETPACK COMPOSE. ALSO, DISCUSS KOTLIN CONCEPTS THAT IS EXTENSIVELY USED IN BUILDING COMPOSE APP AND QUICK LIVE CODING SESSION.

Transcript

1. REVOLUTIONIZED UI DEVELOPMENT WITH COMPOSE PLAYGROUND DISCUSS THE BACKGROUND OF UI, WHY AND HOW TO USE JETPACK COMPOSE. ALSO, DISCUSS KOTLIN CONCEPTS THAT IS EXTENSIVELY USED IN BUILDING COMPOSE APP AND QUICK LIVE CODING SESSION.
2. ALI AZAZ ALAM SR. Android Application developer @VeeOne Health @aliazaz @aliazazalam1 @ali.azaz.alam
3. BACKGROUND OF ANDROID UI
4. EXAMPLE OF LIST 1.UI/XML generate 2.Adapter • Type declaration 3.ViewHolder 4.Bind adapter to UI element
5. WHAT IS COMPOSE? AND WHY IT IS IMPORTANT FOR UI DEVELOPMENT? •Jetpack Compose is Android’s recommended modern toolkit for building native UI. It simplifies and accelerates UI development on Android. Quickly bring your app to life with less code, powerful tools, and intuitive Kotlin APIs. •It use declarative approach rather imperative.
6. APPROACHES DISCUSSION IMPERATIVE DECLARATIVE •UI & Logic Separate •XML •Manipulating UI elements from Java/Kotlin code. •Recompose UI •Do manipulation directly inside code. •Functions/Components •Only recompose updated elements
7. COMPANIES THAT ARE USING:
8. IMPORTANT ELEMENTS THAT ARE KEEP IN MIND BEFORE STARTING JETPACK COMPOSE. •Annotations •Components building •Kotlin fundamentals
9. Annotations
10. Components building (Reusable)
11. KOTLIN FUNDAMENTALS • Lambda They are anonymous function having no function name. • High Order function A higher-order function is a function that takes functions as parameters or returns a function. Jump into kotlin playground for looking a few examples: https://developer.android.com/training/kotlinplayground
12. Contd..
13. Jetpack Compose coding Text( text = "Hello $name!", color = Color.Blue, fontWeight = FontWeight.Bold, fontSize = 17.sp modifier = Modifier.padding(5.dp) ) <androidx.appcompat.widget.AppCompatTextVie w android:id="@+id/tvWelcome" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_padding=“5dp" android:gravity="center" android:textColor="@color/blue" android:textSize="17sdp" android:textStyle="bold"?> TextView
14. <ImageView android:id="@+id/tvTitle" android:layout_width="match_parent" android:layout_height="100dp" android:contentDescription="@string/name "?> Contd.. Image( modifier = Modifier .fillMaxWidth() .height(100.dp), painter = painterResource(artShowCaseModel.artImag e), contentDescription = stringResource(R.string.name) ) ImageView
15. Contd.. ListView
16. Contd.. Layout Elements Column( modifier = Modifier .fillMaxWidth() .padding(30.dp) .background(Color.LightGray) .padding(15.dp) ) { Text( text = artShowCaseModel.artName, style = MaterialTheme.typography.headlineSmall ) Row { Text( text = artShowCaseModel.artistName, fontWeight = FontWeight.Bold, fontSize = 17.sp, modifier = Modifier.padding(end = 5.dp) ) Text(text = "(${artShowCaseModel.artPublishedYear})") } }
17. Contd.. Scaffold @Composable fun ScaffoldComponent( @StringRes topBarTitle: Int, modifier: Modifier, composableItem: @Composable () ?> Unit ) { Scaffold(modifier = modifier, topBar = { CenterAlignedTopAppBar( title = { Text( text = stringResource(id = topBarTitle), fontWeight = FontWeight.Bold ) } ) }, bottomBar = { } ) { composableItem() } }
18. States mutableStateOf remember It returns an observable but when UI recomposed it will refresh to default value. It holds the value when UI is refreshed.
19. States Contd.. var expanded by remember { mutableStateOf(false) } Button(onClick = { expanded = !expanded }, contentPadding = PaddingValues(10.dp), modifier = Modifier.size(80.dp)) { Text(text = if (expanded) "Show Less" else "Show More") }
20. State Hoisting Moving state out of the composable. Stateless Stateful Doesn’t have a state, not hold, define, or modify any state. Owns a piece of state that can change overtime. EditableTextView( text = R.string.total_amount, value = amount, onValueChange = { amount = it }, KeyboardOptions(keyboardType = KeyboardType.Number).copy( imeAction = ImeAction.Next ), R.drawable.ic_money ) var amount by remember { mutableStateOf("") } var tip by remember { mutableStateOf("") } var tipSwitchChecked by remember { mutableStateOf(false) } val resultAmount = amount.toDoubleOrNull() ?: 0.0 val resultTip = tip.toDoubleOrNull() ?: 0.0 val resultantTip = tipCalculator( resultAmount, resultTip,
21. Material3 in compose Url: m3.material.io/develop/android/jetpack-compose
22. Future of Jetpack Compose url: jetbrains.com/lp/compose-multiplatform/
23. Visit my compose repository https://github.com/AliAzaz/StartedWithCompose
24. THANKS A LOT FOR LISTENING ME