Tips n Trik Android Konfirmasi Field

Ketika kita melihat sebuah form, tentunya akan sangat membantu apabila ada sebuah konfirmasi apakah field yang kita isi sudah sesuai atau belum. Salah satunya yang cukup merepotkan untuk diperhatikan adalah ketika pengisian password dan konfirmasi password. 

Pada kesempatan kali ini saya akan berpicara tentang trik sederhana dengan memanfaatkan salah satu listener untuk membuat konfirmasi field pada form android yaitu Text Changed Listener. 

Langsung saja, kita buat sebuah view dengan 2 EditText dan 1 TextView yang kita hide pada awalnya. Berikut adalah code dan tampilan pada handphone : 

<RelativeLayout 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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"
    android:background="#ffffff">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"

        android:orientation="vertical">
        <TextView
            android:id="@+id/titleNewPass"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Compare Password"
            android:textColor="#989898"
            android:textSize="13sp" />

        <EditText
            android:id="@+id/etPassword"
            android:inputType="text"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Password"
            android:padding="10dp"
            android:textColorHint="#cccccc"
            android:layout_marginBottom="10dp"/>
        <!-- this must be textPasswprd but it make us cant see what we type :D -->

        <EditText
            android:id="@+id/etPasswordConfirm"
            android:inputType="text"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Password Confirmation"
            android:padding="10dp"
            android:textColorHint="#cccccc"
            android:layout_marginBottom="10dp"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:textSize="10dp"
            android:text="P a s s w o r d     n o t    m a t c h"
            android:textColor="#C90000"
            android:visibility="invisible"
            android:layout_gravity="right"
            android:id="@+id/PasswordNotMatch" />

        <Button
            android:id="@+id/btnChangePassword"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="4dp"
            android:background="#CCFFFF"
            android:padding="10dp"
            android:text="Change Password"
            />

    </LinearLayout>
</RelativeLayout>

Kemudian pada activity kita, tambahkan listener untuk menangkap perubahan pada EditText tersebut. Listener tersebut kita pasang pengecekan setelah ada perubahan yang terjadi pada EditText password konfirmasi. Apabila isi dari EditText pertama tidak sama dengan EditText ke 2, maka TextView yang tadi kita hide jadi kita munculkan. Apabila ke 2 EditText sama maka, TextView tersebut kita hide kembali. Berikut adalah potongan codenya : 

  private EditText mPassword;
  private EditText mPasswordConfirm;
  private TextView txtConfirmPass;
  private boolean passwordSame = false;
  private Button btnChangePass; 

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mPassword = (EditText) findViewById(R.id.etPassword);
        mPasswordConfirm = (EditText) findViewById(R.id.etPasswordConfirm);
        txtConfirmPass = (TextView) findViewById(R.id.PasswordNotMatch);
        btnChangePass = (Button) findViewById(R.id.btnChangePassword);
        btnChangePass.setOnClickListener(this);
        mPasswordConfirm.addTextChangedListener(
                new TextWatcher() {
                    public void afterTextChanged(Editable s) {
                        String strPass1 = mPassword.getText().toString();
                        String strPass2 = mPasswordConfirm.getText().toString();
                        if (strPass1.equals(strPass2)) {
                            txtConfirmPass.setVisibility(TextView.INVISIBLE);
                            passwordSame = true;
                        } else {
                            txtConfirmPass.setVisibility(TextView.VISIBLE);
                            passwordSame = false;
                        }
                    }

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

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

    }

Hasilnya adalah seperti berikut :

Dengan penggunaan TextChangedListener, kita dapat membuat form lebih user friendly dalam membuat user mengerti syarat- syarat pengisian field dalam form tersebut. 

Sekian dulu dari saya, sampai bertemu di tips dan trik berikutnya. Semoga membantu. :D

Source code :

https://github.com/RennyTanuwijaya/tips-n-trik-android-konfirmasi-field