Kotlin: Android/Compose Essentials

In Android, the onCreate() function is the entry point to your application, and it calls other functions to build the user interface — similar to how main() is the entry point to a Java or Kotlin program.

The setContent() function within onCreate() is used to define your layout through composable functions. All functions marked with @Composable can be called from setContent() or from other composable functions. The annotation tells the Kotlin compiler that this function is used by Jetpack Compose to build the UI.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            GreetingCardTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    Greeting("Android")
                }
            }
        }
    }
}

Next, look at the Greeting() function — a composable function that takes some input and generates what’s shown on the screen:

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Text(
        text = "Hello $name!",
        modifier = modifier
    )
}

In Android, you add the @Composable annotation before the function. Composable function names are capitalized, and they cannot return anything.

The GreetingCardTheme() function is a composable function that sets the theme for the app. It’s good practice to wrap your app in a theme to ensure a consistent look and feel across the app.

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Text(
            text = "Hello my name is $name",
            modifier = modifier
    )
}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    GreetingCardTheme {
        Greeting("Ernest")
    }
}

Changing the background color

To change the background color of your app, surround your text with a Surface. A Surface is a container that represents a section of UI where you can alter the appearance, such as the background color or border.

In Android Studio: press Alt+Enter (Windows), choose “surround with widget,” then choose “surround with container.” The default container is Box, but you can delete that and choose Surface, then add the color as a parameter.

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Surface(color = Color.Red) {
        Text(
            text = "Hello my name is $name",
            modifier = modifier
        )
    }
}

Adding padding

A Modifier is used to augment or decorate a composable. One modifier you can use is padding, which adds space around the element, via Modifier.padding().

Every composable should have an optional parameter of type Modifier, and it should be the first optional parameter in the function — this is best practice for making composable functions more flexible and reusable.

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Surface(color = Color.Cyan) {
        Text(
            text = "Hi, my name is $name!",
            modifier = modifier.padding(24.dp)
        )
    }
}