Live character count for EditText
I was wondering what the best way to do a live character count of an edit-text box is in Android. I was looking at this but I couldn't seem to make any sense of it.
To describe the problem, I have an EditText and I'm trying to limit the characters to 150. I can do this with an input filter, however I want to show right below the text box the number of characters a user has entered(Almost like stack overflow is doing right now).
If someone could write a small snippet of example code or point me in the right direction I'd appreciate it a lot.
you can use a TextWatcher to see when the text has changed
private TextView mTextView;
private EditText mEditText;
private final TextWatcher mTextEditorWatcher = new TextWatcher() {
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
}
public void onTextChanged(CharSequence s, int start, int before, int count) {
//This sets a textview to the current length
mTextView.setText(String.valueOf(s.length()));
}
public void afterTextChanged(Editable s) {
}
};
you set the TextWatcher for the edittext with
mEditText.addTextChangedListener(mTextEditorWatcher);
You can do character counting from xml itself using TextInputLayout wrapper for EditText introduced in SupportLibrary v23.1
Just wrap your EditText with a TextInputLayout and set CounterEnabled to true and Set a counterMaxLength.
<android.support.design.widget.TextInputLayout
android:id="@+id/textContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:counterEnabled="true"
app:counterMaxLength="20"
>
<EditText
android:id="@+id/text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Text Hint"
/>
</android.support.design.widget.TextInputLayout>
You'll get a material effect like this
You may use counterOverflowTextAppearance , counterTextAppearance to style the counter.
EDIT
From Android documentation.
The TextInputEditText class is provided to be used as a child of this layout. Using TextInputEditText allows TextInputLayout greater control over the visual aspects of any text input. An example usage is as so:
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/form_username"/>
</android.support.design.widget.TextInputLayout>
TextInputLayout TextInputEditText
You can do it with TextInputLayout
and compat libraries with:
app:counterEnabled="true"
app:counterMaxLength="420"
and complete:
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:counterEnabled="true"
app:counterMaxLength="420">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxLength="420" />
</android.support.design.widget.TextInputLayout>
in xml add this attribute for editText
android:maxLength="80"
in java add this listener
ed_caption.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) {
tv_counter.setText(80 - s.toString().length() + "/80");
}
});
Its very Simple Follow the instructions below:
====Add them to your Imports===
import android.text.Editable;
import android.text.TextWatcher;
=====Define this=====
private TextView sms_count;
==========Inside On Create=====
sms_count = (TextView) findViewById(R.id.textView2);
final TextWatcher txwatcher = new TextWatcher() {
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
}
public void onTextChanged(CharSequence s, int start, int before, int count) {
sms_count.setText(String.valueOf(s.length()));
}
public void afterTextChanged(Editable s) {
}
};
sms_message.addTextChangedListener(txwatcher);