Belajar Menerapkan Penggunaan TextWatcher EditText android

  • Post
    codeorayo
    Keymaster
    none
    TextWatcher adalah salah satu method interface di library android (android.text.TextWatcher) yang digunakan untuk membaca atau mendeteksi text ,ketika user (pengguna ) menginputkan data pada widget EditText Android. TextWatcher juga memungkinkan Aplikasi, untuk membaca setiap karakter ketika dimasukan atau dinputkan. Contoh penggunaan TextWatcher biasanya diterapkan saat kita Login atau Register di suatu platform Aplikasi. Contoh lainya lagi ketika kalian menginputkan keyword atau kata kunci di Google Search.

    Pada tutorial belajar android kali ini ,kita akan mencoba menerapkan penggunaan dari fungsi TextWatcher ,pada  Aplikasi User Login sederhana yang telah kita buat pada artikel tutorial sebelumnya.

    [img width=320,height=227]https://3.bp.blogspot.com/-JAt1vcqmjrg/WC0Fy2OCcvI/AAAAAAAAGKE/tvqXmq5AelEPkxABz67UtacxfGySP_-zQCLcB/s320/belajar-fungsi-textwatcher-pada-android.png[/img]

    Untuk dapat menggunakan TextWatcher , kalian hanya perlu memanggil addTextChangedListener() pada object di EditText Android. Lalu Menset referensi variable agar dapat digunakan , untuk method override yang tersedia pada method interface TextWatcher.

    Terdapat 3 method override saat kita menset TextWatcher sebagai Listener pada EditText Android. Terdiri dari :

     – beforeTextChanged(CharSequence s, int start, int count, int after) :

      Method ini digunakan untuk awalan suatu text ,akan di baca atau dideteksi oleh TextWatcher.

      – onTextChanged(CharSequence s, int start, int before, int count) 

        Method ini digunakan untuk pemrosesan, suatu text sedang di baca atau dideteksi oleh TextWatcher.

     – afterTextChanged(Editable s) 

      Method ini digunakan untuk akhiran ,ketika text telah berhasil di baca atau dideteksi oleh TextWatcher.

    1. Pertama kalian buka project baru atau ,project yang sudah ada di tutorial sebelumnya (link diatas).

    2. Pada activity_main.xml ,kita akan menambahkan TextView di bawah kolom password. Jadi ketika user (pengguna) menginput password ,maka password tidak akan terlihat. Nah akan terlihat dan ditampilkan fungsi TextWatcher pada TexView ini.

    activity_main.xml


  •         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”

  •         android:layout_margin=”16dp”

  •  

  •         >

  •  

  •  

  •     

  •             android:layout_width=”match_parent”

  •             android:layout_height=”wrap_content”

  •             android:layout_alignParentBottom=”true”

  •             android:background=”#0091EA”

  •             >

  •  

  •         

  •                 android:text=”LOGIN”

  •                 android:textColor=”#FFF”

  •                 android:layout_width=”match_parent”

  •                 android:layout_height=”wrap_content”

  •                 android:layout_alignParentBottom=”true”

  •                 android:layout_centerHorizontal=”true”

  •                 android:background=”?android:attr/selectableItemBackground”

  •                 android:id=”@+id/button2″

  •                 android:onClick=”loginMasuk”

  •                 android:textStyle=”normal|bold”/>

  •  

  •         />

  •  

  •     

  •  

  •     

  •             android:text=”User Login”

  •             android:textColor=”#fff”

  •             android:background=”#0091EA”

  •             android:layout_width=”match_parent”

  •             android:layout_height=”wrap_content”

  •             android:id=”@+id/textView2″

  •             android:textStyle=”normal|bold”

  •             android:textSize=”36sp”

  •             android:textAlignment=”center”

  •             android:layout_alignParentTop=”true”

  •             android:layout_alignParentStart=”true”

  •             android:layout_marginTop=”42dp”/>

  •  

  •     

  •             android:id=”@+id/edittext_password”

  •             android:layout_width=”match_parent”

  •             android:layout_height=”wrap_content”

  •             android:hint=”Password”

  •             android:inputType=”textCapWords|textPassword”

  •             style=”@style/AppTheme”

  •             android:textSize=”30sp”

  •             android:fontFamily=”monospace”

  •             android:layout_centerVertical=”true”

  •             android:layout_alignParentStart=”true”/>

  •  

  •     

  •             android:id=”@+id/edittext_username”

  •             android:layout_width=”match_parent”

  •             android:layout_height=”wrap_content”

  •             android:hint=”Username”

  •             android:inputType=”textCapWords”

  •             android:textSize=”30sp”

  •             android:fontFamily=”monospace”

  •             android:layout_marginTop=”25dp”

  •             android:layout_below=”@+id/textView2″

  •             android:layout_alignParentStart=”true”/>

  •  

  •     

  •             android:layout_width=”wrap_content”

  •             android:layout_height=”wrap_content”

  •             android:layout_below=”@+id/edittext_password”

  •             android:layout_alignParentStart=”true”

  •             android:layout_marginStart=”13dp”

  •             android:layout_marginTop=”24dp”

  •             android:id=”@+id/hintpassword”

  •             android:textSize=”18sp”

  •             tools:text=”Lihat Password”

  •  

  •             />



  • 3. Pada MainActivity.java  kita tinggal memasukan  addTextChangedListener()  lalu referensikan untuk method override TextWatcher.

    MainActivity.java 

  • package com.okedroid.latihan;

  •  

  • import android.content.Intent;

  • import android.os.Bundle;

  • import android.support.v7.app.AppCompatActivity;

  • import android.text.Editable;

  • import android.text.TextWatcher;

  • import android.view.View;

  • import android.widget.EditText;

  • import android.widget.TextView;

  • import android.widget.Toast;

  •  

  • public class MainActivity extends AppCompatActivity {

  •  

  •     EditText editText1, editText2; //Deklarasi object dari class EdiText

  •     String text1, text2; //Deklarasi object string

  •     TextView textView;

  •  

  •     @Override

  •     protected void onCreate(Bundle savedInstanceState) {

  •         super.onCreate(savedInstanceState);

  •         setContentView(R.layout.activity_main);

  •         getSupportActionBar().setTitle(“User Login Sederhana”);

  •         getSupportActionBar().setSubtitle(“okedroid.com”);

  •  

  •  

  •         editText1 = (EditText) findViewById(R.id.edittext_username);

  •         editText2 = (EditText) findViewById(R.id.edittext_password);

  •         textView = (TextView) findViewById(R.id.hintpassword);

  •         textView.setVisibility(View.GONE);

  •         //menset textview dalam keadaan dihilangkan (bukan tidak terlihat seperti (View.INVISIBLE)

  •  

  •         editText2.addTextChangedListener(inputPasswordWatcher);

  •         //memanggil addTextChangelistener dari TextWatcher

  •  

  •     }

  •  

  •     private final TextWatcher inputPasswordWatcher = new TextWatcher() {

  •         @Override

  •         public void beforeTextChanged(CharSequence s, int start, int count, int after) {

  •  

  •             //method ini  wajib ada meskipun disini kosong valuenya

  •         }

  •  

  •         @Override

  •         public void onTextChanged(CharSequence s, int start, int before, int count) {

  •             textView.setVisibility(View.VISIBLE);

  •             //menset textview dalam mode visible terlihat

  •  

  •         }

  •  

  •         @Override

  •         public void afterTextChanged(Editable s) {

  •             if (s.length()== 0){

  •                 textView.setVisibility(View.GONE);

  •                 //jika panjang atau jumlah text dari variable s tidak ada atau 0 maka

  •                 //menset textview dalam keadaan dihilangkan (bukan tidak terlihat seperti (View.INVISIBLE)

  •             }

  •             else {

  •  

  •  

  •                 textView.setText(“Password kalian : “+editText2.getText());

  •                 //atau jika  tidak maka akan terlihat dan menampilkan text password kalian

  •                 //berdasarkan inputan pada object ediText 2 di bagian password

  •  

  •             }

  •  

  •  

  •  

  •         }

  •     };

  •  

  •  

  •     public void loginMasuk(View view) {

  •         //Method onClick pada Button

  •  

  •         text1 = editText1.getText().toString();

  •         text2 = editText2.getText().toString();

  •  

  •         //Kondisi jika username dan password benar maka akan menampilkan pesan text toast

  •         //Login sukses dan masuk ke activity 2

  •         if ((text1.contains(“Username”)) && ((text2.contains(“Password”)))) {

  •             Toast.makeText(this, “Login Sukses”, Toast.LENGTH_SHORT).show();

  •             Intent intent = new Intent(MainActivity.this, SecondActivity.class);

  •             startActivity(intent);

  •         } else if ((text1.matches(“”) || text2.matches(“”)))

  •           /*

  •           Atau jika input text 1 dan text 2 kosong

  •            */ {

  •             //Maka akan menampilkan pesan text toast

  •             Toast.makeText(this, “Isikan Username dan Password”, Toast.LENGTH_SHORT).show();

  •  

  •         } else {

  •             //jika kedua kondisi diatas tidak memenuhi

  •  

  •             Toast.makeText(this, “Login Gagal /Username Password Salah”, Toast.LENGTH_SHORT).show();

  •         }

  •  

  •     }

  •  

  •  

  • }


    4. Silahkan jalankan Aplikasinya , dan kalian bisa lihat hasilnya kira-kira seperti ini:

    [img width=195,height=320]https://3.bp.blogspot.com/-kjzu_EZ2Jg0/WC0MplFAM7I/AAAAAAAAGKQ/zA80R59aUIs2vCj0zYz5SFGmX7aFczCVgCLcB/s320/example-textwatcher-edittext-android.gif[/img]

    Selesai ,silahkan kalian kembangkan sendiri penggunaan TextWatcher in

Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com
  • You must be logged in to reply to this topic.