Using Jetpack Compose in an XML File

XML and Jetpack Compose

Introduction

Hello Dear Kotlin lovers! Welcome to my new article. Today I will explain how to use Jetpack Compose in XML in your project. I hope you like it.

How Can We Use Jetpack Compos in Xml Layaout ?

· First, right-click on the res folder in the gradle file, select New, then click Android Resource Directory, and select the layout from the resource type section in the opened section.

· Secondly, we create our xml file by right-clicking on the layout folder.

· Let’s assign a textview we want into the xml. Then let’s add the composeview tag and give it an id. We will use the id later in mainactivity to access compose.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World"
            android:textSize="32sp"
            android:layout_marginTop="32dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <androidx.compose.ui.platform.ComposeView
            android:id="@+id/compose_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="@+id/textView" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</LinearLayout>

· Now we can go to MainActivite and use our compose.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            XmlLayoutWithComposeTheme {
                // A surface container that uses the "background" color in the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {

                    AndroidView(factory = { context->
                        View.inflate(context, R.layout.xml_jetpack,null)
                    }, update = { view ->

  // Here we bind a variable with findviewbyid to access compose

                        val composeView: ComposeView = view.findViewById(R.id.compose_view)
                        composeView.setContent {
                            Column(
                                modifier = Modifier.fillMaxSize(),
                                verticalArrangement = Arrangement.Center,
                                horizontalAlignment = Alignment.CenterHorizontally
                            ) {
                                Text(text = "Hello World Compose", color = Color.Black, fontSize = 32.sp)
                            }
                        }
                    })
                }
            }
        }
    }
}

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

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    XmlLayoutWithComposeTheme {
        Greeting("Android")
    }
}

AndroidView is a library of android.view that can contain composite view UI content. It allows us to use our xml file and compo together.

Conclusion

In this article, we have shown how to use compose and xml file together, and we also talked about AndroidView library. Afterwards, we learned how to link an xml file in the AndroidView library. I hope it was useful.

References

Android Mobile App Developer Tools - Android Developers