Nesse tutorial vamos ver como criar mascara do EditText em Kotlin para que assim o usuário possa ter uma aplicação mais elegante.

Neste tutorial vamos criar um aplicativo que faz a mascara de texto em cpf ou cnpj de acordo com a opção do usuário.

Montando a base da aplicação

Primeiramente vamos criar um projeto vazio(Empty) com o nome de br.com.uware.edittextmask para que possamos criar as mascaras no EditText.

Logo depois de ter criado o projeto vamos deixar certo a base dele editando alguns arquivos como strings.xml e colors.xml.

Vamos então adicionar 3 cores ao nosso arquivo de colors para que possamos fazer a checagem se o número está correto. Então modificar para verde se correto, se incorreto modifica para vermelho.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#6200EE</color>
    <color name="colorPrimaryDark">#3700B3</color>
    <color name="colorAccent">#03DAC5</color>

    <color name="black">#000</color>
    <color name="green">#00AB07</color>
    <color name="red">#FF0000</color>

</resources>

Em nosso arquivo de strings vamos inserir as strings que o aplicativo irá usar para enviar as mensagens necessárias ao usuário.

<resources>
    <string name="app_name">EditTextMask</string>

    <string name="title">Escolha a opção e digite.</string>
    <string name="err_selection">Precisa escolher uma opção.</string>
    <string name="cpf">CPF</string>
    <string name="cnpj">CNPJ</string>
</resources>

Então com a base de nosso projeto pronta vamos começar a fazer as modificações em nossa activity_main.xml para depois fazer o nosso código que irá criar a mascara do EditText.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_margin="16dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/title"
            android:textSize="30dp"
            android:gravity="center"
            android:layout_marginBottom="30dp"/>
        <RadioGroup
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:gravity="center">
            <RadioButton
                android:id="@+id/rdbCpf"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/cpf"
                android:layout_marginEnd="10dp"/>
            <RadioButton
                android:id="@+id/rdbCnpj"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/cnpj" />
        </RadioGroup>
        <EditText
            android:id="@+id/etInfo"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textColor="@color/black"
            android:inputType="number"/>
    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

Como criar mascara do EditText em Kotlin

Agora com os arquivos xml de nosso projeto feitos vamos dar início a parte da programação.

Vamos então modificar o nosso arquivo de MainActivity.kt para que receba o valor digitado no EditText e faça as modificações de acordo com a mascara escolhida.

package br.com.uware.edittextmask

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.text.Editable
import android.text.TextWatcher
import android.widget.Toast
import androidx.core.content.ContextCompat
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        etInfo.addTextChangedListener(object : TextWatcher {
            var isUpdating: Boolean = false
            override fun afterTextChanged(s: Editable) {
            }
            override fun beforeTextChanged(s: CharSequence, start: Int, count: Int, after: Int) {
            }
            override fun onTextChanged(s: CharSequence, start: Int, before: Int, count: Int) {
                // Variáveis de strings
                val str = unmask(s.toString())
                var mascara = ""
                var mask = ""

                // Setando a mascara
                if(rdbCpf.isChecked) mask = "###.###.###-##"
                else if(rdbCnpj.isChecked) mask = "##.###.###/####-##"
                else {
                    mask = ""
                    Toast.makeText(this@MainActivity, R.string.err_selection, Toast.LENGTH_SHORT).show()
                }

                // Checa se está sendo feito update, para não entrar em loop infinito
                if (isUpdating) {
                    isUpdating = false
                    return
                }

                // Checa mascara e cria string com base na mascara
                var i = 0
                for (m in mask.toCharArray()) {
                    if (m != '#' && count > before) {
                        mascara += m
                        continue
                    }
                    try {
                        mascara += str[i]
                    } catch (e: Exception) {
                        break
                    }
                    i++
                }

                // Faz o update da string no EditText e verifica se está completa, colorindo se válido ou não
                isUpdating = true
                etInfo.setText(mascara)
                etInfo.setSelection(mascara.length)
                if(rdbCpf.isChecked) {
                    if (str.length >= 11) {
                        if(checkCpf(str)) etInfo.setTextColor(ContextCompat.getColor(this@MainActivity, R.color.green))
                        else etInfo.setTextColor(ContextCompat.getColor(this@MainActivity, R.color.red))
                    }
                    else etInfo.setTextColor(ContextCompat.getColor(this@MainActivity, R.color.black))
                }
                if(rdbCnpj.isChecked) {
                    if (str.length >= 14) {
                        if(checkCnpj(str)) etInfo.setTextColor(ContextCompat.getColor(this@MainActivity, R.color.green))
                        else etInfo.setTextColor(ContextCompat.getColor(this@MainActivity, R.color.red))
                    }
                    else etInfo.setTextColor(ContextCompat.getColor(this@MainActivity, R.color.black))
                }
            }

        })
    }
    // Função que retira a mascara para checar
    fun unmask(s: String): String {
        return s.replace("-", "").replace("/","").replace(".", "")
    }
    // Função que checa validade de CPF
    fun checkCpf(str: String): Boolean{
        var calc: Int
        var num = 10
        var sum = 0
        for(x in 0..8) {
            calc = str[x].toString().toInt() * num
            sum += calc
            --num
        }
        var rest = sum % 11
        var test = 11 - rest
        if(test > 9) test = 0
        if(test != str[9].toString().toInt()) return false
        num = 11
        sum = 0
        for(x in 0..9) {
            calc = str[x].toString().toInt() * num
            sum += calc
            --num
        }
        rest = sum % 11
        test = 11 - rest
        if(test > 9) test = 0
        if(test != str[10].toString().toInt()) return false
        return true
    }
    // Função que checa validade de CNPJ
    fun checkCnpj(str: String): Boolean{
        var calc: Int
        var num = 5
        var sum = 0
        for(x in 0..11) {
            calc = str[x].toString().toInt() * num
            sum += calc
            --num
            if(num == 1) num = 9
        }
        var rest = sum % 11
        var test = 11 - rest
        if(test < 2) test = 0
        if(test != str[12].toString().toInt()) return false
        num = 6
        sum = 0
        for(x in 0..12) {
            calc = str[x].toString().toInt() * num
            sum += calc
            --num
            if(num == 1) num = 9
        }
        rest = sum % 11
        test = 11 - rest
        if(test < 2) test = 0
        if(test != str[13].toString().toInt()) return false
        return true
    }
}

Podemos ver que em nosso arquivo contém função que retira a mascara e duas funções para checar a validade do CPF/CNPJ.

E também contém uma função de addTextChangedListener que irá checar a mudança em nosso EditText fazendo as modificações necessárias na string para inserir a mascara e quando tiver completa irá checar sua validade.

Enfim espero poder ter ajudado com mais este tutorial sobre como criar mascara do EditText em Kotlin.

Se tiver alguma dúvida a mais de uma olhada no site Android Developer.