يخضع كل من المحتوى وعيّنات التعليمات البرمجية في هذه الصفحة للتراخيص الموضحّة في ترخيص استخدام المحتوى. إنّ Java وOpenJDK هما علامتان تجاريتان مسجَّلتان لشركة Oracle و/أو الشركات التابعة لها.
تاريخ التعديل الأخير: 2025-02-06 (حسب التوقيت العالمي المتفَّق عليه)
[null,null,["تاريخ التعديل الأخير: 2025-02-06 (حسب التوقيت العالمي المتفَّق عليه)"],[],[],null,["# Show or hide password based on a user toggle\n\n\u003cbr /\u003e\n\nYou can create an icon to hide or show a password based on a user toggle to\nimprove security and enhance the user experience.\n\nVersion compatibility\n---------------------\n\nThis implementation requires that your project minSDK be set to API level 21 or\nhigher.\n\n### Dependencies\n\n### Kotlin\n\n\u003cbr /\u003e\n\n```kotlin\n implementation(platform(\"androidx.compose:compose-bom:2025.08.00\"))\n implementation(\"androidx.compose.material3:material3\")\n implementation (\"androidx.compose.material:material-icons-extended\")\n \n```\n\n\u003cbr /\u003e\n\n### Groovy\n\n\u003cbr /\u003e\n\n```groovy\n implementation platform('androidx.compose:compose-bom:2025.08.00')\n implementation 'androidx.compose.material3:material3'\n implementation 'androidx.compose.material:material-icons-extended'\n \n```\n\n\u003cbr /\u003e\n\nShow or hide a password based on user toggle\n--------------------------------------------\n\nTo show or hide a password based on a user toggle, create an input field for\nentering information and use a clickable icon for the toggle:\n\n\n```kotlin\n@Composable\nfun PasswordTextField() {\n val state = remember { TextFieldState() }\n var showPassword by remember { mutableStateOf(false) }\n BasicSecureTextField(\n state = state,\n textObfuscationMode =\n if (showPassword) {\n TextObfuscationMode.Visible\n } else {\n TextObfuscationMode.RevealLastTyped\n },\n modifier = Modifier\n .fillMaxWidth()\n .padding(6.dp)\n .border(1.dp, Color.LightGray, RoundedCornerShape(6.dp))\n .padding(6.dp),\n decorator = { innerTextField -\u003e\n Box(modifier = Modifier.fillMaxWidth()) {\n Box(\n modifier = Modifier\n .align(Alignment.CenterStart)\n .padding(start = 16.dp, end = 48.dp)\n ) {\n innerTextField()\n }\n Icon(\n if (showPassword) {\n Icons.Filled.Visibility\n } else {\n Icons.Filled.VisibilityOff\n },\n contentDescription = \"Toggle password visibility\",\n modifier = Modifier\n .align(Alignment.CenterEnd)\n .requiredSize(48.dp).padding(16.dp)\n .clickable { showPassword = !showPassword }\n )\n }\n }\n )\n}https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/text/TextSnippets.kt#L868-L909\n```\n\n\u003cbr /\u003e\n\n### Key points about the code\n\n- Maintains the password visibility state in`showPassword`.\n- Uses a [`BasicSecureTextField`](/reference/kotlin/androidx/compose/foundation/text/package-summary#BasicSecureTextField(androidx.compose.foundation.text.input.TextFieldState,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Boolean,androidx.compose.foundation.text.input.InputTransformation,androidx.compose.ui.text.TextStyle,androidx.compose.foundation.text.KeyboardOptions,androidx.compose.foundation.text.input.KeyboardActionHandler,kotlin.Function2,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Brush,androidx.compose.foundation.text.input.TextFieldDecorator,androidx.compose.foundation.text.input.TextObfuscationMode,kotlin.Char)) composable for password entry.\n- Has a clickable trailing icon, which toggles the value of `showPassword`.\n- Defines the [`textObfuscationMode`](/reference/kotlin/androidx/compose/foundation/text/input/TextObfuscationMode) attribute and the visible/not-visible state of the trailing icon by the state of `showPassword`.\n\nResults\n-------\n\n\u003cbr /\u003e\n\n**Figure 1.** Toggling the show-and-hide password icon.\n\n\u003cbr /\u003e\n\nCollections that contain this guide\n-----------------------------------\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\n### Display text\n\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\n### Request user input\n\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\nHave questions or feedback\n--------------------------\n\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)"]]