Build Your First Android App in Kotlin With Jetpack Compose

5 min readOct 15, 2022

I learned this topic via developer.android.com tutorials and want to collect this data and share it with you. In this blog, we will create applications and design text, columns, and rows and manage data l. Firstly look at Jetpack Compose and composable functions for building native UI.

Jetpack Compose is Android’s modern toolkit for building native UI. It simplifies and accelerates UI development on Android. Before we used XML files for building UI but there were some issues required to develop for example Jetpack Compose has these:

Less code, more performance
Declarative UI
Readable ve clean code

Let's look at composable functions, there is the same difference from regular functions. These are;

Composable functions are capitalized
All compose functions have @Composable annotation before the function
Can’t return anything

To view in the design section you can use @Preview annotation.

With systemUI param design part is shown with system UI.

Let's make our first app

After setup and initializing the application, delete the greeting function than MainActivity.kt the file will look similar to this:

Add a new composable function with a string parameter and call it from the preview.

Also, we can add font size argument to design text size.

Without arranging text elements in a row and column, it may not look the way you want.

There are 3 basic standard layout elements in Compose: Row, Column, and Box.

Arrange the text elements in a row

@Composable
fun BirthdayGreetingWithText(to: String, from:String){
    Column {
        Text(text = to, fontSize =24.sp, color = Color.Green)
        Text(text = from, fontSize = 12.sp)
    }
}

Add an image to your project

In order to add an image to the project you follow this path:

Select the Resource Manager panel and click + icon after that upload image.

Android devices come in different screen sizes (phones, tablets, and TVs to name a few), and their screens also have different pixel sizes.

Therefore we select No Density Value, for more information check this.

Now add a composable function to add an image. In function create a val and pass the resource with painterResource.

The painterResource() the function loads a drawable image resource, and takes the resource ID (R.drawable.androidparty in this case) as an argument.

@Composable
fun BirthdayGreetingWithImage(message: String, from: String) {
    val image = painterResource(R.drawable.androidparty)
    Image(
        painter = image,
        contentDescription = null
    )
}

Add Box layout

Use a Box layout to stack elements on top of one another. Box layout also lets you configure the specific alignment of the elements that it contains. Edit composable function.

@Composable
fun BirthdayGreetingWithImage(message: String, from: String) {
    val image = painterResource(R.drawable.androidparty)
    Box {
        Image(
            painter = image,
            contentDescription = null
        )
        BirthdayGreetingWithText("Happy Birthday Alp", "Alex")
    }
}

Position and scale the Image composable

We will use modifier to make picture full screen. Modifiers are used to modify and add behaviour to Jetpack Compose UI elements. We can set background color, padding or behaviour to text, rows or buttons.

Text(text = from, fontSize = 12.sp, modifier = Modifier.background(color = Color.Green))Image(
    painter = image,
    contentDescription = null,
    modifier = Modifier
        .fillMaxHeight()
        .fillMaxHeight(),
    contentScale = ContentScale.Fit
)

In the above, these parameters will set the text element’s background green and arrange the scale and size of the images.

Align the text and add padding

To make beauty to our app add a pad and align it to the text. fillMaxWidth() align the Text composable and wrapContentWidth()set the width of the composable to the maximum available width.

Text(text = to, fontSize = 24.sp, color = Color.Red,
    modifier = Modifier
        .fillMaxWidth()
        .wrapContentWidth(Alignment.Start)
)

A UI element wraps itself around its content. To prevent it from wrapping too tightly, you can specify the amount of padding on each side.

Text(
    text = from, fontSize = 24.sp, modifier = Modifier
        .fillMaxWidth()
        .padding(start = 16.dp, top = 16.dp)
        .wrapContentWidth(Alignment.End)
)

Some best practices: Translation

We may want people in different parts of the world to use it. Therefore we should translate into another language at some point. Instead of hard coding strings, you put the strings into a file name the string resources and use them when you want. Select Extract string resource.

The hardcoded string is now replaced with a stringResource() function.

BirthdayGreetingWithText(stringResource(R.string.happy_birthday_text), "From Alex")

In the Project pane, open the strings.xml file from the path app > res > values > strings.xml and notice that Android Studio created a string resource called happy_birthday_text.

You can look up source codes of project from this: https://github.com/kprl884/birthday-app-with-jetpack-compose

Also you can follow my github, twitter, and linkedin accounts.

Finally, you did your birthday application, and after that, you can celebrate people you love on birthdays. The most important thing is you can build a self-application with a modern UI kit. Getting started was the most important congratulations, now is the time to do more, good luck.