No content

No content

Why Jetpack Comose? ● Modern UI toolkit
 

● Modern UI toolkit
 ● Entirely built in Kotlin
 

● Modern UI toolkit
 ● Entirely built in Kotlin
 ● Accelerate Development
 

● Modern UI toolkit
 ● Entirely built in Kotlin
 ● Accelerate Development
 ● Intuitive Kotlin APIs
 

● Modern UI toolkit
 ● Entirely built in Kotlin
 ● Accelerate Development
 ● Intuitive Kotlin APIs
 ● Less Code
 

● Modern UI toolkit
 ● Entirely built in Kotlin
 ● Accelerate Development
 ● Intuitive Kotlin APIs
 ● Less Code
 ● Powerful tools
 

No content

● Declarative UI
 

● Declarative UI
 ● Improved code Quality
 

● Declarative UI
 ● Improved code Quality
 ● Better Performance
 

● Declarative UI
 ● Improved code Quality
 ● Better Performance
 ● Real-time Preview and faster Iteration
 

● Declarative UI
 ● Improved code Quality
 ● Better Performance
 ● Real-time Preview and faster Iteration
 ● Reusable UI components
 

No content

app/build.gradle
 compose_version = 1.5.3
 

MainActivity.kt
 

No content

● A modifier in Jetpack Compose is a function that can be used to change the appearance or behavior of a composable function. Modifiers can be chained together to create complex effects.
 ● Changing the size, color, padding, and other properties.
 ● Adding behavior to composable functions, such as click listeners and hover effects.
 ● Combining composable functions in different ways to create new layouts.
 

● Spacer is a blank element that is used to create a Space between two UI elements. 
 ● Ex: 
 Spacer(modifier = Modifier.height(16.dp)
 )
 
 
 
 

● A function that is used to create a UI element in Jetpack Compose.
 ● Declarative (describe “what” the UI should look like)
 MainActivity.kt
 

● Text in Jetpack Compose is represented by the Text composable function. 
 
 Surat 

● A Button in Jetpack Compose is a composable function that represents a clickable button. 

@Composable fun Demo() { Image( painter = painterResource(R.drawable.img_jay_dp), contentDescription = "Jay" ) } 

@Composable fun Demo() { Text("1",color = Orange) Text("2",color = Orange) Text("3",color = Orange) } 1 2 3 

@Composable fun Demo() { Column { Text("1",color = Orange) Text("2",color = Orange) Text("3",color = Orange) } } 3 2 1 

@Composable fun Demo() { Row{ Text("1",color = Orange) Text("2",color = Orange) Text("3",color = Orange) } } 1 2 3 

@Composable fun Demo() { Box(Modifier.size(28.dp)) { Text("1", modifier = Modifier.align(Alignment.TopStart)) Text("2", modifier = Modifier.align(Alignment.Center)) Text("3", modifier = Modifier.align(Alignment.BottomEnd)) } } 1 2 3 

No content

● Column and Row
 ● LazyColumn
 ● LazyRow
 ● ConstraintLayout
 ● Spacer
 ● Padding
 
 

@Composable fun Demo() { Box(Modifier.background(Color.Orange)) { Text( text = "Surat", color = Color.White modifier = Modifier .padding(8.dp) .background(Color.NavyBlue) ) } } Surat 

./ConstraintLayout> val textView = findViewById(R.id.tv) textView.text = ... Imperative Row{ Image() Column{ Text() Text() } } Declarative 

View Jetpack Compose MainActivity.kt activity_main.xml MainActivity.kt Composable Screen 1 Composable Screen N 

// MainActivity.kt class MainActivity: Activity() { override fun onCreate(...) { setContentView(R.layout.activity_main) } } // activity_main.xml ./LinearLayout> View // MainActivity.kt class MainActivity: Activity() { override fun onCreate(...) { setContent{ Greeting() } } } @Composable fun Greeting(){ Text(“Hello World”) } Jetpack Compose 

No content

No content

No content