CODEWITHSUNDEEP
androidpopupandroid-jetpack-compose
Prabhu M
Prabhu M

Reputation: 3574

Android overlay window using jetpack compose

I need to develop an android library that should be able to allow the developer, who is using my library, to show an overlay window on top of his current screen. I can use popup overlay for this, but the overlay UI should be declarative. I am trying to use Jetpack compose to create a declarative UI for overlay. I have created a simple popup in a kotlin file like below

class MyView {
@Composable
    fun pop() {
        Box {
            val popupWidth = 200.dp
            val popupHeight = 50.dp
            val cornerSize = 16.dp

            Popup(alignment = Alignment.Center) {
                // Draw a rectangle shape with rounded corners inside the popup
                Box(
                    Modifier
                        .size(popupWidth, popupHeight)
                        .background(Color.White, RoundedCornerShape(cornerSize))
                )
            }
        }
    }
}

To test this, I have created an activity with a button like below

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
 @ExperimentalMaterialApi
    fun showComposeView(view: android.view.View)
    {
        setContent {
            MyView().pop()
        }
    }
}

layout file for above activity is as below,

<?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">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="21dp"
        android:text="Button"
        android:onClick="showComposeView"
        app:layout_constraintStart_toStartOf="@+id/textView"
        app:layout_constraintTop_toBottomOf="@+id/textView" />



</androidx.constraintlayout.widget.ConstraintLayout>

Now, the problem is, when I click on the button, the view from the above layout file is getting replaced by compose popup.

I want to compose popup to be displayed on the existing layout view.

How to achieve this?

Upvotes: 2

Views: 11622

Answers (2)

Prabhu M
Prabhu M

Reputation: 3574

I am able show compose pop up on existing layout using Bottom sheet dialog fragment.

Upvotes: -2

Benoit TH
Benoit TH

Reputation: 631

Calling setContent{} is effectively like calling setContentView, you replace the root View of your Activity.

What you're trying to do is mixing both Compose and regular View, your best option is probably to put your layout in an AndroidView Composable. You can find more info here

@Composable
fun MyPopupContainer(@LayoutRes layout: Int) {
    var showPopup by remember { mutableStateOf(false) }
    AndroidView(factory = { context ->

        // Inflate your view the way you want, using layout inflater or ViewBinding
        val view = LayoutInflater.from(context).inflate(layout, null)

        view.findViewById<View>(R.id.button).setOnClickListener {
            showPopup = true
        }
        
        // returning the view we just created
        view
    })

    // When showPopup is false, your popup won't be displayed
    if (showPopup) {
        // Your popup function here
        MyView().pop()
    }
}

Then in your Activity

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent { MyPopupContainer(R.layout.your_xml_layout) }
    }

Upvotes: 2

Related Questions