Create 06.03 EditText with TextWatcher.md

Android_Development_with_Kotlin/06. Views/06.03 EditText with TextWatcher.md

@@ -0,0 +1,146 @@
+# <div align=center>👨‍💻 EditText with TextWatcher 📌</div>
+
+<div align=center><img src="https://user-images.githubusercontent.com/78701779/138715838-c43cc006-d23e-4ca6-860a-4ca2fd53ca2a.png" ></div><br>
+
+EditText is used to read input from user.
+
+A listener could be attached to the EditText to execute an action whenever the text is changed in the EditText View.
+In this tutorial, we shall provide you an example Kotlin Android Application to implement a listener, TextWatcher object, for EditText to trigger an action on text change.
+
+In the following video, we have an EditText, where when user enters text, the listener triggers and reads the text. The text read is displayed in a TextView.
+
+<div align=center><img src="https://user-images.githubusercontent.com/78701779/138713664-cce3e543-535d-40a5-babf-6578558fa6b0.gif" ></div><br>
+
+To trigger an action for EditText on text change, follow these steps.
+
+**Step 1**: Add TextWatcher object as listener to reference of the EditText using addTextChangedListener.
+
+```kotlin
+editTextSample.addTextChangedListener(object : TextWatcher {
+
+    override fun afterTextChanged(s: Editable) {}
+
+    override fun beforeTextChanged(s: CharSequence, start: Int,
+                                   count: Int, after: Int) {
+    }
+
+    override fun onTextChanged(s: CharSequence, start: Int,
+                               before: Int, count: Int) {
+    }
+})
+```
+
+**Step 2**: Implement your logic in the function onTextChanged(). This method is called to notify you that, withins , thecount  characters beginning atstart  have just replaced old text that had lengthbefore
+
+```kotlin
+override fun onTextChanged(s: CharSequence, start: Int,
+                           before: Int, count: Int) {
+    // your code here
+}
+```
+
+**Step 3:** `s: CharSequence` holds the text present in EditText at the moment when text is changed.
+
+### addTextChangedListener
+
+addTextChangedListener method could be used to add a TextWatcher object (explanation provided below) to the EditText.
+
+### TextWatcher
+
+When TextWatcher object is attached to an Editable, its methods will be called when the text is changed. So, TextWatcher object can be used as a listener for text changes in the EditText.
+
+### Example 1 -- Listener for EditText on Text Change
+
+Create an Android Application with Empty Activity and replace the content of layout and Activity files with the following.
+
+```xml
+<?xml version="1.0" encoding="utf-8"?>
+<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    tools:context=".MainActivity">
+
+    <LinearLayout
+        android:orientation="vertical"
+        android:padding="10sp"
+        android:gravity="center_horizontal"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent">
+
+        <TextView
+            android:text="TutorialKart\nEditText On Text Change"
+            android:textSize="25sp"
+            android:gravity="center"
+            android:layout_marginBottom="50sp"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content" />
+
+        <TextView
+            android:id="@+id/tvSample"
+            android:textSize="20sp"
+            android:layout_marginBottom="50sp"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content" />
+
+        <EditText
+            android:id="@+id/editTextSample"
+            android:textSize="20sp"
+            android:hint="Enter Text ..."
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content" />
+
+    </LinearLayout>
+
+</android.support.constraint.ConstraintLayout>
+```
+
+- MainActivity.kt
+
+```kotlin
+package com.tutorialkart.edittextonchange
+
+import android.support.v7.app.AppCompatActivity
+import android.os.Bundle
+import android.text.Editable
+import android.text.TextWatcher
+import kotlinx.android.synthetic.main.activity_main.*
+
+class MainActivity : AppCompatActivity() {
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        setContentView(R.layout.activity_main)
+
+        editTextSample.addTextChangedListener(object : TextWatcher {
+
+            override fun afterTextChanged(s: Editable) {}
+
+            override fun beforeTextChanged(s: CharSequence, start: Int,
+                                           count: Int, after: Int) {
+            }
+
+            override fun onTextChanged(s: CharSequence, start: Int,
+                                       before: Int, count: Int) {
+                tvSample.setText("Text in EditText : "+s)
+            }
+        })
+    }
+}
+```
+Run this Android Application in your Android phone or Emulator. You would get an EditText on the screen. Try entering some text into EditText. When text changes in EditText, onTextChanged() method is called, and we are updating the text of TextView.
+
+<div align=center><img src="https://www.tutorialkart.com/img/android-edittext-on-text-change.png"></div>
+
+### Conclusion
+In this Kotlin Android Tutorial – EditText on Text Change, we have learnt how to listen on EditText for text changes and implement a code block whenever there is a change to the text in EditText.
+
+So that is all that you need to get started with the EditText with TextWatcher in Android (Kotlin) , if you have any doubts you can definetly visit the official documentation of [kotlin](https://kotlinlang.org/docs/home.html).
+
+## HAPPY LEARNING 😎🙌
+<hr>
+
+### References-:
+
+- For preparing these documents official documentation of [kotlin](https://kotlinlang.org/docs/home.html). was referred for maintaining the authenticity of the code and also for making the topics more informative some external sources like [blogs](https://www.tutorialkart.com/kotlin-android/android-edittext-on-text-change/) were referred.
+