Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Differences between TextWatcher 's onTextChanged, beforeTextChanged and afterTextChanged

In my Android project, I have had to add a TextChangedListener (TextWatcher) to an edit text view. And there are three parts to it:

  • onTextChanged()
  • beforeTextChanged()
  • afterTextChanged()

What are the differences of these three? I have had to implement a search of a table on the key listener and for my case all these three looked the same. Also they functioned the same. When I input a part of a product name, the table redraws with only those products that contain entered text in it. But I used the afterTextChanged() part. My code is:

EditProduct.addTextChangedListener(new TextWatcher() {          @Override         public void onTextChanged(CharSequence s, int start, int before,                 int count) {             // TODO Auto-generated method stub              // System.out.println("onTextChanged"+s);         }          @Override         public void beforeTextChanged(CharSequence s, int start, int count,                 int after) {             // TODO Auto-generated method stub             // System.out.println("beforeTextChanged"+s);         }          @Override         public void afterTextChanged(Editable s) {             // TODO Auto-generated method stub             // System.out.println("afterTextChanged"+s);              String new_prx = s.toString();              System.out.println(s);             mini_productList = new ArrayList<Product>();              // mini_productList             int count = 0;             if (new_prx.equals("")) {                  loadtableProducts(productList);              } else {                  for (int i = 0; i < productList.size(); i++) {                      if (productList.get(i).getDescription().toString()                             .substring(0, (new_prx.length()))                             .equalsIgnoreCase(new_prx)) {                         mini_productList.add(productList.get(i));                         count++;                      }                 }                  loadtableProducts(mini_productList);             }         }     }); 

So can someone give me an explanation on these three?

like image 635
Samantha Withanage Avatar asked Nov 29 '13 04:11

Samantha Withanage


People also ask

What is afterTextChanged in Android?

afterTextChanged(Editable s) This method is called to notify you that, somewhere within s , the text has been changed. abstract void. beforeTextChanged(CharSequence s, int start, int count, int after)

In which condition is TextWatcher used?

The TextWatcher interface can be used for listening in for changes in text in an EditText.

How do I use addTextChangedListener?

How to retrieve edittext value on typing time and set into textview. Edittext addTextChangedListener() method comes with inbuilt three more different functions onTextChanged, beforeTextChanged, afterTextChanged. With the use of all three methods developer can do anything while user start typing on edittext.

How do you use kotlin text watcher?

This example demonstrates how to use the TextWatcher class in kotlin. Step 1 − Create a new project in Android Studio, go to File ⇒New Project and fill all required details to create a new project. Step 2 − Add the following code to res/layout/activity_main. xml.


1 Answers

The parameters for beforeTextChanged and onTextChanged are a little hard to understand at first. It may be helpful to see them being used in an example. Watch the following demonstration a few times. Pay attention to the counts.

  • The red highlight is the old text that is about to be replaced by the green text.
  • The green highlight is the new text that just replaced the red text.

enter image description here

beforeTextChanged

  • start is the start index of the red highlighted text (that is about to be deleted)
  • count is the length of the red highlighted text (that is about to be deleted)
  • after is the length of the green highlighted text (that is about to be added)

onTextChanged

  • start is the start index of the green highlighted text (that just got added).
    This is the same as the start of beforeTextChanged.
  • before is the length of the red highlighted text (that just got deleted).
    This is the same as the count of beforeTextChanged.
  • count is the length of the green highlighted text (that just got added).
    This is the same as the after of beforeTextChanged.

afterTextChanged

  • editable is the editable text from the EditText. You are allowed to change it here. Doing so will trigger all the TextWatcher events again.
  • You are not given any information about what was changed. If you want to know, you can set a span in onTextChanged and then look up the span here.

When to use which?

If you want to observe the changes being made, use beforeTextChanged() or onTextChanged(). You are not allowed to change the CharSequence text in either of these methods, though.

If you want to further modify the text after it was changed, do it in afterTextChanged().

Code

Here is the code if you want to play around with it yourself.

MainActivity.java

public class MainActivity extends AppCompatActivity {      final static int RED_COLOR = Color.parseColor("#fb7373");     final static int GREEN_COLOR = Color.parseColor("#40de83");      @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);          EditText editText = findViewById(R.id.editText);         final TextView tvBeforeText = findViewById(R.id.tvBeforeText);         final TextView tvBeforeNumbers = findViewById(R.id.tvBeforeNumbers);         final TextView tvAfterText = findViewById(R.id.tvAfterText);         final TextView tvAfterNumbers = findViewById(R.id.tvAfterNumbers);          editText.addTextChangedListener(new TextWatcher() {             @Override             public void beforeTextChanged(CharSequence s, int start, int count, int after) {                 SpannableString spannableString = new SpannableString(s);                 BackgroundColorSpan backgroundSpan = new BackgroundColorSpan(RED_COLOR);                 spannableString.setSpan(backgroundSpan, start, start + count, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);                 tvBeforeText.setText(spannableString);                 tvBeforeNumbers.setText("start=" + start + "  count=" + count + " after=" + after);             }              @Override             public void onTextChanged(CharSequence s, int start, int before, int count) {                 SpannableString spannableString = new SpannableString(s);                 BackgroundColorSpan backgroundSpan = new BackgroundColorSpan(GREEN_COLOR);                 spannableString.setSpan(backgroundSpan, start, start + count, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);                 tvAfterText.setText(spannableString);                 tvAfterNumbers.setText("start=" + start + " before=" + before + " count=" + count);             }              @Override             public void afterTextChanged(Editable s) {                 Log.i("TAG", "afterTextChanged: " + s);             }         });     } } 

activity_main.xml

<?xml version="1.0" encoding="utf-8"?> <LinearLayout     xmlns:android="http://schemas.android.com/apk/res/android"     android:orientation="vertical"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:padding="5dp">      <EditText         android:id="@+id/editText"         android:layout_width="match_parent"         android:layout_height="wrap_content" />      <TextView         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:textSize="20sp"         android:text="beforeTextChanged" />      <TextView         android:id="@+id/tvBeforeText"         android:textSize="17sp"         android:layout_width="wrap_content"         android:layout_height="wrap_content" />      <TextView         android:id="@+id/tvBeforeNumbers"         android:textSize="17sp"         android:text="start=0 count=0 after=0"         android:layout_width="wrap_content"         android:layout_height="wrap_content" />      <TextView         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:textSize="20sp"         android:layout_marginTop="20dp"         android:text="onTextChanged" />      <TextView         android:id="@+id/tvAfterText"         android:textSize="17sp"         android:layout_width="wrap_content"         android:layout_height="wrap_content" />      <TextView         android:id="@+id/tvAfterNumbers"         android:textSize="17sp"         android:text="start=0 count=0 after=0"         android:layout_width="wrap_content"         android:layout_height="wrap_content" /> </LinearLayout> 
like image 160
Suragch Avatar answered Oct 16 '22 16:10

Suragch