How To Add Jetpack Compose In Existing Kotlin Project

Introduction

Hi friends! In this article, We will learn how to add Jetpack Compose to our existing Kotlin project and how to turn on Jetpack Compose in our app and start making awesome, modern-looking interfaces using Kotlin's easy-to-understand way of writing code. This article is perfect for beginners who are looking to level up their Android development skills.

What is Jetpack Compose?

Jetpack Compose is a modern UI toolkit for building native Android apps with Kotlin. It enables developers to create user interfaces using a declarative approach, meaning you describe what you want your UI to look like, and Compose takes care of updating the UI when the underlying data changes. With Compose, you can build dynamic and interactive user interfaces more efficiently compared to traditional UI frameworks like XML layouts.

Prerequisites

• Having the latest version of Android Studio
• Basic knowledge of Android and Kotlin
• minSdk of your project is 21 or higher

How To Add Jetpack Compose In Existing Kotlin Project

Step 1. Open your existing Android Kotlin project

The very first step is to open your existing Kotlin project. If you're already working on an app, you're all set! Simply open up Android Studio and load your project. If you haven't started yet, don't worry! Just create a new Kotlin project, and you're ready to go.

Step 2. Go to your build.gradle(App Level) and add the required dependencies

We need to add some required dependencies to start working with compose. Go to the dependencies section and add the below dependency

// Jetpack dependencies
val composeBom = platform("androidx.compose:compose-bom:2024.03.00")
implementation(composeBom)
androidTestImplementation(composeBom)
implementation("androidx.compose.material3:material3")
implementation("androidx.compose.ui:ui")
implementation("androidx.compose.ui:ui-tooling-preview")
implementation("androidx.activity:activity-compose:1.8.2")
debugImplementation("androidx.compose.ui:ui-tooling")
androidTestImplementation("androidx.compose.ui:ui-test-junit4")
debugImplementation("androidx.compose.ui:ui-test-manifest")

Step 3. Go to your build.gradle(App Level) and add the below code inside the Android section

buildFeatures{
    compose = true
}

composeOptions {
    kotlinCompilerExtensionVersion = "1.5.10"
}

These configurations enable Jetpack Compose support in your project and specify the version of the Kotlin compiler extension to use for Jetpack Compose. This allows you to start using Jetpack Compose to build UI components in your Android app.

Important. It's important to ensure that the Kotlin compiler extension version matches the version of Jetpack Compose you're using to avoid compatibility issues. You can check by following the link: Kotlin Compatibility

Step 4. Sync your project

When you press the "Sync Now" button in Android Studio, it triggers Gradle to download any newly added dependencies, plugins, or other project configurations specified in your build files. It also updates the project structure and applies any changes made to the Gradle files.

Step 5. Go to your xml file

Go to your .xml file in which you want to use jetpack compose and add the ComposeView component

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintBottom_toTopOf="@+id/compose_layout"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <androidx.compose.ui.platform.ComposeView
        android:id="@+id/compose_layout"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


</androidx.constraintlayout.widget.ConstraintLayout>

Step 6. Go to the corresponding Activity or Fragment and define your compose function

Go to the corresponding Activity or Fragment where you want to use Jetpack Compose. In my case, it MainActivity.kt and defines a composable function

@Composable
fun Greeting(){
    Text(
        text = "Hello World!",
        modifier = Modifier.fillMaxWidth().wrapContentWidth(Alignment.CenterHorizontally)
    )
}

This @Composable annotation indicates that the following function is a composable function. Composable functions are responsible for describing the UI elements that make up your app's user interface.

Step 7. Go to the onCreate() function and call your composable function

findViewById<ComposeView>(R.id.compose_layout).setContent {
        Greeting()
}

Here, first, we find our ComposeView using findViewById() and, by using setContent, call our composable function.

Full Code

package com.example.helloworldappiumautomationtesting

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.ComposeView

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        findViewById<ComposeView>(R.id.compose_layout).setContent {
            Greeting()
        }

    }
}

@Composable
fun Greeting(){
    Text(
        text = "Hello World!",
        modifier = Modifier.fillMaxWidth().wrapContentWidth(Alignment.CenterHorizontally)
    )
}

Output

Conclusion

In this article, we have seen how to add Jetpack Compose in our existing kotin project. Thanks for reading, and I hope you like it. If you have any suggestions or queries about this article, please share your thoughts. You can read my other articles by clicking here.

Happy learning, friends!