Realtime Editing Price Format

Ketika memasukkan angka 0–9 untuk sebuah harga pastilah kita lebih menyukai jika terdapat pemisah antar ribuan.

Pemasukkan input 9000000000 dengan tampilan demikian mungkin terasa suling untuk menyebutkan terbilang angka tersebut dibandingkan input tersebut dengan tampilan 9.000.000.000. Menjadi lebih gampang dibaca bukan?

Disini saya melakukan implementasi untuk memberikan masukan angka yang besar menjadi terdapat pemisah secara realtime. Artinya terdapat transisi sebagai berikut:

input 1 → tampilan: “Rp1”

input 2→ tampilan: “Rp12”

input 3→ tampilan: “Rp123”

input 4→ tampilan: “Rp1.234”

input 5→ tampilan: “Rp12.345”

input 6→ tampilan: “Rp123.456”

input 7→ tampilan: “Rp1.234.567”

input 8→ tampilan: “Rp12.345.678”

input 9→ tampilan: “Rp123.456.789”

input 0→ tampilan: “Rp1.234.567.890”

dst…

Hal tersebut dapat dilakukan dengan memberikan TextWatcher onTextChangedListener() pada EditText yang bertujuan untuk pengisian input harga

editText.addTextChangedListener(onTextChangedListener());

Dengan alasan kode blok pada medium kurang bagus saya hanya lampirkan sekilas kode, untuk lebih jelas silahkan lihat link berikut ini: Line487

Implementasi onTextChangedListener() metode afterTextChanged(Editable s)

price.removeTextChangedListener(this);
try {
    String rp = getResources().getString(R.string.rp_string);
    String originalString = s.toString();
    originalString = originalString.replaceAll("\\.", "").replaceFirst(",",".");
    originalString = originalString.replaceAll("[A-Z]", "").replaceAll("[a-z]","");
    Double doubleval = Double.parseDouble(originalString);
    DecimalFormatSymbols symbols = new DecimalFormatSymbols();
    symbols.setDecimalSeparator(',');
    symbols.setGroupingSeparator('.');
    String pattern = "#,###.##";
    DecimalFormat formatter = new DecimalFormat(pattern, symbols);
    String formattedString = rp + formatter.format(doubleval);
    price.setText(formattedString);
    price.setSelection(price.getText().length());
} catch (NumberFormatException nfe) {
    nfe.printStackTrace();
}
price.addTextChangedListener(this);

Jika dilihat terdapat “price.removeTextChangedListener(this);” diawal dan “price.addTextChangedListener(this);” diakhir. Mungkin ada pertanyaan mengapa di “remove” lalu di “add” lagi?

Saya mencoba untuk menghapusnya namun yang terjadi adalah error. Ternyata jika bagian tersebut dihapus artinya ketika kamu memasukkan input “1” terjadi perubahan pada EditText sehingga kode “afterTextChanged” dijalankan. Namun, kode tersebut melakukan perubahan juga pada EditText tersebut yang menyebabkan kode “afterTextChanged”dijalankan lagi, lagi, dan lagi (infinite loop). Sehingga dengan melakukan “remove” dan “add” pada Listener mencegah infinite loop tersebut.

Sebenarnya konvensi umum pemisah adalah “,” bukan “.” dikarenakan dalam Java “.” menyatakan desimal. Sehingga jika dilihat potongan kode diatas saya melakukan pengubahan konvensi tersebut menjadi “.” menyatakan pemisah dan “,” menyatakan desimal

DecimalFormatSymbols symbols = new DecimalFormatSymbols();
symbols.setDecimalSeparator(',');
symbols.setGroupingSeparator('.');

Sekian yang dapat saya share tentang peningkatan UI/UX dalam penginputan harga ini.

Reference: devexchanges