Belajar Menerapkan Penggunaan TextWatcher EditText android

CODEORAYO COMMUNITY Programming Tutorial Mobile Development 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


    1.         xmlns:android=”http://schemas.android.com/apk/res/android

    2.  

    3.         xmlns:tools=”http://schemas.android.com/tools

    4.         android:layout_width=”match_parent”

    5.         android:layout_height=”match_parent”

    6.         android:layout_margin=”16dp”

    7.  

    8.         >

    9.  

    10.  

    11.     

    12.             android:layout_width=”match_parent”

    13.             android:layout_height=”wrap_content”

    14.             android:layout_alignParentBottom=”true”

    15.             android:background=”#0091EA”

    16.             >

    17.  

    18.         

    19.                 android:text=”LOGIN”

    20.                 android:textColor=”#FFF”

    21.                 android:layout_width=”match_parent”

    22.                 android:layout_height=”wrap_content”

    23.                 android:layout_alignParentBottom=”true”

    24.                 android:layout_centerHorizontal=”true”

    25.                 android:background=”?android:attr/selectableItemBackground”

    26.                 android:id=”@+id/button2″

    27.                 android:onClick=”loginMasuk”

    28.                 android:textStyle=”normal|bold”/>

    29.  

    30.         />

    31.  

    32.     

    33.  

    34.     

    35.             android:text=”User Login”

    36.             android:textColor=”#fff”

    37.             android:background=”#0091EA”

    38.             android:layout_width=”match_parent”

    39.             android:layout_height=”wrap_content”

    40.             android:id=”@+id/textView2″

    41.             android:textStyle=”normal|bold”

    42.             android:textSize=”36sp”

    43.             android:textAlignment=”center”

    44.             android:layout_alignParentTop=”true”

    45.             android:layout_alignParentStart=”true”

    46.             android:layout_marginTop=”42dp”/>

    47.  

    48.     

    49.             android:id=”@+id/edittext_password”

    50.             android:layout_width=”match_parent”

    51.             android:layout_height=”wrap_content”

    52.             android:hint=”Password”

    53.             android:inputType=”textCapWords|textPassword”

    54.             style=”@style/AppTheme”

    55.             android:textSize=”30sp”

    56.             android:fontFamily=”monospace”

    57.             android:layout_centerVertical=”true”

    58.             android:layout_alignParentStart=”true”/>

    59.  

    60.     

    61.             android:id=”@+id/edittext_username”

    62.             android:layout_width=”match_parent”

    63.             android:layout_height=”wrap_content”

    64.             android:hint=”Username”

    65.             android:inputType=”textCapWords”

    66.             android:textSize=”30sp”

    67.             android:fontFamily=”monospace”

    68.             android:layout_marginTop=”25dp”

    69.             android:layout_below=”@+id/textView2″

    70.             android:layout_alignParentStart=”true”/>

    71.  

    72.     

    73.             android:layout_width=”wrap_content”

    74.             android:layout_height=”wrap_content”

    75.             android:layout_below=”@+id/edittext_password”

    76.             android:layout_alignParentStart=”true”

    77.             android:layout_marginStart=”13dp”

    78.             android:layout_marginTop=”24dp”

    79.             android:id=”@+id/hintpassword”

    80.             android:textSize=”18sp”

    81.             tools:text=”Lihat Password”

    82.  

    83.             />



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

      MainActivity.java 

      1. package com.okedroid.latihan;

      2.  

      3. import android.content.Intent;

      4. import android.os.Bundle;

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

      6. import android.text.Editable;

      7. import android.text.TextWatcher;

      8. import android.view.View;

      9. import android.widget.EditText;

      10. import android.widget.TextView;

      11. import android.widget.Toast;

      12.  

      13. public class MainActivity extends AppCompatActivity {

      14.  

      15.     EditText editText1, editText2; //Deklarasi object dari class EdiText

      16.     String text1, text2; //Deklarasi object string

      17.     TextView textView;

      18.  

      19.     @Override

      20.     protected void onCreate(Bundle savedInstanceState) {

      21.         super.onCreate(savedInstanceState);

      22.         setContentView(R.layout.activity_main);

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

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

      25.  

      26.  

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

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

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

      30.         textView.setVisibility(View.GONE);

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

      32.  

      33.         editText2.addTextChangedListener(inputPasswordWatcher);

      34.         //memanggil addTextChangelistener dari TextWatcher

      35.  

      36.     }

      37.  

      38.     private final TextWatcher inputPasswordWatcher = new TextWatcher() {

      39.         @Override

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

      41.  

      42.             //method ini  wajib ada meskipun disini kosong valuenya

      43.         }

      44.  

      45.         @Override

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

      47.             textView.setVisibility(View.VISIBLE);

      48.             //menset textview dalam mode visible terlihat

      49.  

      50.         }

      51.  

      52.         @Override

      53.         public void afterTextChanged(Editable s) {

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

      55.                 textView.setVisibility(View.GONE);

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

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

      58.             }

      59.             else {

      60.  

      61.  

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

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

      64.                 //berdasarkan inputan pada object ediText 2 di bagian password

      65.  

      66.             }

      67.  

      68.  

      69.  

      70.         }

      71.     };

      72.  

      73.  

      74.     public void loginMasuk(View view) {

      75.         //Method onClick pada Button

      76.  

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

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

      79.  

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

      81.         //Login sukses dan masuk ke activity 2

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

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

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

      85.             startActivity(intent);

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

      87.           /*

      88.           Atau jika input text 1 dan text 2 kosong

      89.            */ {

      90.             //Maka akan menampilkan pesan text toast

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

      92.  

      93.         } else {

      94.             //jika kedua kondisi diatas tidak memenuhi

      95.  

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

      97.         }

      98.  

      99.     }

      100.  

      101.  

      102. }


        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

      • You must be logged in to reply to this topic.