Membuat event textChanged Listener editText android studio kotlin

Selamat minggu siang teman-teman, kali ini kak mitra akan share cara membuat textView otomatis berubah sesuai dengan ketikan pada editText secara real time.. apabila teman-teman berangkat dari website programmer pasti paham apa yang kak mitra maksudkan kan?, yang biasanya kita ketikkan pada jquery/javascript. misal kita mengetikkan sesuatu pada form nama, naaah tanpa kita menekan tombol klik atau submit, hasil ketikkan tersebut sudah muncul di tempat yang kita inginkan istilah singkatnya bisa menampilkan inputan secara rieal time saat itu juga.

Cara ini sering kita butuhkan pada program-program tertentu, misal saat mengisi form pendaftaran atau regsitrasi, form pembayaran atau payment dan tentu masih banyak lagi.

Mungkin cara kerjanya sedikit sulit dijelaskan via diskirpsi, karena itu kak mitra akan mencoba menjelaskan via gambar agar lebih mudah untuk dimengerti atau dipahami. 

Kak mitra memiliki contoh case seperti berikut ini , coba teman-teman perhatikan gambar di bawah ini, terdapat 2 form input. kita sebut saja (textView nomor 1), dan (editText nomor 2) seperti di bawah ini :

Nah gambar di atas kita memiliki bebrapa komponen,  pada kotak nomor 1, itu adalah textView, dan kotak nomor 2 adalah editText, tentu teman-teman sudah tau bukan.. 

Oke jadi intinya begini. cara kerja dari program yang akan kita buat di atas adalah ketika kita mengetikan apapun (misal nama user atau nama kota) pada editText (kotak nomor 2) maka secara otomatis saat itu juga (real time) akan ditampilkan textView (pada kotak nomor 1) tanpa harus menekan tombol button. sederhana sekali bukan untuk cara kerjanya. heheh sedangkan untuk langkah-langkah membuatnya juga sederhana teman-teman bisa mengikuti langkah di bawah ini 

Tentu teman-teman sudah membuka program android studio teman-teman, kak mitra asumsikan teman-teman sudah melakukan installasi dengan baik, minimal bisa menampilkan hello world. 

- Buat projek baru dengan nama bebas sesuai selera teman-teman

- Tunggu hingga proses graddle selesai sepenuhnya

- Setelah proses graddle benar-benar selesai, hanya ada beberapa file saja yang perlu kita perhatikan yaitu pada layout xml dan file MainActivity.kt

Untuk layut xml coba perhatikan code di bawah ini (bisa dilakukan copy paste saja biar praktis) wkwkw

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="20dp"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/judul"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="TextView"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/editText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:ems="10"
        android:inputType="textPersonName"
        android:text="Name"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/judul" />

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="Button"
        app:layout_constraintTop_toBottomOf="@+id/editText"
        tools:layout_editor_absoluteX="147dp" />


</androidx.constraintlayout.widget.ConstraintLayout>

Sedangkan pada file MainActivity.kt perhatikan code berikut ini 

package com.example.widgetdanevent

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.text.Editable
import android.text.TextWatcher
import android.util.Log
import android.widget.Button
import android.widget.EditText
import android.widget.TextView
import androidx.core.widget.addTextChangedListener

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val btn_click_me = findViewById(R.id.button) as Button
        btn_click_me.setOnClickListener {
            Log.d("logTag","hello tag")
        }

        val editText = findViewById(R.id.editText) as EditText
        editText.setOnClickListener {
            Log.d("logTag","editText click")
        }

        //perhatikan ini
        val judul = findViewById(R.id.judul) as TextView
        editText.addTextChangedListener(object: TextWatcher{

            override fun afterTextChanged(s: Editable) {
                Log.d("logTag","after : "+s)
            }

            override fun beforeTextChanged(s: CharSequence, start: Int,
                                           count: Int, after: Int) {
            }

            override fun onTextChanged(s: CharSequence, start: Int,
                                       before: Int, count: Int) {
                Log.d("logTag","on change : "+s)
                judul.setText(s)
            }

        })
        //.perhatikan ini

    }
}

NB : perhatikan pada tempat yang kak mitra tandai "//perhatikan ini"

Pastikan tidak ada code yang error ya teman-teman, apabila sudah teman-teman bisa mencoba running program. seharusnya sudah berjalan dengan baik. seharusnya program sudah berjalan dengan baik

Untuk Link program teman-teman bisa melihat di github.com/mitraide/onChangeListener

Cara ini sudah berjalan baik untuk kak mitra, teman-teman bisa mencobanya sendiri. sampai jumpa di artikel selanjutnya