Afficher des messages pop-up ou des requêtes d'entrée utilisateur
Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Le composant Dialog affiche des messages pop-up ou demande une entrée utilisateur sur une couche au-dessus du contenu principal de l'application. Il crée une expérience d'UI intrusive pour capter l'attention de l'utilisateur.
Voici quelques cas d'utilisation d'une boîte de dialogue:
Confirmer l'action de l'utilisateur, par exemple lorsqu'il supprime un fichier
Demander à l'utilisateur de saisir des informations, par exemple dans une application de liste de tâches
Présenter une liste d'options à sélectionner par l'utilisateur, comme choisir un pays lors de la configuration d'un profil.
Cet article fournit les implémentations suivantes:
Cette implémentation nécessite que la version minimale du SDK de votre projet soit définie sur le niveau d'API 21 ou supérieur.
Dépendances
Créer une boîte de dialogue d'alerte
Le composable AlertDialog fournit une API pratique pour créer une boîte de dialogue sur le thème Material Design. L'exemple suivant implémente deux boutons dans une boîte de dialogue d'alerte, l'un pour fermer la boîte de dialogue et l'autre pour confirmer la requête:
Cette implémentation implique un composable parent qui transmet des arguments au composable enfant de cette manière:
Résultats
Figure 1 Boîte de dialogue d'alerte avec des boutons.
Points essentiels
AlertDialog dispose de paramètres spécifiques pour gérer des éléments particuliers de la boîte de dialogue. En voici quelques-uns:
title: texte qui s'affiche en haut de la boîte de dialogue.
text: texte qui s'affiche au centre de la boîte de dialogue.
icon: graphique qui s'affiche en haut de la boîte de dialogue.
onDismissRequest: fonction appelée lorsque l'utilisateur ferme la boîte de dialogue, par exemple en appuyant en dehors de celle-ci.
dismissButton: composable qui sert de bouton de fermeture.
confirmButton: composable qui sert de bouton de confirmation.
Lorsque l'utilisateur clique sur l'un des boutons, la boîte de dialogue se ferme. Lorsque l'utilisateur clique sur "Confirmer", une fonction qui gère également la confirmation est appelée. Dans cet exemple, ces fonctions sont onDismissRequest() et onConfirmRequest().
Si votre boîte de dialogue nécessite un ensemble de boutons plus complexe, vous pouvez utiliser le composable Dialog et le renseigner de manière plus libre.
Créer une boîte de dialogue
Dialog est un composable de base qui ne fournit aucun style ni emplacement prédéfini pour le contenu. Il s'agit d'un conteneur simple que vous devez renseigner avec un conteneur tel que Card. Voici quelques-uns des principaux paramètres d'une boîte de dialogue:
onDismissRequest: lambda appelé lorsque l'utilisateur ferme la boîte de dialogue.
properties: instance de DialogProperties qui offre un champ d'application supplémentaire pour la personnalisation.
Créer une boîte de dialogue de base
L'exemple suivant est une implémentation de base du composable Dialog. Notez qu'il utilise un Card comme conteneur secondaire. Sans Card, le composant Text apparaîtrait seul au-dessus du contenu principal de l'application.
Résultat
Notez que lorsque la boîte de dialogue est ouverte, le contenu principal de l'application en dessous apparaît sombre et grisé:
Figure 2 Boîte de dialogue minimale.
Créer une boîte de dialogue avancée
Voici une implémentation plus avancée du composable Dialog. Dans ce cas, le composant implémente manuellement une interface semblable à l'exemple AlertDialog précédent.
Résultat
Figure 3 Boîte de dialogue incluant une image.
Collections contenant ce guide
Ce guide fait partie de ces collections de guides rapides sélectionnées qui couvrent des objectifs de développement Android plus larges:
Texte à afficher
Le texte est un élément central de n'importe quelle interface utilisateur. Découvrez les différentes façons de présenter du texte dans votre application pour offrir une expérience utilisateur agréable.
Découvrez comment les fonctions composables peuvent vous permettre de créer facilement de beaux composants d'interface utilisateur basés sur le système de conception Material Design.
Le contenu et les exemples de code de cette page sont soumis aux licences décrites dans la Licence de contenu. Java et OpenJDK sont des marques ou des marques déposées d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2025/02/06 (UTC).
[[["Facile à comprendre","easyToUnderstand","thumb-up"],["J'ai pu résoudre mon problème","solvedMyProblem","thumb-up"],["Autre","otherUp","thumb-up"]],[["Il n'y a pas l'information dont j'ai besoin","missingTheInformationINeed","thumb-down"],["Trop compliqué/Trop d'étapes","tooComplicatedTooManySteps","thumb-down"],["Obsolète","outOfDate","thumb-down"],["Problème de traduction","translationIssue","thumb-down"],["Mauvais exemple/Erreur de code","samplesCodeIssue","thumb-down"],["Autre","otherDown","thumb-down"]],["Dernière mise à jour le 2025/02/06 (UTC)."],[],[],null,["\u003cbr /\u003e\n\nThe [`Dialog`](/reference/kotlin/androidx/compose/ui/window/package-summary#Dialog(kotlin.Function0,androidx.compose.ui.window.DialogProperties,kotlin.Function0)) component displays pop-up messages or requests user input on a\nlayer above the main app content. It creates an interruptive UI experience to\ncapture user attention.\n\nAmong the use cases for a dialog are the following:\n\n- Confirming user action, such as when deleting a file.\n- Requesting user input, such as in a to-do list app.\n- Presenting a list of options for user selection, like choosing a country in a profile setup.\n\nThis topic provides the following implementations:\n\n- [Alert](#alert)\n- [Basic dialog](#basic)\n- [Advanced dialog](#advanced)\n\nVersion compatibility\n\nThis implementation requires that your project minSDK be set to API level 21 or\nhigher.\n\nDependencies\n\nCreate an Alert dialog\n\nThe [`AlertDialog`](/reference/kotlin/androidx/compose/material3/package-summary#AlertDialog(kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.ui.window.DialogProperties)) composable provides a convenient API for creating a\nMaterial Design themed dialog. The following example implements two buttons in\nan alert dialog, one that dismisses the dialog, and another that confirms its\nrequest:\n\nThis implementation implies a parent composable that passes arguments to the\nchild composable in this way:\n\nResults **Figure 1.** An alert dialog with buttons.\n\nKey points\n\n`AlertDialog` has specific parameters for handling particular elements of the\ndialog. Among them are the following:\n\n- `title`: The text that appears along the top of the dialog.\n- `text`: The text that appears centered within the dialog.\n- `icon`: The graphic that appears at the top of the dialog.\n- `onDismissRequest`: The function called when the user dismisses the dialog, such as by tapping outside of it.\n- `dismissButton`: A composable that serves as the dismiss button.\n- `confirmButton`: A composable that serves as the confirm button.\n\n- When the user clicks either of the buttons, the dialog closes. When the user\n clicks confirm, it calls a function that also handles the confirmation. In\n this example, those functions are `onDismissRequest()` and\n `onConfirmRequest()`.\n\n In cases where your dialog requires a more complex set of buttons, you may\n benefit from using the `Dialog` composable and populating it in a more\n freeform manner.\n\nCreate a dialog\n\n[`Dialog`](/reference/kotlin/androidx/compose/ui/window/package-summary#Dialog(kotlin.Function0,androidx.compose.ui.window.DialogProperties,kotlin.Function0)) is a basic composable that doesn't provide any styling or\npredefined slots for content. It is a straightforward container that you should\npopulate with a container such as `Card`. The following are some of the key\nparameters of a dialog:\n\n- **`onDismissRequest`**: The lambda called when the user closes the dialog.\n- **`properties`** : An instance of [`DialogProperties`](/reference/kotlin/androidx/compose/ui/window/DialogProperties) that provides some additional scope for customization.\n\n| **Caution:** You must manually specify the size and shape of `Dialog`. You also must provide an inner container.\n\nCreate a basic dialog\n\nThe following example is a basic implementation of the `Dialog` composable. Note\nthat it uses a `Card` as the secondary container. Without the `Card`, the `Text`\ncomponent would appear alone above the main app content.\n\nResult\n\nNote that when the dialog is open, the main app content beneath it appears\ndarkened and grayed out:\n**Figure 2.** Minimal dialog.\n\nCreate an advanced dialog\n\nThe following is a more advanced implemented of the `Dialog` composable. In this\ncase, the component manually implements a similar interface to the preceding\n`AlertDialog` example.\n| **Caution:** If you only need to display a two-button dialog as in this example, you should use `AlertDialog` and its more convenient API. However, if you want to create a more complex dialog, perhaps with forms and multiple buttons, you should use `Dialog` with custom content, as in the following example.\n\nResult **Figure 3.** A dialog that includes an image.\n\nCollections that contain this guide\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\nDisplay text \nText is a central piece of any UI. Find out different ways you can present text in your app to provide a delightful user experience. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-text) \n\nRequest user input \nLearn how to implement ways for users to interact with your app by entering text and using other means of input. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/request-user-input) \n\nDisplay interactive components \nLearn how composable functions can enable you to easily create beautiful UI components based on the Material Design design system. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-interactive-components) \n\nHave questions or feedback \nGo to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts. \n[Go to FAQ](/quick-guides/faq) [Leave feedback](https://issuetracker.google.com/issues/new?component=1573691&template=1993320)"]]