Getting started with Kotlin (Compose Components)

Getting started with Kotlin (Compose Components)

By: Luis A. Sierra

Creating the Hello World Android App Project

Hello, World! It is the first basic program in any programming language. Let's write the first program in the Android Compose with Kotlin programming language.

To create and run a hello world program follow the following steps:

Step 1: Open Android Studio in your system and Create a new Android project.

Step 2: Select the Empty Activity and then click on the Next button.

Step 3: Give a name to your project like here we give "helloworld-compose" and then click on next button.

Step 4: Select the project location and then click on the finish button. Now the project is created.

Step 5: Now open App > src > main > java > com > example > helloworld-compose > MainActivity.kt file in the project navigator.

Step 6: Now in the MainActivity.kt add the code below:

Complete Code: 👇👇👇👇

package com.example.helloworld_compose

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import com.example.helloworld_compose.ui.theme.HelloworldcomposeTheme

import androidx.compose.material3.*
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.sp

// created by Luis A. Sierra

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            HelloworldcomposeTheme {
                SimpleComposablePreview()
            }
        }
    }
}

@Preview
@Composable
fun SimpleComposablePreview() {
    Surface(color = MaterialTheme.colorScheme.background) {
        MyTextView(
            "Hello World from: https://interesting-homemade-projects.blogspot.com"
        )
    }
}

@Composable
fun MyTextView(txt: String, modifier: Modifier = Modifier) {
    Column(
        // we are using column to align
        // our textview to center of the screen.
        modifier = Modifier.fillMaxSize(),
        // horizontal arrangement.
        horizontalAlignment = Alignment.CenterHorizontally,
        // vertical arrangement.
        verticalArrangement = Arrangement.Center
    ) {
        // This is Text composable function
        Text(
            text = txt,
            modifier = modifier,
            color = Color.Blue,
            //color = Color(0xFF4233FF), // Equivalent to #4233FF with full opacity
            fontSize = 25.sp
        )
    }
}

Step 7: Now let run our app Android with Java:

Step 8: Now wait to the simulator started 

Tutorial's Files:

https://gitlab.com/luisalbertosierraalcantara/kotlin-tutorial