Showing custom dialog made with ComposeView inside Xml based activity - Jetpack Compose - Android

Question

In my activity class whose layout set with xml, i want to show a dialog. ın this dialog i want to use Jetpack Compsose. Is this possible ? My codes are as the following and i get the following crash :

java.lang.IllegalStateException: ViewTreeLifecycleOwner not found from android.widget.RelativeLayout{910e78c V.E...... ......I. 0,0-0,0}

Here is my activity class :

class MainActivity : AppCompatActivity() {

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

        val button = findViewById<android.widget.Button>(R.id.buttonPuppyInfo)
        button.text = "Open dialog"

        val dialog =  Dialog(this@MainActivity)
        dialog.setContentView(R.layout.custom_dialog);
        val composeView = dialog.findViewById<ComposeView>(R.id.composeView)
        composeView.setContent {
            Button(
                onClick = {
                    // Change the state to close the dialog
                    //setShowDialog(false)
                },
            ) {
                Text("Superrr")
            }
        }

        button.setOnClickListener {
            dialog.show();
        }

    }

}

Below is my custom_dialog.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout  xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView"
        android:text="hello world!"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>


    <androidx.compose.ui.platform.ComposeView
        android:id="@+id/composeView"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:layout_below="@id/textView">
    </androidx.compose.ui.platform.ComposeView>


</RelativeLayout>

Below is my dependencies const val composeVersion = "1.0.2"

implementation("androidx.compose.ui:ui:${Versions.composeVersion}")
implementation("androidx.compose.ui:ui-tooling:${Versions.composeVersion}")
implementation("androidx.compose.material:material:${Versions.composeVersion}")
implementation("androidx.compose.material:material-icons-extended:${Versions.composeVersion}")
implementation("androidx.compose.runtime:runtime:${Versions.composeVersion}")

implementation("androidx.activity:activity-compose:1.3.1")

implementation("androidx.navigation:navigation-compose:2.4.0-alpha08")

implementation("org.jetbrains.kotlin:kotlin-stdlib:${Versions.kotlinVersion}")
implementation("androidx.core:core-ktx:1.6.0")
implementation("androidx.appcompat:appcompat:1.4.0-alpha03")
implementation("com.google.android.material:material:1.4.0")

Did you find the solution? Below solution didn't work for me. — Viks, Jul 26 '22 at 01:51
In my case I had to add view tree owner manually https://stackoverflow.com/a/75107312/3173384 — Penzzz, Jan 13 '23 at 09:39

Omar Abdan · Answer 1 · 2021-12-07T06:30:22.043

I'm not sure about using Compose with the old android UI Dialog, I think you should use compositionStrategy which tells compose to bound to an existing lifecycle.

setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)

Also what I did in my current app is using Compose Dialog with the old activity/fragment XML.

Fragment/Activity XML:

<FrameLayout>

// here my activity/fragment xml ui
<Constraintlayout/>

// here I will call the Compose Dialog 
<androidx.compose.ui.platform.ComposeView
    android:id="@+id/compose_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

</FrameLayout>

In the Activity/Fragment:

composeView.apply {
            setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
            setContent {
                var openDialog by remember { mutableStateOf(true) }

                Theme {
                   if(openDialog){
                    AlertDialog(...)
                   }
                }
            }
        }

score 0 · Answer 2 · answered Jul 30 '22 at 09:48

0

After thinking more, I believed that this idea is bad, so i didn't waste time on this unnecessary and wrong idea. If your activity is xml based do your dialog with xml. If it's based on compose than do it with compose. That's my inference.

answered Jul 30 '22 at 09:48

oiyio

5,219
4
42
54

Showing custom dialog made with ComposeView inside Xml based activity - Jetpack Compose - Android

2 Answers2