Changing TextInputLayout's Hint value as the user types in it

Viewed 1006

TextInputEditText

Here is my TextInputEditText inside TextInputLayout. The hint you can see is set on TextInputLayout.

The user must write 255 characters otherwise the post is not valid.

I want the digit 255 to decrease as the user types and when reached to 0, the hint should be blank.

Here is my code :

private int charactersLeft = 256; is declared outside onCreate method.

And this code is inside onCreate method :

final TextInputLayout postTextInputBase = findViewById(R.id.post_text_input_base);

final TextInputEditText postTextInput = findViewById(R.id.post_text_input);

postTextInput.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) {

        if (charactersLeft == 0) {
            postTextInputBase.setHint(null);
        } else {
            postTextInputBase.setHint((charactersLeft - 1) + " characters left");
        }
    }

    @Override
    public void afterTextChanged(Editable s) {

    }
});

I also tried to set charactersLeft to characterLeft -= 1 but, the java won't allow me to do that.

Then, how do I do this ?

4 Answers

Use app:counterEnabled="true"

  • Whether the character counter functionality is enabled or not in this layout.

Also use app:counterMaxLength="250"

  • Sets the max length to display at the character counter.

Try this

<android.support.design.widget.TextInputLayout
    android:id="@+id/post_text_input_base"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:counterEnabled="true"
    app:counterMaxLength="250">

    <EditText
        android:id="@+id/post_text_input"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="UserName" />
</android.support.design.widget.TextInputLayout>

OUTPUT

enter image description here

EDIT

public class RecyclerViewActivity extends AppCompatActivity {

    TextInputLayout postTextInputBase;
    EditText postTextInputEditText;

    int textLength = 9;
    int len = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_recycler_view);

        postTextInputBase = findViewById(R.id.post_text_input_base);

        postTextInputEditText = findViewById(R.id.post_text_input);

        postTextInputBase.setHint(textLength + " characters left");

        postTextInputEditText.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) {

                // first check your EditText is empty or not
                if (!TextUtils.isEmpty(postTextInputEditText.getText().toString())) {

                    int len = postTextInputEditText.getText().toString().length();
                    // than check that editText text length is less than max length or not
                    // for test case i have set max length 10
                    if (len < 9) {
                        // if length of text is less than max length than use minus one from max length and set error in your text input layout
                        textLength--;
                    } else {
                        textLength++;
                        
                    }
                    
                    postTextInputBase.setHint(textLength + " characters left");
                } else {
                    textLength = 9;
                }
            }

            @Override
            public void afterTextChanged(Editable s) {

              if(postTextInputEditText.getText().toString().isEmpty()){
                  textLength = 9;
                  postTextInputBase.setHint(textLength + " characters left");
              }
            }
        });


    }


}

OUTPUT

enter image description here

EDIT 2 If you need set hint than use this

postTextInputBase.setHint(textLength + " characters left");

OUTPUT

enter image description here

NOTE Don't forgot to set android:maxLength="10" in edittext

Try this. Works with your existing code.

int charactersLeft = 256;
final TextInputLayout postTextInputBase = findViewById(R.id.post_text_input_base);
final TextInputEditText postTextInput = findViewById(R.id.post_text_input);

postTextInput.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) {           
        }

        @Override
        public void afterTextChanged(Editable s) {
           if (s.length() == 0) {
                postTextInputBase.setHint(null);
            }else {
                postTextInputBase.setHint((charactersLeft - s.length()) + " characters left");
            }
        }
    });

and Add android:maxLength="256" to your TextInputEditText

You may do it programatically using setOnKeyListener on the edit text.

TextInputLayout postTextInputBase = findViewById(R.id.post_text_input_base);
TextInputEditText postTextInput = findViewById(R.id.post_text_input);
postTextInput.setOnKeyListener((v, keyCode, event) -> {
        // Do other things needed
        postTextInputBase.setHint("Characters left: " + (256 - postTextInput.getText().length()));
        return false;
});

To change Hint text only you can just change it on focus change.

editText.setOnFocusChangeListener(new View.OnFocusChangeListener() {
        @Override
        public void onFocusChange(View v, boolean hasFocus) {
            if(hasFocus)
                editText.setHint("Enter name");
            else
                editText.setHint("Name");
        }
    });
Related