Popup – Compose Ui – Compose Multiplatform

← Compose Multiplatform Component in Compose Ui

Android

Common

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.

Last updated: July 4, 2024 at 15:09 GMT+3

Installation

dependencies {
   implementation("androidx.compose.ui:ui:1.7.0-beta04")
}

Overloads

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

Parameters

name	description
`alignment`	The alignment relative to the parent.
`offset`	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`	Executes when the user clicks outside of the popup.
`properties`	[PopupProperties] for further customization of this popup's behavior.
`content`	The content to be displayed inside the popup.

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

Parameters

name	description
`popupPositionProvider`	Provides the screen position of the popup.
`onDismissRequest`	Executes when the user clicks outside of the popup.
`properties`	[PopupProperties] for further customization of this popup's behavior.
`content`	The content to be displayed inside the popup.

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

Parameters

name	description
`alignment`	The alignment relative to the parent.
`offset`	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`	Executes when the user clicks outside of the popup.
`properties`	[PopupProperties] for further customization of this popup's behavior.
`content`	The content to be displayed inside the popup.

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

Parameters

name	description
`popupPositionProvider`	Provides the screen position of the popup.
`onDismissRequest`	Executes when the user clicks outside of the popup.
`properties`	[PopupProperties] for further customization of this popup's behavior.
`content`	The content to be displayed inside the popup.

@Composable
@Deprecated(
    "Replaced by Popup with properties parameter",
    ReplaceWith("Popup(alignment, offset, onDismissRequest, " +
        "androidx.compose.ui.window.PopupProperties(focusable = focusable), " +
        "onPreviewKeyEvent, onKeyEvent, content)")

fun Popup(
    alignment: Alignment = Alignment.TopStart,
    offset: IntOffset = IntOffset(0, 0),
    focusable: Boolean = false,
    onDismissRequest: (() -> Unit)? = null,
    onPreviewKeyEvent: ((KeyEvent) -> Boolean) = { false },
    onKeyEvent: ((KeyEvent) -> Boolean) = { false },
    content: @Composable () -> Unit
)

Parameters

name	description
`alignment`	The alignment relative to the parent.
`offset`	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.
`focusable`	Indicates if the popup can grab the focus.
`onDismissRequest`	Executes when the user clicks outside of the popup.
`onPreviewKeyEvent`	This callback is invoked when the user interacts with the hardware keyboard. It gives ancestors of a focused component the chance to intercept a [KeyEvent]. Return true to stop propagation of this event. If you return false, the key event will be sent to this [onPreviewKeyEvent]'s child. If none of the children consume the event, it will be sent back up to the root using the onKeyEvent callback.
`onKeyEvent`	This callback is invoked when the user interacts with the hardware keyboard. While implementing this callback, return true to stop propagation of this event. If you return false, the key event will be sent to this [onKeyEvent]'s parent.
`content`	The content to be displayed inside the popup.

@Composable
@Deprecated(
    "Replaced by Popup with properties parameter",
    ReplaceWith("Popup(popupPositionProvider, onDismissRequest, " +
        "androidx.compose.ui.window.PopupProperties(focusable = focusable), " +
        "onPreviewKeyEvent, onKeyEvent, content)")

fun Popup(
    popupPositionProvider: PopupPositionProvider,
    onDismissRequest: (() -> Unit)? = null,
    onPreviewKeyEvent: ((KeyEvent) -> Boolean) = { false },
    onKeyEvent: ((KeyEvent) -> Boolean) = { false },
    focusable: Boolean = false,
    content: @Composable () -> Unit
)

Parameters

name	description
`popupPositionProvider`	Provides the screen position of the popup.
`onDismissRequest`	Executes when the user clicks outside of the popup.
`focusable`	Indicates if the popup can grab the focus.
`onPreviewKeyEvent`	This callback is invoked when the user interacts with the hardware keyboard. It gives ancestors of a focused component the chance to intercept a [KeyEvent]. Return true to stop propagation of this event. If you return false, the key event will be sent to this [onPreviewKeyEvent]'s child. If none of the children consume the event, it will be sent back up to the root using the onKeyEvent callback.
`onKeyEvent`	This callback is invoked when the user interacts with the hardware keyboard. While implementing this callback, return true to stop propagation of this event. If you return false, the key event will be sent to this [onKeyEvent]'s parent.
`content`	The content to be displayed inside the popup.

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

Parameters

name	description
`alignment`	The alignment relative to the parent.
`offset`	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`	Executes when the user clicks outside of the popup.
`properties`	[PopupProperties] for further customization of this popup's behavior.
`content`	The content to be displayed inside the popup.

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

Parameters

name	description
`popupPositionProvider`	Provides the screen position of the popup.
`onDismissRequest`	Executes when the user clicks outside of the popup.
`properties`	[PopupProperties] for further customization of this popup's behavior.
`content`	The content to be displayed inside the popup.

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

Parameters

name	description
`alignment`	The alignment relative to the parent.
`offset`	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`	Executes when the user clicks outside of the popup.
`properties`	[PopupProperties] for further customization of this popup's behavior.
`onPreviewKeyEvent`	This callback is invoked when the user interacts with the hardware keyboard. It gives ancestors of a focused component the chance to intercept a [KeyEvent]. Return true to stop propagation of this event. If you return false, the key event will be sent to this [onPreviewKeyEvent]'s child. If none of the children consume the event, it will be sent back up to the root using the onKeyEvent callback.
`onKeyEvent`	This callback is invoked when the user interacts with the hardware keyboard. While implementing this callback, return true to stop propagation of this event. If you return false, the key event will be sent to this [onKeyEvent]'s parent.
`content`	The content to be displayed inside the popup.

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

Parameters

name	description
`popupPositionProvider`	Provides the screen position of the popup.
`onDismissRequest`	Executes when the user clicks outside of the popup.
`properties`	[PopupProperties] for further customization of this popup's behavior.
`onPreviewKeyEvent`	This callback is invoked when the user interacts with the hardware keyboard. It gives ancestors of a focused component the chance to intercept a [KeyEvent]. Return true to stop propagation of this event. If you return false, the key event will be sent to this [onPreviewKeyEvent]'s child. If none of the children consume the event, it will be sent back up to the root using the onKeyEvent callback.
`onKeyEvent`	This callback is invoked when the user interacts with the hardware keyboard. While implementing this callback, return true to stop propagation of this event. If you return false, the key event will be sent to this [onKeyEvent]'s parent.
`content`	The content to be displayed inside the popup.

Code Example

PopupSample

@Composable
@Sampled
fun PopupSample() {
    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))
            )
        }
    }
}

Foundational Libraries

Compose UI

Foundation

Foundation Layout

Animation

Component Libraries

Material 3 Compose

Material Compose

Wear Material 3 Compose

Wear Material Compose

Jetpack Glance

Glance Wear Tiles

Tv Foundation

Tv Material Compose

Other Libraries

Navigation Compose

Installation

Overloads

Parameters

Parameters

Parameters

Parameters

Parameters

Parameters

Parameters

Parameters

Parameters

Parameters

Code Example

PopupSample