Popup

Common/AllAndroid/JVM

Functions summary

Unit	@Composable Popup(     popupPositionProvider: PopupPositionProvider,     onDismissRequest: (() -> Unit)?,     properties: PopupProperties,     content: @Composable () -> Unit ) Opens a popup with the given content.	Cmn android
Unit	@Composable Popup(     alignment: Alignment,     offset: IntOffset,     onDismissRequest: (() -> Unit)?,     properties: PopupProperties,     content: @Composable () -> Unit ) Opens a popup with the given content.	Cmn android

Functions

Popup

Cmn android

Artifact: androidx.compose.ui:ui

View Source

@Composable
fun Popup(
    popupPositionProvider: PopupPositionProvider,
    onDismissRequest: (() -> Unit)? = null,
    properties: PopupProperties = PopupProperties(),
    content: @Composable () -> Unit
): Unit

Opens a popup with the given content.

The popup is positioned using a custom popupPositionProvider.

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicText
import androidx.compose.material.Text
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.IntOffset
import androidx.compose.ui.unit.IntRect
import androidx.compose.ui.unit.IntSize
import androidx.compose.ui.unit.LayoutDirection
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.Popup
import androidx.compose.ui.window.PopupPositionProvider

val dropdownPopupPositioner = remember {
    object : PopupPositionProvider {
        override fun calculatePosition(
            anchorBounds: IntRect,
            windowSize: IntSize,
            layoutDirection: LayoutDirection,
            popupContentSize: IntSize,
        ): IntOffset {
            // Position the popup below the anchor aligned horizontally with the anchor's
            // center.
            return IntOffset(
                x = anchorBounds.left + anchorBounds.width / 2,
                y = anchorBounds.top + anchorBounds.height * 2,
            )
        }
    }
}

Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
    Box(modifier = Modifier.background(Color.LightGray).padding(10.dp)) {
        BasicText(text = "Anchor")

        Popup(popupPositionProvider = dropdownPopupPositioner) {
            Box(
                modifier =
                    Modifier.background(Color.Green, RoundedCornerShape(16.dp)).padding(10.dp),
                contentAlignment = Alignment.Center,
            ) {
                BasicText(text = "Popup")
            }
        }
    }
}

Parameters
popupPositionProvider: PopupPositionProvider	Provides the screen position of the popup.
onDismissRequest: (() -> Unit)? = null	Executes when the user clicks outside of the popup.
properties: PopupProperties = PopupProperties()	PopupProperties for further customization of this popup's behavior.
content: @Composable () -> Unit	The content to be displayed inside the popup.

Popup

Cmn android

Artifact: androidx.compose.ui:ui

View Source

@Composable
fun Popup(
    alignment: Alignment = Alignment.TopStart,
    offset: IntOffset = IntOffset(0, 0),
    onDismissRequest: (() -> Unit)? = null,
    properties: PopupProperties = PopupProperties(),
    content: @Composable () -> Unit
): Unit

Opens a popup with the given content.

A popup is a floating container that appears on top of the current activity. It is especially useful for non-modal UI surfaces that remain hidden until they are needed, for example floating menus like Cut/Copy/Paste.

The popup is positioned relative to its parent, using the alignment and offset. The popup is visible as long as it is part of the composition hierarchy.

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.Popup

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))
        )
    }
}

Parameters
alignment: Alignment = Alignment.TopStart	The alignment relative to the parent.
offset: IntOffset = IntOffset(0, 0)	An offset from the original aligned position of the popup. Offset respects the Ltr/Rtl context, thus in Ltr it will be added to the original aligned position and in Rtl it will be subtracted from it.
onDismissRequest: (() -> Unit)? = null	Executes when the user clicks outside of the popup.
properties: PopupProperties = PopupProperties()	PopupProperties for further customization of this popup's behavior.
content: @Composable () -> Unit	The content to be displayed inside the popup.