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([email protected], 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([email protected], R.color.green))
else etInfo.setTextColor(ContextCompat.getColor([email protected], R.color.red))
}
else etInfo.setTextColor(ContextCompat.getColor([email protected], R.color.black))
}
if(rdbCnpj.isChecked) {
if (str.length >= 14) {
if(checkCnpj(str)) etInfo.setTextColor(ContextCompat.getColor([email protected], R.color.green))
else etInfo.setTextColor(ContextCompat.getColor([email protected], R.color.red))
}
else etInfo.setTextColor(ContextCompat.getColor([email protected], 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.
