Jetpack Compose in 3 mins

Introduction

Jetpack Compose is a modern way to build UI on top of android native. And yes it uses Kotlin. Unlike XML that is MESSY, COMPLICATED, BORING, OLD, STINKY. Ok sorry my bad…

anyways as I said, unlike XML it simplifies the development of UI on Android with less code. For example, to create text and change the value of it in xml you need 4 steps:

<!-- 1.  make a Textview -->

<TextView
        android:id="@+id/idThisId"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Hello sigmas"
        android:textAlignment="center"
        android:textColor="@color/black"
        android:textSize="20sp"
        android:textStyle="bold" />

class MainActivity : AppCompatActivity() { 
  
    // 2. make a lateinit to declare the variable
    lateinit var msgTV: TextView 
  
    override fun onCreate(savedInstanceState: Bundle?) { 
        super.onCreate(savedInstanceState) 
        setContentView(R.layout.activity_main) 
  
        // 3. use R or viewbinding to get the TextView
        msgTV = findViewById(R.id.idThisId) 
  
        // 4. Change the value
        msgTV.text = "Hello world"
  
    } 

That’s a lot for just a text. As I said before, jetpack compose is simpler than XML. Take a look at it in action:

// 1. Declare a composable function
@Composable
fun SomeFunction() {
// make text
    Text(text = "Hello, Jetpack Compose!")
}

yes that’s it. Very simple right? How about giving the text “style”?

// 1. Declare a composable function
@Composable
fun SomeFunction() {
// make text
    Text(
      text = "Hello, Jetpack Compose!",
      fontSize = 24.sp
      fontWeight = FontWeight.Bold,
      color = Color.Blue
    ),
    
}

no need to edit any xml properties and just add it directly to your text() parameter.

Layout

If you’re familiar with the way XML works, you may recognized some layout such as linear layout and constraint layout. The thing about them is that they can be complicated to understand. In compose we only have 3 simple main layouts: Column, Row, Box

for a study case: I want to make a list of my friends name, instead of making layout in xml or wtv I could just do:

@Composable
fun GreetingList() {
    Column {
        Text(text = "Hi John")
        Text(text = "Hi, Cena!")
        Text(text = "Nice try, Diddy!")
    }
}

now how about a list, like a real list? in xml we usually make RecyclerView and I know it’s such a pain to implement that. Here you could just use LazyColumn and simple looping

@Composable
fun FriendList() {
    // Step 1: Create a list of strings
    val stringList = listOf(
        "Diddy",
        "Michael Jordan",
        "That guy from costco",
        "Thick of it singer",
        "Fred",
        "Fred's cousin",
    )

    // Step 2: Pass this list to a LazyColumn
    LazyColumn(
        modifier = Modifier.fillMaxSize()
    ) {
        items(stringList) { item ->
            // Step 3: Display each string
            Text(
                text = item,
                fontSize = 20.sp, // optional styling
                modifier = Modifier
                    .padding(16.dp)
                    .fillMaxWidth()
            )
        }
    }
}

// if the data is outside the function
val friendList = listOf(
        "Diddy",
        "Michael Jordan",
        "That guy from costco",
        "Thick of it singer",
        "Fred",
        "Fred's cousin",
    )

@Composable
fun StringList(strings: List<String>) {
    LazyColumn(modifier = Modifier.fillMaxSize()) {
        items(strings) { string ->
            Text(
                text = string,
                fontSize = 20.sp,
                modifier = Modifier
                    .padding(16.dp)
                    .fillMaxWidth()
            )
        }
    }
}

// Usage
@Composable
fun DisplayList() {
    StringList(strings = friendList)
}

easy right? Well I think that’s 3 mins of Jetpack Compose. And of course it’s not over! Compose has a lot of features and ecosystems for you to discover. I recommend you to check their documentation at https://developer.android.com/develop/ui/compose/documentation
anyways I’m gonna make more of this 3 mins tutorial(?)
Until then….