[TextInputLayout] Prefix not aligned correctly when phone font size is changed

[daoudeddy]

Description: The prefix horizontal alignment is not correct when the font size of the phone is changed, it seems to be a bit higher from the text inside the TextInputEditText

Expected behavior: Should be aligned correctly the TextInputEditText

Android API version: Android 10

Material Library version: 1.2.0-alpha01

Device: Samsung Galaxy s10

[leticiarossi]

Could you provide screenshots and the source code?

[daoudeddy]

I realized that only the last 2 small sizes of the phone font only affect this bug

Screenshot

Source Code

<com.google.android.material.textfield.TextInputLayout
            android:id="@+id/loginPhoneInputLayout"
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:hint="@string/phone_number"
            app:boxStrokeColor="@color/mtrl_textinput_default_box_stroke_color"
            app:hintTextColor="?attr/colorAccent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:prefixText="+1"
            app:prefixTextColor="@color/textPrimaryColor"
            app:startIconDrawable="@drawable/ic_phone_android_white_24dp">

        <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/phoneNumberEditText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:backgroundTint="@color/transparent"
                android:imeOptions="actionDone"
                android:importantForAutofill="no"
                android:inputType="phone" />

</com.google.android.material.textfield.TextInputLayout>

[chandreshandroid]

@Edydaoud Please set TextAppearance of prefixtext. hope this one help you.

app:prefixTextAppearance="@style/TextAppearance.AppCompat.Medium"

or set style look like this and set prefix text size

<style name="prefix" parent="Base.TextAppearance.AppCompat.Body2">
        <item name="android:textSize">13sp</item>
</style>

   app:prefixTextAppearance="@style/prefix"

[kuuuurt]

It's also unaligned on my end.

Even when setting TextAppearance

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/mobile_number_hint"
    app:boxBackgroundColor="@color/colorSurface"
    app:boxStrokeColor="@color/colorOnSurface"
    app:hintTextColor="@color/colorOnSurface"
    app:prefixText="+1"
    app:prefixTextAppearance="@style/TextAppearance.App.Body1">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="number"
            android:maxLength="14"/>

</com.google.android.material.textfield.TextInputLayout>

Anything else we can do about this?

[heriawanfx]

I also get this bug, the height is sometime automatically resized. And I fix it by adding height value. For Dense Style, I give 54dp, and non Dense Style, I give 61dp. We hope it will be fixed next version release.

<com.google.android.material.textfield.TextInputLayout
    style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox.Dense"
    android:layout_width="match_parent"
    android:layout_height="54dp"
    app:prefixText="Rp. "
>

[pedrofsn]

I used 62dp to OutlinedBox. I guess this small variation it's different by custom font.

[devgen90]

Tried adding the height value, I am still having the issue.

[anishbajpai014]

While the following solution is hacky as well, it works better than modifying the sizes. I'm adding this after the view is initialized.

      val prefixView = textInputLayout.findViewById<AppCompatTextView>(com.google.android.material.R.id.textinput_prefix_text)
      prefixView.layoutParams = LinearLayout.LayoutParams(
          ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.MATCH_PARENT)
      prefixView.gravity = Gravity.CENTER

[pedrofsn]

@anishbajpai014 has a good solution!

[mrehan27]

While we are waiting for the fix to be released, @anishbajpai014's solution looks the best so far; but with a little tweak so that it looks safer and cleaner.

textInputLayout.prefixTextView.updateLayoutParams { 
    height = ViewGroup.LayoutParams.MATCH_PARENT
}
textInputLayout.prefixTextView.gravity = Gravity.CENTER

[pedrofsn]

@mrehan27 your solution is good too, but requires android core ktx. It's not a problem, just a warning.

[dumbfingers]

Tried both @mrehan27 and @anishbajpai014 's methods and it still cannot stay in the center of the text view.

If I use the following code, the prefix text will look like right/end aligned.

prefixTextView.apply {
                    visibility = View.VISIBLE
                    setTextAppearance(R.style.prefixStyle)
                    updateLayoutParams {
                        height = MATCH_PARENT
                        width = WRAP_CONTENT
                    }
                    gravity = Gravity.CENTER
}

Prefix style is like this:

    <style name="CurrencySymbol" parent="TextAppearance.AppCompat.Body1">
        <item name="android:textColor">@color/white</item>
        <item name="android:textStyle">bold</item>
    </style>

If I use a specific height/width dp value in updateLayoutParams, the PrefixTextView will set to the expected width/height, however the text will be cut-off when the size is below a certain size, e.g. 50dp., also the text is still aligned to the right/end.

Use MATCH_PARENT/WRAP_CONTENT	Use a fixed number

[RahulSDeshpande]

I too was facing similar issue in my app.

My solution:

// Call this function after the view has been init
private fun fixPrefixTextView() {
    prefixTextView.updateLayoutParams {
        height = ViewGroup.LayoutParams.MATCH_PARENT
    }
    prefixTextView.gravity = Gravity.CENTER
}

Now its like this:

Thanks. 💯

[foxtrotdev]

For me changing gravity to Gravity.BOTTOM solved the case:

AppCompatTextView prefixView = textInputLayoutPhoneNumber.findViewById(com.google.android.material.R.id.textinput_prefix_text);
prefixView.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.MATCH_PARENT));
prefixView.setGravity(Gravity.BOTTOM);

[alishanidrees]

prefixTextView.apply {
                    visibility = View.VISIBLE
                    setTextAppearance(R.style.prefixStyle)
                    updateLayoutParams {
                        height = MATCH_PARENT
                        width = WRAP_CONTENT
                    }
                    gravity = Gravity.CENTER
}

This solution worked for me after wasted some hours