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

June 29, 2022

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)
           )