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

What is Jetpack Compose

Jay Sabhaya
September 25, 2023

What is Jetpack Compose

Explored Compose with Kotlin with Basic fundamentals of Jetpack Compose.

Jay Sabhaya

September 25, 2023
Tweet

Other Decks in Programming

Transcript

  1. • Modern UI toolkit
 • Entirely built in Kotlin
 •

    Accelerate Development
 • Intuitive Kotlin APIs

  2. • Modern UI toolkit
 • Entirely built in Kotlin
 •

    Accelerate Development
 • Intuitive Kotlin APIs
 • Less Code

  3. • Modern UI toolkit
 • Entirely built in Kotlin
 •

    Accelerate Development
 • Intuitive Kotlin APIs
 • Less Code
 • Powerful tools

  4. • Declarative UI
 • Improved code Quality
 • Better Performance


    • Real-time Preview and faster Iteration
 • Reusable UI components

  5. • 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.

  6. • Spacer is a blank element that is used to

    create a Space between two UI elements. 
 • Ex: 
 Spacer(modifier = Modifier.height(16.dp)
 )
 
 
 

  7. • A function that is used to create a UI

    element in Jetpack Compose.
 • Declarative (describe “what” the UI should look like)
 MainActivity.kt

  8. • Text in Jetpack Compose is represented by the Text

    composable function. 
 
 Surat
  9. • A Button in Jetpack Compose is a composable function

    that represents a clickable button.
  10. @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
  11. @Composable fun Demo() { Box(Modifier.background(Color.Orange)) { Text( text = "Surat",

    color = Color.White modifier = Modifier .padding(8.dp) .background(Color.NavyBlue) ) } } Surat
  12. // MainActivity.kt class MainActivity: Activity() { override fun onCreate(...) {

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