Search code examples
kotlinandroid-jetpack-composetextfieldandroid-compose-textfield

is there a way to increase TextField password dot icon much bigger in jetpack compose?


I am doing Password Textfield and I want to do password dot when user typing but default password dot icon is small I want to bigger Textfield password dot. How can I do that ?

hear is my TextFiedl code ->

  var text by remember { mutableStateOf("") }
  var isFocused by remember { mutableStateOf(false) }
  val color = if (isFocused || text.isNotEmpty()) DefaultDYTColor else Color.Transparent

     TextField(
            modifier = Modifier
                .fillMaxWidth()
                .border(
                    width = if (isFocused) 1.dp else 0.dp,
                    color = color,
                    shape = RoundedCornerShape(25.dp)
                )
                .clip(RoundedCornerShape(25.dp))
                .onFocusChanged {
                    isFocused = it.isFocused
                },
            value = text,
            onValueChange = { newText ->
                text = newText
            },
            visualTransformation = PasswordVisualTransformation(),
            leadingIcon = {
                Image(painter = painterResource(id = R.drawable.ic_password), contentDescription = "" )
            },
            colors = TextFieldDefaults.textFieldColors(
                cursorColor = MaterialTheme.colors.DYTThemeColor,
                disabledTextColor = Color.Transparent,
                focusedIndicatorColor = Color.Transparent,
                unfocusedIndicatorColor = Color.Transparent,
                disabledIndicatorColor = Color.Transparent
            )
        )

Solution

  • The default mask for PasswordVisualTransformation is a bullet point or \u2022 in code style. You can replace the mask with any unicode character by declaring it as constructor parameter.

    For example, PasswordVisualTransformation(mask = '\u25CF') will apply a black circle as a mask.

    TextField(
        ...
        visualTransformation = PasswordVisualTransformation(mask = '\u25CF'),
        ...
    )
    

    Happy coding!