How do I learn? -Jetpack Compose

Hey ppl 👋🏻
I’m here to share and reflect on my own experience of learning Jetpack Compose. I always wanted to observe how I learn any new concept and reflect on it to find my mistakes and iterate my way of learning. So this is going to be a blog where I learn Jetpack Compose as a beginner. I’m going to record my thoughts and the doubts I get while learning. I want to see where these doubts take me in the process of learning, are these questions that come to my mind helping me with learning or are they just distracting? This is a place, I believe, where I’ll be able to get answers to the questions I ask myself.

So I’m starting from the jetpack compose Android developers’ documentation and planning to flow through the process.

Adding a text element

There were 2 new words mentioned in this section.
-> Composable functions
-> setContent Block

setContent {} is a block inside which composable functions can be defined and called. So what does a block exactly mean?
In the traditional Android UI, we first select a layout for the activity which can be either relative, constraint or linear layout. This is a layout within which we create the android views and form an android view hierarchy. Similarly, the setContent is a block or a layout inside which the composable functions can be called. It is a block of code inside curly braces {} where we define the UI using composable functions.

Okay, now what is a composable function? In XML we include textView, imageView etc to define where the view should be placed right? Similarly, a composable function can be used to define the UI component.
For example, a MessageCard composable function displays a message on the screen. If you want to make it dynamic you can define the parameters of the function and call the function to pass the values you want to display. The same functionality in XML was done using textView. So in Jetpack Compose we use Kotlin code to display text and it is done to replace the traditional android views.

The example I gave you was of a textView but the output of this is the same when we use XML and Jetpack Compose right? So I wanted to know why Jetpack Compose is better.

I realised that using Jetpack Compose means using a single language (Kotlin) for development and it’s a great plus. Also, Jetpack Compose allows us to preview the changes made (@Preview annotation) without building the project to see the outcome in the emulator or developer device. Adding to this, there is something called declarative and imperative UI. The Jetpack Compose is a declarative UI.
What is declarative UI? The terms declarative and imperative differ in how you express the logic in your code. This difference can be understood with the code comparison easily.

@Composable fun DeclarativeTextExample() { BasicText(text = "Hello, Compose!", style = MaterialTheme.typography.h6) }

This composable function is used to directly declare the end result that you expect without specifying how to achieve this result. If you see the XML code, you can see that while using the textView the layout_height, layout_width, and textSize all these parameters are defined and this means that you are specifically instructing how the result (displaying text) should be achieved.

<TextView
    android:id="@+id/myTextView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello, Android!"
    android:textSize="18sp"
/>

A Kotlin compiler plugin is used by Jetpack Compose. This Kotlin compiler transforms the high-level UI code written in Kotlin into Android UI elements. It translates the composable functions into corresponding android views and layouts. So you don’t have to specify “how” the end result should be achieved and this work in Jetpack Compose will be done by the Kotlin compiler itself.

package com.example.learningcompose

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.example.learningcompose.ui.theme.LearningComposeTheme

class MainActivity: ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
//            Text("Hello World!")
            MessageCard("Revs")
        }
    }
}


@Composable
fun MessageCard(name: String){
    Text(text = "Hello, $name")
}

@Preview
@Composable
fun PreviewMessageCard() {
    MessageCard("Revs")
}

Code samples

After understanding a few concepts, I tried to code. So let me summarise the working of the code.

setContent {} is the code block which is the layout of an activity in which composable functions can be called. The commented-out line of code is Text(“Hello World!) which displays the specified text directly.

A compose function can be defined to take a string type parameter with a variable name as “name”. The Text composable is used to specify and string interpolation is done to display the value of the name variable along with the text ($name). This name string gets a value when it is called inside the onCreate method by passing the parameter value as “Revs”.

But to preview the output in the preview window, it can be annotated in the composable function which does not have any parameters only. So PreviewMessageCard() composable is created and @Preview annotation is added before the @Composable annotation.

Part 1 (lesson 1) of the Android developers — Android Compose tutorial ends here.
Next up: Lesson 2 — Layouts
Source: Check out the “Android Compose Tutorial” page by Android developers.

Stay with me and we’ll understand how to add multiple texts, and image elements, use a column and many more concepts the same way.