उपयोगकर्ता के टॉगल के आधार पर पासवर्ड दिखाना या छिपाना

उपयोगकर्ता के टॉगल के आधार पर, पासवर्ड को छिपाने या दिखाने के लिए आइकॉन बनाया जा सकता है. इससे सुरक्षा को बेहतर बनाने के साथ-साथ, उपयोगकर्ता अनुभव को भी बेहतर बनाया जा सकता है.

वर्शन के साथ काम करना

इसे लागू करने के लिए, ज़रूरी है कि आपके प्रोजेक्ट का minSDK एपीआई लेवल 21 या उससे ज़्यादा पर सेट हो.

डिपेंडेंसी

उपयोगकर्ता के टॉगल के आधार पर पासवर्ड दिखाना या छिपाना

उपयोगकर्ता के टॉगल के आधार पर पासवर्ड दिखाने या छिपाने के लिए, जानकारी डालने के लिए एक इनपुट फ़ील्ड बनाएं और टॉगल के लिए क्लिक किए जा सकने वाले आइकॉन का इस्तेमाल करें:

@Composable
fun PasswordTextField() {
    val state = remember { TextFieldState() }
    var showPassword by remember { mutableStateOf(false) }
    BasicSecureTextField(
        state = state,
        textObfuscationMode =
        if (showPassword) {
            TextObfuscationMode.Visible
        } else {
            TextObfuscationMode.RevealLastTyped
        },
        modifier = Modifier
            .fillMaxWidth()
            .padding(6.dp)
            .border(1.dp, Color.LightGray, RoundedCornerShape(6.dp))
            .padding(6.dp),
        decorator = { innerTextField ->
            Box(modifier = Modifier.fillMaxWidth()) {
                Box(
                    modifier = Modifier
                        .align(Alignment.CenterStart)
                        .padding(start = 16.dp, end = 48.dp)
                ) {
                    innerTextField()
                }
                Icon(
                    if (showPassword) {
                        Icons.Filled.Visibility
                    } else {
                        Icons.Filled.VisibilityOff
                    },
                    contentDescription = "Toggle password visibility",
                    modifier = Modifier
                        .align(Alignment.CenterEnd)
                        .requiredSize(48.dp).padding(16.dp)
                        .clickable { showPassword = !showPassword }
                )
            }
        }
    )
}

कोड के बारे में अहम जानकारी

  • showPassword में पासवर्ड दिखने की स्थिति को बनाए रखता है.
  • पासवर्ड डालने के लिए, BasicSecureTextField कॉम्पोज़ेबल का इस्तेमाल करता है.
  • इसमें क्लिक किया जा सकने वाला आइकॉन होता है, जो showPassword की वैल्यू को टॉगल करता है.
  • showPassword की स्थिति के हिसाब से, textObfuscationMode एट्रिब्यूट और ट्रेलिंग आइकॉन के दिखने/न दिखने की स्थिति तय करता है.

नतीजे

पहली इमेज. पासवर्ड दिखाने और छिपाने वाले आइकॉन को टॉगल करना.

ऐसे संग्रह जिनमें यह गाइड शामिल है

यह गाइड, चुने गए क्विक गाइड के कलेक्शन का हिस्सा है. इसमें Android डेवलपमेंट के बड़े लक्ष्यों के बारे में बताया गया है:

टेक्स्ट, किसी भी यूज़र इंटरफ़ेस (यूआई) का मुख्य हिस्सा होता है. जानें कि उपयोगकर्ता को बेहतर अनुभव देने के लिए, ऐप्लिकेशन में टेक्स्ट को कैसे दिखाया जा सकता है.
जानें कि उपयोगकर्ता आपके ऐप्लिकेशन के साथ कैसे इंटरैक्ट कर सकते हैं. इसके लिए, टेक्स्ट डालने और इनपुट के अन्य तरीकों का इस्तेमाल करने की सुविधा लागू करें.

क्या आपका कोई सवाल है या सुझाव/राय देनी है

अक्सर पूछे जाने वाले सवालों के पेज पर जाएं और क्विक गाइड के बारे में जानें. इसके अलावा, हमसे संपर्क करके अपने सुझाव/राय दें.