-
Notifications
You must be signed in to change notification settings - Fork 1.6k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #6689 from eshan1925/Android_Development_With_Kotlin
Added 06.03 EditText with TextWatcher.md
- Loading branch information
Showing
1 changed file
with
146 additions
and
0 deletions.
There are no files selected for viewing
146 changes: 146 additions & 0 deletions
146
Android_Development_with_Kotlin/06. Views/06.03 EditText with TextWatcher.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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. | ||
|