Search code examples
androidkotlinandroid-jetpack-composeandroid-drawable

How to add drawable's next to textfield in jetpack compose?


I am trying to figure out how to add a drawable to a text within a textfield (OutlinedTextField) but without any success. I have already created a drawable in the drawable folder. Do I need to create a seperate composable to insert it or can I directly add it inside the textfield ?

This is my textfield in the composable:


        Spacer(modifier = Modifier.height(20.dp))
        OutlinedTextField(
            value = username.value,
            onValueChange = { newText ->
                username.value = newText
            },
            label = { Text(text = "Username") },
            placeholder = { Text("") }, // placeholder / hint
            modifier = Modifier
                .fillMaxWidth(180F)
        )


Solution

  • Use leadingIcon instead of placeHolder

               OutlinedTextField(
                   value = username.value,
                   onValueChange = { newText ->
                       username.value = newText
                   },
                   label = { Text(text = "Username") },
                   leadingIcon = { Icon(imageVector = Icons.Default.Place, contentDescription = null)},
                   modifier = Modifier
                       .fillMaxWidth(180F)
               )