Membuat TextWatcher Ip Adress Format

Halo teman-teman semua, pada kesempatan kali ini kita akan membahas mengenai custom view lagi namun lebih ke actionnya. Bagaimana menampilkan format ip Address xxx.xxx.xxx.xxx dengan menggunakan kotlin pada edittext memanfaatkan textwatcher. Kurang lebih tampilannya seperti ini :

Abaikan format IP yang salah itu ya Guys, maklum tak punya gambar yang lain. Kurang lebih seperti itulah, saat user menulis 192 maka yang akan tampil adalah 192. jadi titiknya auto ada karena telah memenuhi syarat dari ip address.

Ini adalah cara bagaimana menerapkannya :

etServerIp.addTextChangedListener(IpAddressTextWatcher(etServerIp))
etServerIp.doOnTextChanged { text, _, _, _ ->
     btnConnect.isEnabled = validate(text.toString())
}

Dari code diatas, teman-teman bisa melihat bahwa kita menambahkan listener watcher pada edittext etServerIp dan value tersebut akan dicek dengan fungsi validate dan akan mengaktifkan button sesuai dengan kembaliannya. Untuk pengecekanya disini kita menggunakan regex :

private val PATTERN = "^([01]?\\d\\d?|2[0-4]\\d|25[0-5])\\." +
            "([01]?\\d\\d?|2[0-4]\\d|25[0-5])\\." +
            "([01]?\\d\\d?|2[0-4]\\d|25[0-5])\\." +
            "([01]?\\d\\d?|2[0-4]\\d|25[0-5])$"

fun validate(ip: String?): Boolean {
    val pattern: Pattern = Pattern.compile(PATTERN)
    val matcher: Matcher = pattern.matcher(ip)
    return matcher.matches()
}

Sedangkan untuk code IpAddressTextWatcher berikut ini :

package com.core.core.component

import android.text.Editable
import android.text.TextWatcher
import android.widget.EditText

class IpAddressTextWatcher(private val editText: EditText) : TextWatcher {
    override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {}

    override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {}

    override fun afterTextChanged(s: Editable?) {
        s?.let {
            val input = it.toString()
            if (input.length <= 14) {
                val formattedIp = formatIpAddress(input)
                if (formattedIp != input) {
                    editText.removeTextChangedListener(this)
                    editText.setText(formattedIp)
                    editText.setSelection(formattedIp.length)
                    editText.addTextChangedListener(this)
                }
            }
        }
    }

    private fun formatIpAddress(input: String): String {
        val regex = Regex("""^(\d{0,3})?\.?(\d{0,3})?\.?(\d{0,3})?\.?(\d{0,3})?$""")
        val matchResult = regex.find(input) ?: return input
        val (part1, part2, part3, part4) = matchResult.destructured
        return buildString {
            appendPart(part1)
            appendPart(part2)
            appendPart(part3)
            appendPart(part4)
        }
    }

    private fun StringBuilder.appendPart(part: String) {
        if (part.isNotEmpty()) {
            if (isNotEmpty()) append('.')
            append(part)
        }
    }
}

dan terakhir ini adalah XML yang digunakan :

<TextView
      android:id="@+id/tv_server_ip"
      style="@style/Satoshi.Regular.NeutralGrey600.12"
      android:layout_width="@dimen/distance_0dp"
      android:layout_height="wrap_content"
      android:layout_marginTop="@dimen/distance_20dp"
      android:text="Server IP address"
      tools:ignore="TextContrastCheck" />

<EditText
      android:id="@+id/et_server_ip"
      style="@style/Satoshi.Regular.NeutralGrey600.14"
      android:inputType="number|numberDecimal"
      android:digits="0123456789."
      android:layout_width="@dimen/distance_0dp"
      android:layout_height="wrap_content"
      android:layout_marginTop="@dimen/distance_4dp"
      android:background="@drawable/bg_rectangle"
      android:drawablePadding="@dimen/distance_8dp"
      android:hint="Ip Address Server"
      android:lines="1"
      android:maxLines="1"
      android:maxLength="15"
      android:paddingHorizontal="@dimen/distance_12dp"
      android:paddingVertical="@dimen/distance_8dp"
      android:textSize="@dimen/_11sp"
      />

Simple ya? Semoga bermanfaat 🙂