Mantieni tutto organizzato con le raccolte
Salva e classifica i contenuti in base alle tue preferenze.
Utilizza un badge per visualizzare un piccolo elemento visivo per indicare lo stato
o un valore numerico in un altro componente. Ecco alcuni scenari comuni in cui
potresti utilizzare un badge:
Notifiche: mostra il numero di notifiche da leggere su un'icona dell'app
o sulla campana delle notifiche.
Messaggi: indica i messaggi nuovi o non letti all'interno di un'applicazione di chat.
Aggiornamenti di stato: mostrano lo stato di un'attività, ad esempio "completata", "in
corso" o "non riuscita".
Quantità carrello: mostra il numero di articoli nel carrello di un utente.
Nuovi contenuti: metti in evidenza i nuovi contenuti o le nuove funzionalità disponibili per l'utente.
Figura 1. Esempi di badge
Superficie API
Utilizza il composable BadgedBox per implementare i badge nella tua applicazione. In definitiva, si tratta di un contenitore. Puoi controllare il suo aspetto con questi due parametri principali:
content: i contenuti componibili contenuti in BadgedBox. In genere
Icon.
badge: il composable che viene visualizzato come badge sopra i contenuti.
In genere il composable Badge dedicato.
Esempio di base
Questo snippet di codice mostra un'implementazione di base di BadgedBox:
L'argomento per il parametro badge di BadgedBox è Badge.
Poiché Badge non ha argomenti propri, l'app mostra il badge predefinito, ovvero un piccolo cerchio rosso.
Icon funge da argomento per il parametro content di BadgedBox. È l'icona sopra la quale viene visualizzato il badge. In questo caso, si tratta di un'icona a forma di busta.
Ecco come appare:
Figura 2. Un'implementazione minima del badge.
Esempio dettagliato
Il seguente snippet mostra come visualizzare i valori nel badge che
rispondono alle azioni dell'utente.
Questo esempio implementa un'icona del carrello con un badge che mostra il
numero di articoli nel carrello dell'utente.
Il BadgedBox viene visualizzato solo quando il conteggio degli elementi è superiore a 0.
Gli argomenti per containerColor e contentColor controllano l'aspetto
del badge.
Il composable Text per lo spazio dei contenuti di Badge viene visualizzato all'interno
del badge. In questo caso, viene visualizzato il numero di articoli nel carrello.
Questa implementazione ha il seguente aspetto:
Figura 3. Un badge che mostra il numero di articoli in un carrello degli acquisti.
I campioni di contenuti e codice in questa pagina sono soggetti alle licenze descritte nella Licenza per i contenuti. Java e OpenJDK sono marchi o marchi registrati di Oracle e/o delle sue società consociate.
Ultimo aggiornamento 2025-08-25 UTC.
[[["Facile da capire","easyToUnderstand","thumb-up"],["Il problema è stato risolto","solvedMyProblem","thumb-up"],["Altra","otherUp","thumb-up"]],[["Mancano le informazioni di cui ho bisogno","missingTheInformationINeed","thumb-down"],["Troppo complicato/troppi passaggi","tooComplicatedTooManySteps","thumb-down"],["Obsoleti","outOfDate","thumb-down"],["Problema di traduzione","translationIssue","thumb-down"],["Problema relativo a esempi/codice","samplesCodeIssue","thumb-down"],["Altra","otherDown","thumb-down"]],["Ultimo aggiornamento 2025-08-25 UTC."],[],[],null,["Use a [badge](https://m3.material.io/components/badges/overview) to display a small visual element to denote status\nor a numeric value on another composable. Here are a few common scenarios where\nyou might use a badge:\n\n- **Notifications**: Display the number of unread notifications on an app icon or notification bell.\n- **Messages**: Indicate new or unread messages within a chat application.\n- **Status updates**: Show the status of a task, such as \"complete,\" \"in progress,\" or \"failed.\"\n- **Cart quantity**: Display the number of items in a user's shopping cart.\n- **New content**: Highlight new content or features available to the user.\n\n**Figure 1.** Badge examples\n\nAPI surface\n\nUse the [`BadgedBox`](/reference/kotlin/androidx/compose/material3/package-summary#BadgedBox(kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function1)) composable to implement badges in your application. It\nis ultimately a container. You control its appearance with these two main\nparameters:\n\n- `content`: The composable content that the `BadgedBox` contains. Typically `Icon`.\n- `badge`: The composable that appears as the badge over the content. Typically the dedicated [`Badge`](/reference/kotlin/androidx/compose/material3/package-summary#Badge(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function1)) composable.\n\nBasic example\n\nThis code snippet shows a basic implementation of `BadgedBox`:\n\n\n```kotlin\n@Composable\nfun BadgeExample() {\n BadgedBox(\n badge = {\n Badge()\n }\n ) {\n Icon(\n imageVector = Icons.Filled.Mail,\n contentDescription = \"Email\"\n )\n }\n}https://github.com/android/snippets/blob/5673ffc60b614daf028ee936227128eb8c4f9781/compose/snippets/src/main/java/com/example/compose/snippets/components/Badges.kt#L62-L74\n```\n\n\u003cbr /\u003e\n\nThis example displays a badge that overlaps the provided `Icon` composable. Note\nthe following in the code:\n\n- [`BadgedBox`](/reference/kotlin/androidx/compose/material3/package-summary#BadgedBox(kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function1)) serves as the overall container.\n- The argument for the `badge` parameter of `BadgedBox` is [`Badge`](/reference/kotlin/androidx/compose/material3/package-summary#Badge(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function1)). Because `Badge` has no arguments of its own, the app displays the default badge, which is a small red circle.\n- `Icon` serves as the argument for the `content` parameter of `BadgedBox`. It is the icon over which the badge appears. In this case, it is a mail icon.\n\nThis is how it appears:\n**Figure 2.** A minimal badge implementation. **Important:** You can pass any composable to the `BadgedBox` composable's content slot. You could therefore create a badge that displays on a `Button`, an `Image`, or any other composable.\n\nDetailed example\n\nThe following snippet demonstrates how you can display values in the badge that\nrespond to user actions.\n\n\n```kotlin\n@Composable\nfun BadgeInteractiveExample() {\n var itemCount by remember { mutableStateOf(0) }\n\n Column(\n verticalArrangement = Arrangement.spacedBy(16.dp)\n ) {\n BadgedBox(\n badge = {\n if (itemCount \u003e 0) {\n Badge(\n containerColor = Color.Red,\n contentColor = Color.White\n ) {\n Text(\"$itemCount\")\n }\n }\n }\n ) {\n Icon(\n imageVector = Icons.Filled.ShoppingCart,\n contentDescription = \"Shopping cart\",\n )\n }\n Button(onClick = { itemCount++ }) {\n Text(\"Add item\")\n }\n }\n}https://github.com/android/snippets/blob/5673ffc60b614daf028ee936227128eb8c4f9781/compose/snippets/src/main/java/com/example/compose/snippets/components/Badges.kt#L79-L107\n```\n\n\u003cbr /\u003e\n\nThis example implements a shopping cart icon with a badge that displays the\nnumber of items in the user's cart.\n\n- The [`BadgedBox`](/reference/kotlin/androidx/compose/material3/package-summary#BadgedBox(kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function1)) displays only when the item count is over 0.\n- The arguments for `containerColor` and `contentColor` control the appearance of the badge.\n- The `Text` composable for the content slot of [`Badge`](/reference/kotlin/androidx/compose/material3/package-summary#Badge(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function1)) appears within the badge. In this case, it displays the number of items in the cart.\n\nThis implementation appears as follows:\n**Figure 3.** A badge that displays the number of items in a shopping cart.\n\nAdditional resources\n\n- [Material 3 - Badges](https://m3.material.io/components/badges/overview)\n- [`BadgedBox`](/reference/kotlin/androidx/compose/material3/package-summary#BadgedBox(kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function1))\n- [`Badge`](/reference/kotlin/androidx/compose/material3/package-summary#Badge(androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function1))"]]