Introduction Very often it happens that an Android application needs to be refactored on . But the project is very big and it is impossible to do it in one go. In this case, has classes for almost seamless implementation of into and vice versa. Compose Compose Compose XML The full documentation is available . In this article I won't dwell on the theoretical part, I want to share my practice and tips about refactoring. here Observations and Assumptions The refactoring will be shown on the example of a simple project; It is assumed that compose is already attached to your project. If it is not, see the . documentation Selecting an example Let's imagine that we have a project with . The has 4 nested rectangles ( ) in red, purple, green, and orange. This view is implemented using . The full code is here: LegacyActivity LegacyActivity FrameLayout XML https://gist.github.com/acf616d147f50b6d6d2ecf742a74dda3 https://gist.github.com/aa0e79dbe447027b030ff558eec91884 At some point, we are faced with the task of refactoring this view on . My example above is trivial enough. But let's imagine that our visual elements are so huge that we can't refactor all the visual representations in a reasonable amount of time. Compose At the same time, we can't completely abandon refactoring either. We decide to refactor only part of this view in the first iteration. We can go two ways: Refactor the inside first (green and orange rectangles on ). Leave the outer part (red and purple) in the . Apply . compose XML ComposeView Refactor the outer part first (red and purple). Leave the inner part in the XML. Apply AndroidView Google documentation says that there is not much difference in these approaches. For my part, I want to note that most often your project will tell you which way to go. In complex projects with thousands of files, very often one of these approaches will simply not be applicable. I also want to note that refactoring by itself does not degrade performance compared to the original approach with a careful approach (see the ). XML article Refactor the inner part first We need the red and purple rectangles to stay on the , and the green and orange to be on . XML Compose The full result of the refactoring is here: https://gist.github.com/b4ea2806486dc441ff8004d2acae49b5 https://gist.github.com/f847856cef5529cc7c83538f2c5499b6 In order to achieve this, it is necessary: Create a part on . In my example it is an : Compose InternalPart @Composable private fun InternalPart() { Box( Modifier .fillMaxSize() .background(color = Color(0xFF4CAF50)) .padding(32.dp) ) { Box( Modifier .fillMaxSize() .background(color = Color(0xFFFF9800)) .padding(32.dp) ) } } Remove unnecessary parts from the . In my example, it is 2 internal . XML FrameLayout In their place add . In my example it is: ComposeView <androidx.compose.ui.platform.ComposeView android:id="@+id/composeViewInternalPart" android:layout_width="match_parent" android:layout_height="match_parent" /> In , find the necessary . Call the method and pass to it. LegacyActivity ComposeView setContent{} InternalPart() findViewById<ComposeView>(R.id.composeViewInternalPart).setContent { InternalPart() } Run the application. As you can see, the very fact of connecting compose to the is not a labor-intensive operation. Much more effort is required to refactor the existing view to . XML compose Refactor the external part first Let's try to solve the inverse problem: that the red and purple rectangles become on , while the green and orange remain on . Compose XML The full code is here: https://gist.github.com/ac78624f8d0bea5e0d580d07b9623e07 https://gist.github.com/a6f08666823c5be6d73b9c29549e191b In order to achieve our goal, we need: In the , remove the outer part so that only the green and orange rectangles remain. In my case these are: XML <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#4CAF50" android:padding="32dp"> <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent" android:background="#FF9800" android:padding="32dp" /> </FrameLayout> Refactor the outer part of . In my case these are the red and purple rectangles: Compose @Composable private fun ExternalPart() { Box( Modifier .fillMaxSize() .background(color = Color(0xFFF44336)) .padding(32.dp) ) { Box( Modifier .fillMaxSize() .background(color = Color(0xFF9C27B0)) .padding(32.dp) ) { //... } } } Add and in the factory parameter the rest of the view, which is obtained from the using the method: AndroidView() XML View.inflate() AndroidView( modifier = Modifier.fillMaxSize(), factory = { context -> View.inflate(context, R.layout.internal_part, null) } ) Start the application. As you can see, in this case, XML and compose also work almost seamlessly. Comparison of results After all the manipulation, I would recommend doing a design review - take the original and the resulting screenshots and compare the results, overlaying them on top of each other. There are many tools that allow you to do this. I mostly use for such tasks. Figma
