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

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

नतीजे

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

वर्शन के साथ काम करने की सुविधा

इस सुविधा को लागू करने के लिए, आपके प्रोजेक्ट का 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 की वैल्यू को टॉगल करता है.
  • यह textObfuscationMode एट्रिब्यूट और showPassword की स्थिति के हिसाब से, ट्रेलिंग आइकॉन के दिखने/न दिखने की स्थिति तय करता है.

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

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

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

सवाल पूछना या सुझाव/राय देना

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