Compose-View Interop in Practice (DevFest Venezia 2023)

If you’re working on an already established, large code base, there’s a good chance that your screens still use Views to some extent. However, these screens should still be maintained to keep UI consistency across your app. In this talk, we’ll look at how we can support the maintenance of such screens and custom UI components with Jetpack Compose’s interoperability features while discussing the ups and downs of having hybrid UIs in our apps.

Transcript

1. Compose-View Interop in Practice @stewemetal istvanjuhos.dev István Juhos
2. #devfestvenezia2023 – @stewemetal istvanjuhos.dev Compose-View interop features • AndroidView • ComposeView • ComposeViewAdapter • AbstractComposeView • Hybrid (Compose + Espresso) testing
3. #devfestvenezia2023 – @stewemetal istvanjuhos.dev Why? • No time to rewrite • Complex custom Views • Whole screens
4. #devfestvenezia2023 – @stewemetal istvanjuhos.dev Why? • No time to rewrite • Complex custom Views • Whole screens • A UI library the project uses doesn’t support Compose
5. #devfestvenezia2023 – @stewemetal istvanjuhos.dev Why? • No time to rewrite • Complex custom Views • Whole screens • A UI library the project uses doesn’t support Compose • New custom components are easier to implement in Compose
6. #devfestvenezia2023 – @stewemetal istvanjuhos.dev Why? RecyclerViewAdapter @BindingAdapter findViewById
7. #devfestvenezia2023 – @stewemetal istvanjuhos.dev Why? RecyclerViewAdapter @BindingAdapter findViewById 🗑
8. #devfestvenezia2023 – @stewemetal istvanjuhos.dev Using Views in Compose with AndroidView
9. #devfestvenezia2023 – @stewemetal istvanjuhos.dev Using Views in Compose with AndroidView
10. #devfestvenezia2023 – @stewemetal istvanjuhos.dev AndroidView
11. #devfestvenezia2023 – @stewemetal istvanjuhos.dev AndroidView • Including existing View hierarchies in Compose UI • ”no time, resources, or business case to rewrite custom Views” • Using UI components not yet available in Compose
12. #devfestvenezia2023 – @stewemetal istvanjuhos.dev Existing custom View class CustomButtonView @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0, ) : ConstraintLayout(context, attrs, defStyleAttr) { private val button: Button private val progressBar: ProgressBar ... LayoutInflater.from(context).inflate(R.layout.view_custom_button, this, true) ... fun setText(text: String) { button.text = text } override fun setOnClickListener(listener: OnClickListener?) { button.setOnClickListener { listener?.onClick(button) } } }
13. #devfestvenezia2023 – @stewemetal istvanjuhos.dev Existing custom View class CustomButtonView @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0, ) : ConstraintLayout(context, attrs, defStyleAttr) { private val button: Button private val progressBar: ProgressBar ... LayoutInflater.from(context).inflate(R.layout.view_custom_button, this, true) ... fun setText(text: String) { button.text = text } override fun setOnClickListener(listener: OnClickListener?) { button.setOnClickListener { listener?.onClick(button) } } }
14. #devfestvenezia2023 – @stewemetal istvanjuhos.dev Existing custom View } ) } @Composable fun AndroidViewDemoScreen(...) { Scaffold( topBar = { ... }, content = { padding -> ...
15. #devfestvenezia2023 – @stewemetal istvanjuhos.dev Existing custom View AndroidView( modifier = Modifier..., factory = { context -> CustomButtonView(context) }, update = { view -> view.setText("View Button") view.setOnClickListener { ... } }, ) } ) } @Composable fun AndroidViewDemoScreen(...) { Scaffold( topBar = { ... }, content = { padding ->
16. #devfestvenezia2023 – @stewemetal istvanjuhos.dev Existing custom View AndroidView( modifier = Modifier..., factory = { context -> CustomButtonView(context) }, update = { view -> view.setText("View Button") view.setOnClickListener { ... } }, ) } ) } @Composable fun AndroidViewDemoScreen(...) { Scaffold( topBar = { ... }, content = { padding ->
17. #devfestvenezia2023 – @stewemetal istvanjuhos.dev Existing custom View AndroidView( modifier = Modifier..., factory = { context -> CustomButtonView(context) }, update = { view -> view.setText("View Button") view.setOnClickListener { ... } }, ) } ) } @Composable fun AndroidViewDemoScreen(...) { Scaffold( topBar = { ... }, content = { padding ->
18. #devfestvenezia2023 – @stewemetal istvanjuhos.dev Existing custom View AndroidView( modifier = Modifier..., factory = { context -> CustomButtonView(context) }, update = { view -> view.setText("View Button") view.setOnClickListener { ... } }, ) } ) } @Composable fun AndroidViewDemoScreen(...) { Scaffold( topBar = { ... }, content = { padding ->
19. #devfestvenezia2023 – @stewemetal istvanjuhos.dev Existing custom View AndroidView( modifier = Modifier..., factory = { context -> CustomButtonView(context) }, update = { view -> view.setText(state.buttonText) view.setOnClickListener { ... } }, ) } ) } @Composable fun AndroidViewDemoScreen(...) { Scaffold( topBar = { ... }, content = { padding ->
20. #devfestvenezia2023 – @stewemetal istvanjuhos.dev Existing custom View
21. #devfestvenezia2023 – @stewemetal istvanjuhos.dev Existing custom View
22. #devfestvenezia2023 – @stewemetal istvanjuhos.dev Existing custom View
23. #devfestvenezia2023 – @stewemetal istvanjuhos.dev AndroidView( modifier = Modifier.semantics { testTag = "stats_chart" }, factory = { context -> BarChart(context).apply { layoutParams = LayoutParams( LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT, ) } }, update = { barChart -> // Set up barChart }, ) View from a lib - MPAndroidChart
24. #devfestvenezia2023 – @stewemetal istvanjuhos.dev • Screenshot tests ✅ Testing AndroidView
25. #devfestvenezia2023 – @stewemetal istvanjuhos.dev • Screenshot tests ✅ • Testing the layout 🤔 Testing AndroidView
26. #devfestvenezia2023 – @stewemetal istvanjuhos.dev Testing AndroidView
27. #devfestvenezia2023 – @stewemetal istvanjuhos.dev @Test fun androidViewDemo_buttonClick() { composeTestRule.apply { var buttonClicked = false setContent { AndroidViewDemoScreen() { buttonClicked = true } } Espresso.onView(withText("View Button")).apply { check(matches(isDisplayed())) perform(click()) } assertTrue(buttonClicked) } } Testing AndroidView
28. #devfestvenezia2023 – @stewemetal istvanjuhos.dev @Test fun androidViewDemo_buttonClick() { composeTestRule.apply { var buttonClicked = false setContent { AndroidViewDemoScreen() { buttonClicked = true } } Espresso.onView(withText("View Button")).apply { check(matches(isDisplayed())) perform(click()) } assertTrue(buttonClicked) } } Testing AndroidView
29. #devfestvenezia2023 – @stewemetal istvanjuhos.dev Testing AndroidView @Test fun androidViewDemo_buttonClick() { composeTestRule.apply { var buttonClicked = false setContent { AndroidViewDemoScreen() { buttonClicked = true } } Espresso.onView(withText("View Button")).apply { check(matches(isDisplayed())) perform(click()) } assertTrue(buttonClicked) } }
30. #devfestvenezia2023 – @stewemetal istvanjuhos.dev Testing AndroidView @Test fun androidViewDemo_buttonClick() { composeTestRule.apply { var buttonClicked = false setContent { AndroidViewDemoScreen() { buttonClicked = true } } Espresso.onView(withText("View Button")).apply { check(matches(isDisplayed())) perform(click()) } assertTrue(buttonClicked) } }
31. #devfestvenezia2023 – @stewemetal istvanjuhos.dev Testing AndroidView @Test fun androidViewDemo_buttonClick() { composeTestRule.apply { var buttonClicked = false setContent { AndroidViewDemoScreen() { buttonClicked = true } } Espresso.onView(withText("View Button")).apply { check(matches(isDisplayed())) perform(click()) } assertTrue(buttonClicked) } }
32. #devfestvenezia2023 – @stewemetal istvanjuhos.dev Testing AndroidView @Test fun androidViewDemo_buttonClick() { composeTestRule.apply { var buttonClicked = false setContent { AndroidViewDemoScreen() { buttonClicked = true } } Espresso.onView(withText("View Button")).apply { check(matches(isDisplayed())) perform(click()) } assertTrue(buttonClicked) } }
33. #devfestvenezia2023 – @stewemetal istvanjuhos.dev Testing AndroidView @Test fun androidViewDemo_buttonClick() { composeTestRule.apply { var buttonClicked = false setContent { AndroidViewDemoScreen() { buttonClicked = true } } Espresso.onView(withText("View Button")).apply { check(matches(isDisplayed())) perform(click()) } assertTrue(buttonClicked) } } ✅
34. #devfestvenezia2023 – @stewemetal istvanjuhos.dev Adding compositions to Views with ComposeView
35. #devfestvenezia2023 – @stewemetal istvanjuhos.dev Adding compositions to Views with ComposeView
36. #devfestvenezia2023 – @stewemetal istvanjuhos.dev ComposeView
37. #devfestvenezia2023 – @stewemetal istvanjuhos.dev ComposeView • Including Compose UI in View hierarchies • ”We want to create new UI components in Compose…”
38. #devfestvenezia2023 – @stewemetal istvanjuhos.dev ComposeView • Including Compose UI in View hierarchies • ”We want to create new UI components in Compose…” • ”…but we’ll have to use them on View-based screens.”
39. #devfestvenezia2023 – @stewemetal istvanjuhos.dev ComposeView in a View <LinearLayout> <com.google.android.material.appbar.MaterialToolbar android:id="@+id/toolbar" android:layout_height="wrap_content" android:layout_width="match_parent" app:title="ComposeView Demo Title"/> </LinearLayout>
40. #devfestvenezia2023 – @stewemetal istvanjuhos.dev ComposeView in a View <LinearLayout> <com.google.android.material.appbar.MaterialToolbar android:id="@+id/toolbar" android:layout_height="wrap_content" android:layout_width="match_parent" app:title="ComposeView Demo Title"/> <androidx.compose.ui.platform.ComposeView android:id="@+id/composeView" android:layout_height="wrap_content" android:layout_width="match_parent" android:paddingTop="8dp"/> </LinearLayout>
41. #devfestvenezia2023 – @stewemetal istvanjuhos.dev An Activity hosting a View with ComposeView class ComposeViewDemoActivity : AppCompatActivity() { private lateinit var binding: ActivityComposeViewDemoBinding ... } override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) binding = ActivityComposeViewDemoBinding.inflate(layoutInflater) setContentView(binding.root) }
42. #devfestvenezia2023 – @stewemetal istvanjuhos.dev An Activity hosting a View with ComposeView binding.toolbar.title = "View Screen" binding.composeView.apply { setViewCompositionStrategy(DisposeOnDetachedFromWindow) setContent { CustomButton( text = "Compose Button", modifier = Modifier..., ) { ... } } } override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) binding = ActivityComposeViewDemoBinding.inflate(layoutInflater) setContentView(binding.root) }
43. #devfestvenezia2023 – @stewemetal istvanjuhos.dev An Activity hosting a View with ComposeView binding.toolbar.title = "View Screen" binding.composeView.apply { setViewCompositionStrategy(DisposeOnDetachedFromWindow) setContent { CustomButton( text = "Compose Button", modifier = Modifier..., ) { ... } } } override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) binding = ActivityComposeViewDemoBinding.inflate(layoutInflater) setContentView(binding.root) }
44. #devfestvenezia2023 – @stewemetal istvanjuhos.dev Testing ComposeView @RunWith(AndroidJUnit4::class) class DemoComposeViewTest { @get:Rule val androidComposeTestRule = createAndroidComposeRule<ComposeViewDemoActivity>() @Test fun composeView_Button_isVisible() { androidComposeTestRule.apply { Espresso.onView(withText("View Screen")) .check(matches(isDisplayed())) onNodeWithText("Compose Button").assertIsDisplayed() } } }
45. #devfestvenezia2023 – @stewemetal istvanjuhos.dev Testing ComposeView @RunWith(AndroidJUnit4::class) class DemoComposeViewTest { @get:Rule val androidComposeTestRule = createAndroidComposeRule<ComposeViewDemoActivity>() @Test fun composeView_Button_isVisible() { androidComposeTestRule.apply { Espresso.onView(withText("View Screen")) .check(matches(isDisplayed())) onNodeWithText("Compose Button").assertIsDisplayed() } } }
46. #devfestvenezia2023 – @stewemetal istvanjuhos.dev Testing ComposeView @RunWith(AndroidJUnit4::class) class DemoComposeViewTest { @get:Rule val androidComposeTestRule = createAndroidComposeRule<ComposeViewDemoActivity>() @Test fun composeView_Button_isVisible() { androidComposeTestRule.apply { Espresso.onView(withText("View Screen")) .check(matches(isDisplayed())) onNodeWithText("Compose Button").assertIsDisplayed() } } }
47. #devfestvenezia2023 – @stewemetal istvanjuhos.dev Testing ComposeView @RunWith(AndroidJUnit4::class) class DemoComposeViewTest { @get:Rule val androidComposeTestRule = createAndroidComposeRule<ComposeViewDemoActivity>() @Test fun composeView_Button_isVisible() { androidComposeTestRule.apply { Espresso.onView(withText("View Screen")) .check(matches(isDisplayed())) onNodeWithText("Compose Button").assertIsDisplayed() } } }
48. #devfestvenezia2023 – @stewemetal istvanjuhos.dev Testing ComposeView @RunWith(AndroidJUnit4::class) class DemoComposeViewTest { @get:Rule val androidComposeTestRule = createAndroidComposeRule<ComposeViewDemoActivity>() @Test fun composeView_Button_isVisible() { androidComposeTestRule.apply { Espresso.onView(withText("View Screen")) .check(matches(isDisplayed())) onNodeWithText("Compose Button").assertIsDisplayed() } } } ✅
49. #devfestvenezia2023 – @stewemetal istvanjuhos.dev Tweaking the XML preview with ComposeViewAdapter
50. #devfestvenezia2023 – @stewemetal istvanjuhos.dev ComposeViewAdapter • Wraps a ComposeView to render an XML preview • Supports parameterized previews
51. #devfestvenezia2023 – @stewemetal istvanjuhos.dev Banners, a Composable to include in an XML layout
52. #devfestvenezia2023 – @stewemetal istvanjuhos.dev @Composable fun Banners( banners: List<BannerData>, ) { ... } class BannersPreviewDataProvider : PreviewParameterProvider<List<BannerData>> { ... } @Preview @Composable private fun BannersPreview( @PreviewParameter(BannersPreviewParameterProvider::class) banners: List<BannerData>, ) { ... } Banners, a Composable to include in an XML layout
53. #devfestvenezia2023 – @stewemetal istvanjuhos.dev @Composable fun Banners( banners: List<BannerData>, ) { ... } class BannersPreviewDataProvider : PreviewParameterProvider<List<BannerData>> { ... } @Preview @Composable private fun BannersPreview( @PreviewParameter(BannersPreviewParameterProvider::class) banners: List<BannerData>, ) { ... } Banners, a Composable to include in an XML layout
54. #devfestvenezia2023 – @stewemetal istvanjuhos.dev @Composable fun Banners( banners: List<BannerData>, ) { ... } class BannersPreviewDataProvider : PreviewParameterProvider<List<BannerData>> { ... } @Preview @Composable private fun BannersPreview( @PreviewParameter(BannersPreviewParameterProvider::class) banners: List<BannerData>, ) { ... } Banners, a Composable to include in an XML layout
55. #devfestvenezia2023 – @stewemetal istvanjuhos.dev class BannersPreviewDataProvider : PreviewParameterProvider<List<BannerData>> { ... } @Preview @Composable private fun BannersPreview( @PreviewParameter(BannersPreviewParameterProvider::class) banners: List<BannerData>, ) { ... } @Composable fun Banners( banners: List<BannerData>, ) { ... } Banners, a Composable to include in an XML layout
56. #devfestvenezia2023 – @stewemetal istvanjuhos.dev class BannersPreviewDataProvider : PreviewParameterProvider<List<BannerData>> { ... } @Preview @Composable private fun SingleBannerPreview() { ... } @Composable fun Banners( banners: List<BannerData>, ) { ... } Banners, a Composable to include in an XML layout
57. #devfestvenezia2023 – @stewemetal istvanjuhos.dev The Layout and the Preview <LinearLayout> <MaterialToolbar .../> <View android:id="@+id/viewContent1" .../> <View android:id="@+id/viewContent2"/> </LinearLayout>
58. #devfestvenezia2023 – @stewemetal istvanjuhos.dev The Layout and the Preview <LinearLayout> <MaterialToolbar .../> <View android:id="@+id/viewContent1" .../> <View android:id="@+id/viewContent2"/> </LinearLayout> <ComposeView android:id="@+id/banners"/>
59. #devfestvenezia2023 – @stewemetal istvanjuhos.dev The Layout and the Preview <LinearLayout> <MaterialToolbar .../> <View android:id="@+id/viewContent1" .../> <View android:id="@+id/viewContent2"/> </LinearLayout> <ComposeView android:id="@+id/banners"/>
60. #devfestvenezia2023 – @stewemetal istvanjuhos.dev The Layout and the Preview <LinearLayout> <MaterialToolbar .../> <View android:id="@+id/viewContent1" .../> <View android:id="@+id/viewContent2"/> </LinearLayout> <ComposeView android:id="@+id/banners"/>
61. #devfestvenezia2023 – @stewemetal istvanjuhos.dev The Layout and the Preview <LinearLayout> <MaterialToolbar .../> <View android:id="@+id/viewContent1"/> <ComposeViewAdapter android:id="@+id/bannersPreview" tools:composableName= "hu.stewemetal.demo.BannersKt.SingleBannerPreview" > <ComposeView android:id="@+id/banners"/> </ComposeViewAdapter> <View android:id="@+id/viewContent2"/> </LinearLayout>
62. #devfestvenezia2023 – @stewemetal istvanjuhos.dev The Layout and the Preview <LinearLayout> <MaterialToolbar .../> <View android:id="@+id/viewContent1"/> <ComposeViewAdapter android:id="@+id/bannersPreview" tools:composableName= "hu.stewemetal.demo.BannersKt.SingleBannerPreview" > <ComposeView android:id="@+id/banners"/> </ComposeViewAdapter> <View android:id="@+id/viewContent2"/> </LinearLayout>
63. #devfestvenezia2023 – @stewemetal istvanjuhos.dev The Layout and the Preview <LinearLayout> <MaterialToolbar .../> <View android:id="@+id/viewContent1"/> <ComposeViewAdapter android:id="@+id/bannersPreview" tools:composableName= "hu.stewemetal.demo.BannersKt.SingleBannerPreview" > <ComposeView android:id="@+id/banners"/> </ComposeViewAdapter> <View android:id="@+id/viewContent2"/> </LinearLayout>
64. #devfestvenezia2023 – @stewemetal istvanjuhos.dev The Layout and the Preview <LinearLayout> <MaterialToolbar .../> <View android:id="@+id/viewContent1"/> <ComposeViewAdapter android:id="@+id/bannersPreview" tools:composableName= "hu.stewemetal.demo.BannersKt.SingleBannerPreview" > <ComposeView android:id="@+id/banners"/> </ComposeViewAdapter> <View android:id="@+id/viewContent2"/> </LinearLayout>
65. #devfestvenezia2023 – @stewemetal istvanjuhos.dev The Layout and the Preview <LinearLayout> <MaterialToolbar .../> <View android:id="@+id/viewContent1"/> <ComposeViewAdapter android:id="@+id/bannersPreview" tools:composableName= "hu.stewemetal.demo.BannersKt.SingleBannerPreview" > <ComposeView android:id="@+id/banners"/> </ComposeViewAdapter> <View android:id="@+id/viewContent2"/> </LinearLayout>
66. #devfestvenezia2023 – @stewemetal istvanjuhos.dev The Layout and the Preview <LinearLayout> <MaterialToolbar .../> <View android:id="@+id/viewContent1"/> <ComposeViewAdapter android:id="@+id/bannersPreview" tools:composableName= "hu.stewemetal.demo.BannersKt.BannersPreview" tools:parameterProviderClass= "hu.stewemetal.demo.BannersKt. BannersPreviewDataProvider" > <ComposeView android:id="@+id/banners"/> </ComposeViewAdapter> <View android:id="@+id/viewContent2"/> </LinearLayout>
67. #devfestvenezia2023 – @stewemetal istvanjuhos.dev The Layout and the Preview <LinearLayout> <MaterialToolbar .../> <View android:id="@+id/viewContent1"/> <ComposeViewAdapter android:id="@+id/bannersPreview" tools:composableName= "hu.stewemetal.demo.BannersKt.BannersPreview" tools:parameterProviderClass= "hu.stewemetal.demo.BannersKt. BannersPreviewDataProvider" > <ComposeView android:id="@+id/banners"/> </ComposeViewAdapter> <View android:id="@+id/viewContent2"/> </LinearLayout>
68. #devfestvenezia2023 – @stewemetal istvanjuhos.dev The Layout and the Preview <LinearLayout> <MaterialToolbar .../> <View android:id="@+id/viewContent1"/> <ComposeViewAdapter android:id="@+id/bannersPreview" tools:composableName= "hu.stewemetal.demo.BannersKt.BannersPreview" tools:parameterProviderClass= "hu.stewemetal.demo.BannersKt. BannersPreviewDataProvider" tools:parameterProviderIndex="0"> <ComposeView android:id="@+id/banners"/> </ComposeViewAdapter> <View android:id="@+id/viewContent2"/> </LinearLayout>
69. #devfestvenezia2023 – @stewemetal istvanjuhos.dev The Layout and the Preview <LinearLayout> <MaterialToolbar .../> <View android:id="@+id/viewContent1"/> <ComposeViewAdapter android:id="@+id/bannersPreview" tools:composableName= "hu.stewemetal.demo.BannersKt.BannersPreview" tools:parameterProviderClass= "hu.stewemetal.demo.BannersKt. BannersPreviewDataProvider" tools:parameterProviderIndex="0"> <ComposeView android:id="@+id/banners"/> </ComposeViewAdapter> <View android:id="@+id/viewContent2"/> </LinearLayout>
70. #devfestvenezia2023 – @stewemetal istvanjuhos.dev The Layout and the Preview <LinearLayout> <MaterialToolbar .../> <View android:id="@+id/viewContent1"/> <ComposeViewAdapter android:id="@+id/bannersPreview" tools:composableName= "hu.stewemetal.demo.BannersKt.BannersPreview" tools:parameterProviderClass= "hu.stewemetal.demo.BannersKt. BannersPreviewDataProvider" tools:parameterProviderIndex="1"> <ComposeView android:id="@+id/banners"/> </ComposeViewAdapter> <View android:id="@+id/viewContent2"/> </LinearLayout>
71. #devfestvenezia2023 – @stewemetal istvanjuhos.dev Using Compose to render Views with AbstractComposeView
72. #devfestvenezia2023 – @stewemetal istvanjuhos.dev AbstractComposeView • Creating custom Views with Compose for rendering • Rendering widely used View components with Compose • e.g. design systems having Compose and View implementations
73. #devfestvenezia2023 – @stewemetal istvanjuhos.dev AbstractComposeView • Creating custom Views with Compose for rendering • Rendering widely used View components with Compose • e.g. design systems having Compose and View implementations
74. #devfestvenezia2023 – @stewemetal istvanjuhos.dev AbstractComposeView • Use Compose UI components to render Views 💡
75. #devfestvenezia2023 – @stewemetal istvanjuhos.dev AbstractComposeView <androidx.compose.ui.platform.ComposeView android:id="@+id/someView" android:layout_width="match_parent" android:layout_height="wrap_content" />
76. #devfestvenezia2023 – @stewemetal istvanjuhos.dev AbstractComposeView <androidx.compose.ui.platform.ComposeView android:id="@+id/someView" android:layout_width="match_parent" android:layout_height="wrap_content" /> findViewById<ComposeView>(R.id.someView) .setContent { YourAppTheme { ... } }
77. #devfestvenezia2023 – @stewemetal istvanjuhos.dev AbstractComposeView class ComposeView @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0 ) : AbstractComposeView(...) { private val content = mutableStateOf<(@Composable () -> Unit)?>(null) @Composable override fun Content() { content.value?.invoke() } }
78. #devfestvenezia2023 – @stewemetal istvanjuhos.dev AbstractComposeView class ComposeView @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0 ) : AbstractComposeView(...) { private val content = mutableStateOf<(@Composable () -> Unit)?>(null) @Composable override fun Content() { content.value?.invoke() } }
79. #devfestvenezia2023 – @stewemetal istvanjuhos.dev AbstractComposeView class ComposeView @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0 ) : AbstractComposeView(...) { private val content = mutableStateOf<(@Composable () -> Unit)?>(null) @Composable override fun Content() { content.value?.invoke() } }
80. #devfestvenezia2023 – @stewemetal istvanjuhos.dev AbstractComposeView class ComposeView @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0 ) : AbstractComposeView(...) { private val content = mutableStateOf<(@Composable () -> Unit)?>(null) @Composable override fun Content() { content.value?.invoke() } }
81. #devfestvenezia2023 – @stewemetal istvanjuhos.dev AbstractComposeView https:!//developer.android.com/reference/kotlin/androidx/compose/ui/platform/AbstractComposeView
82. #devfestvenezia2023 – @stewemetal istvanjuhos.dev Views wrapping Composables class CustomButton @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0, ) : FrameLayout(context, attrs, defStyleAttr) { !!... }
83. #devfestvenezia2023 – @stewemetal istvanjuhos.dev Views wrapping Composables class CustomButton @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0, ) : ConstraintLayout(context, attrs, defStyleAttr) { !!... }
84. #devfestvenezia2023 – @stewemetal istvanjuhos.dev Views wrapping Composables class CustomButton @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0, ) : AppCompatButton(context, attrs, defStyleAttr) { !!... }
85. #devfestvenezia2023 – @stewemetal istvanjuhos.dev Views wrapping Composables class CustomButton @JvmOverloads constructor( context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0, ) : AbstractComposeView(context, attrs, defStyleAttr) { !!... }
86. #devfestvenezia2023 – @stewemetal istvanjuhos.dev Views wrapping Composables init { context.theme .obtainStyledAttributes( attrs, R.styleable.CustomButton, 0, 0, ).apply { try { (this) } finally { recycle() } } } ... } initAttributes class CustomButton(...) : AbstractComposeView(...) {
87. #devfestvenezia2023 – @stewemetal istvanjuhos.dev Views wrapping Composables ... } class CustomButton(...) : AbstractComposeView(...) { fun (typedArray: TypedArray) { with(typedArray) { text.value = getString(R.styleable.CustomButton_text).orEmpty() isEnabled.value = getBoolean(R.styleable.CustomButton_enabled, true isLoading.value = getBoolean(R.styleable.CustomButton_loading, fals } } initAttributes
88. #devfestvenezia2023 – @stewemetal istvanjuhos.dev Views wrapping Composables class CustomButton(...) : AbstractComposeView(...) { ... } class CustomButton(...) : AbstractComposeView(...) { private val text = mutableStateOf("") private val isEnabled = mutableStateOf(true) private val isLoading = mutableStateOf(false) fun (typedArray: TypedArray) { with(typedArray) { text.value = getString(R.styleable.CustomButton_text).orEmpty() isEnabled.value = getBoolean(R.styleable.CustomButton_enabled, true isLoading.value = getBoolean(R.styleable.CustomButton_loading, fals } } initAttributes
89. #devfestvenezia2023 – @stewemetal istvanjuhos.dev Views wrapping Composables ... } class CustomButton(...) : AbstractComposeView(...) { @Composable override fun Content() { YourAppTheme { CustomButton( text = text.value, enabled = isEnabled.value, loading = isLoading.value, ) } }
90. #devfestvenezia2023 – @stewemetal istvanjuhos.dev XML preview <CustomButton ... app:text="Custom Button" /> <CustomButton ... app:text="Custom Button" app:enabled="false" /> <CustomButton ... app:text="Custom Button" app:loading="true" /> ⚠
91. #devfestvenezia2023 – @stewemetal istvanjuhos.dev XML preview <CustomButton ... app:text="Custom Button" /> <CustomButton ... app:text="Custom Button" app:enabled="false" /> <CustomButton ... app:text="Custom Button" app:loading="true" /> ⚠ Works out of the box after Android Studio Giraffe Canary 8 https://issuetracker.google.com/issues/187339385 ⚠
92. #devfestvenezia2023 – @stewemetal istvanjuhos.dev Wrapping up 📦
93. #devfestvenezia2023 – @stewemetal istvanjuhos.dev Compose-View Interoperability • Pros • Views can easily be added to Compose UI • We can use Compose UI in View hierarchies • Interop features support the migration to Compose
94. #devfestvenezia2023 – @stewemetal istvanjuhos.dev Wrapping up • Pros • Views can easily be added to Compose UI • We can use Compose UI in View hierarchies • Interop features support the migration to Compose • Cons • Every ComposeView is a new composition (performance overhead) • Maintenance overhead • Added testing complexity
95. #devfestvenezia2023 – @stewemetal istvanjuhos.dev Resources • developer.android.com/jetpack/compose/migrate/interoperability-apis • developer.android.com/reference/kotlin/androidx/compose/ui/platform/AbstractCo mposeView • developer.android.com/jetpack/compose/tooling/previews • developer.android.com/jetpack/compose/testing • istvanjuhos.dev/talks/2022/20221005-how-to-test-your-compose-ui/ • istvanjuhos.dev/talks/2023/20230530-composing-a-design-system/
96. #devfestvenezia2023 – @stewemetal istvanjuhos.dev Resources • developer.android.com/jetpack/compose/migrate/interoperability-apis • developer.android.com/reference/kotlin/androidx/compose/ui/platform/AbstractCo mposeView • developer.android.com/jetpack/compose/tooling/previews • developer.android.com/jetpack/compose/testing • istvanjuhos.dev/talks/2022/20221005-how-to-test-your-compose-ui/ • istvanjuhos.dev/talks/2023/20230530-composing-a-design-system/ istvanjuhos.dev
97. Compose-View Interop in Practice Photo by Dan Dennis on Unsplash @stewemetal istvanjuhos.dev István Juhos • Consider using the interop features when you introduce Compose to your apps • Hybrid UI previews and testing are supported • Keep the impact on performance and maintenance in mind • Use the right tools for the right job, don’t rush migrations
98. Compose-View Interop in Practice Photo by Dan Dennis on Unsplash @stewemetal istvanjuhos.dev István Juhos Grazie per l’attenzione