A modern programming language that makes developers happier.

kotlinlang

Screenshot 2024-07-29 160614.png

Hello everyone. I have a very simple code where I am trying to create like a CountryCodePicker Implementation. I have created two textfields that are placed horizontally. I added a trailingIcon in the first textField that has a weight of 1f, and the second a weight of 2f. The issue is that the Icon I added seems to be having some kind of extra padding around it, and thus there is no space for the text(I am noticing that by the placeholder) in the first text field which then appears to make it jump another line. I added a fixed size of 20dp to the icon, but it still appears to be the same. Below is a screenshot and I will also share my code in a thread.

```   Row(
        modifier = Modifier.fillMaxWidth(),
        verticalAlignment = Alignment.CenterVertically
    ) {
        OutlinedTextField(
            value = "",
            modifier = Modifier.weight(1f),
            onValueChange = {

            },
            placeholder = {
                Text("Country")
            },
            label = {
                Text("+234")
            },
            trailingIcon = {
                Icon(
                    Icons.Filled.ArrowDropDown,
                    modifier = Modifier.size(20.dp),
                    contentDescription = ""
                )
            }
        )
        Spacer(modifier = Modifier.width(8.dp))

        OutlinedTextField(
            value = "",
            modifier = Modifier.weight(2f),
            onValueChange = {

            },
            placeholder = {
                Text("Phone number")
            },
            label = {
                Text("Enter phone number")
            }
        )
    }```

Screenshot 2024-07-29 161617.png

Just to be more clear with the problem. Here is another screenshot where I noticed the extra spacing I noticed. I think this gives more like a blueprintish description

Has anyone experienced this before? Any help on this?

So update on this. Just in case anyone who in the future might encounter this same issue and come across this thread, there are a few workarounds for this. I guess the first one would be using the BasicTextField Composable, it doesn't set any default padding and you can basically customize and build out most things yourself. The other is making use of the "suffix" parameter in place of the trailing icon, but the thing with this one is that the suffix doesn't appear until you start to input a value in the TextField. And the last which is the one I went with would be just increasing the weight of the textfields a bit. You can increase the second textfield to something maybe like .weight(3f) and the one with the country code to something like .weight(2f)

Screenshot 2024-07-31 203052.png

Here I used a weight value of 1.7f for the first text field and 3f for the second. You can tailor it to any value that meets the needs of your app.

Hi, you could also try setting a Modifier.weight(1f).fillMaxWidth() to the phone number composable and none to the country code composable. See this article <https://medium.com/@theAndroidDeveloper/jetpack-compose-trick-the-hidden-secret-of-the-weight-modifier-640daf63b151>