material-components / material-components/material-components-android

[TextInputEditText] The height of a resized TextInputEditText gets changed after an icon is displayed

Open
#1,773 3 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug Widget: TextField
Dominant language
Java
Stars
17.4k
Forks
3.2k
PR merge metrics
No merged PRs in 30d

Description

Description: I've been trying to resize the height (making it smaller/slimmer to be exact) of TextInputEditText without messing up too much of the layout. @gabrielemariotti answer in https://stackoverflow.com/a/57765685/12679951 seems to do just that, until I try setting error text on it. When I set the error programmatically using the setError() method (I'm using Java), the height gets changed back (I think) to the default height. And when I clear the error by passing null to the setError(), the height stays that way.
error

I then tested the helperText since it doesn't display icon by default, and it didn't change the height. Then to confirm, I set the endIconMode to clear_text, and when I typed some text the height instantly got changed. So, maybe it's because the styled TextInputEditText height couldn't accommodate the height of those icons.

Expected behavior: The height of the TextInputEditText doesn't get changed after displaying an icon, or at least change height back to the desired size again after error is cleared.

Source code:

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/input_layout"
        style="@style/MyDenseOutlined"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/input"
        app:errorEnabled="true">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/input_edit"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:maxLines="1" />
    </com.google.android.material.textfield.TextInputLayout>

styles.xml :

    <style name="MyDenseOutlined" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
        <item name="boxStrokeColor">@android:color/black</item>
        <item name="hintTextColor">#090fbd</item>
        <item name="materialThemeOverlay">@style/MyThemeOverlayOutlinedDense</item>
    </style>

    <style name="MyThemeOverlayOutlinedDense">
        <item name="editTextStyle">@style/MyTextInputEditText_outlinedBox_dense_h</item>
    </style>

    <style name="MyTextInputEditText_outlinedBox_dense_h" parent="@style/Widget.MaterialComponents.TextInputEditText.OutlinedBox.Dense">
        <item name="android:paddingTop">8dp</item>
        <item name="android:paddingBottom">8dp</item>
    </style>

.java :

        repeatButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (inputEditText.getText().toString().trim().isEmpty()) {
                    inputLayout.setError("Field can't be empty");
                }
            }
        });

        inputEditText.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {
            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
                inputLayout.setError(null);
            }

            @Override
            public void afterTextChanged(Editable s) {
            }
        });

Android API version: 30

Material Library version: 1.3.0-alpha03

Device: AVD Pixel 2 API 30

So, any way to get around this problem?
Like, can I adjust the size of the icons or maybe the paddings'?

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the behavior with TextInputLayout.setError(), TextInputEditText, and endIconMode="clear_text" using the supplied styles, API 30, and Material Library 1.3.0-alpha03. Trace how displaying or clearing the error and end icon affects the requested edit-text height; done means the customized height remains stable through both transitions.

Written by the indexing model from the issue text.

Assessment

Tech stack
android, java
Domain
mobile
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.