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. 

ALI AZAZ ALAM SR. Android Application developer @VeeOne Health @aliazaz @aliazazalam1 @ali.azaz.alam 

BACKGROUND OF ANDROID UI 

EXAMPLE OF LIST 1.UI/XML generate 2.Adapter • Type declaration 3.ViewHolder 4.Bind adapter to UI element 

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. 

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 

COMPANIES THAT ARE USING: 

IMPORTANT ELEMENTS THAT ARE KEEP IN MIND BEFORE STARTING JETPACK COMPOSE. •Annotations •Components building •Kotlin fundamentals 

Annotations 

Components building (Reusable) 

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 

Contd.. 

Jetpack Compose coding Text( text = "Hello $name!", color = Color.Blue, fontWeight = FontWeight.Bold, fontSize = 17.sp modifier = Modifier.padding(5.dp) ) TextView 

Contd.. Image( modifier = Modifier .fillMaxWidth() .height(100.dp), painter = painterResource(artShowCaseModel.artImag e), contentDescription = stringResource(R.string.name) ) ImageView 

Contd.. ListView 

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})") } } 

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() } } 

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. 

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") } 

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, 

Material3 in compose Url: m3.material.io/develop/android/jetpack-compose 

Future of Jetpack Compose url: jetbrains.com/lp/compose-multiplatform/ 

Visit my compose repository https://github.com/AliAzaz/StartedWithCompose 

THANKS A LOT FOR LISTENING ME