How to print ‘Hello, World’ using Jetpack Compose

What is Jetpack Compose?

Jetpack Compose is the modern way of creating layouts in Android. Jetpack Compose simplifies and accelerates UI development on Android with less code, powerful tools, and intuitive Kotlin APIs.

let’s see how the new Jetpack Compose is saying hello to the world with this small Hello World example.

There are several ways to make Jetpack Compose supported files. However, I’d like to explain a very easy and simple method for creating any Jetpack Compose activity.

Open Android Studio: First, open Android Studio on your computer.click on File -> new ->new project and select Empty compose Activity.

After clicking on “Next” and creating the new project, once the build is successful, go to the MainActivity.kt class. In this class, you’ll find some code snippets already present. To get started, you just need to use four simple lines of code provided below.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeExampleTheme {
                Text(text = "Hello world")
            }
        }
    }
}

ComponentActivity :

The first thing that stands out here is that our MainActivity class is inherited from the Component Activity class. To explain this situation; let’s say we inherit the MainActivity class from the AppCompatActivity class, nothing would change. Because AppCompatActivity class is inherited from FragmentActivity class, FragmentActivity class is inherited from Component Activity class. This state of abstraction wouldn’t have caused any problems either.

SetContent Method :

A second case is the setContent method. It is written as an extension function of ComponentActivty and expects a composable function as the last parameter. The composable function here specifies the functions marked with the @Composable annotation. In the traditional view based design system, we were making the layouts visible on the screen by inflating. With the same logic, you can code the layouts that will appear on the screen in the setContent method. In other words, we can say that we are writing the code of the UI elements to be displayed on the screen in the setContent method.

Composable Function :

Another situation is when we see functions marked with @Composable. In Jetpack Compose, we use composable functions to draw something on the screen. So, if we are going to draw a UI such as any text, image, button ..etc on the screen, all of them must be a composable function

Theme

Finally, the striking situation here is that the ui codes written in the setContent method are written in the NewComposeProjectTheme composable function. ComposeExampleTheme naming is automatically created according to your project name when you create a new project. Since I opened the name of the project I created as ComposeExample, this naming appeared. (Project name + Theme).

Yes, with those four lines of code, you have enough to print “Hello, World.” You can now run the code to see “Hello, World” displayed.