How To Add Jetpack Compose In Existing Kotlin Project

// 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")

buildFeatures{
    compose = true
}

composeOptions {
    kotlinCompilerExtensionVersion = "1.5.10"
}

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!