Aprenda a usar RadioButton e RadioGroup no Android (Kotlin)

RadioButton e RadioGroup

Sabe aquelas caixas de seleção em formato de círculo que geralmente só da pra escolher uma por vez?

Então, essas caixinhas ovais são conhecidas como RadioButton.

E um RadioGroup nada mais é do que um elemento agrupador de RadioButton que impede que o usuário selecione múltiplos RadioButton de uma única vez.

É como se o RadioGroup dissesse assim: "Olha usuário, aqui dentro você possuí 3 caixinhas selecionáveis, mas você só pode escolher uma".

É importante ressaltar que diferente dos elementos Checkbox ou SwitchCompact que vimos em conteúdos anteriores, depois que marcamos um RadioButton não conseguimos mais desmarca-lo.

Declarando um RadioGroup

Para declarar este elemento basta usar a tag <RadioButton>:

<RadioButton
android:id="+@id/radio_opcao_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text="Opção 1" />

Se você duplicar esse elemento mais de uma vez, verá que ambos os RadioButtons poderão ser selecionados de uma única vez.

Em casos assim, quando você tem múltiplos RadioButtons e deseja que só um deles seja selecionado por vez, você precisa fazer o uso do RadioGroup.

Declarando um RadioGroup

O RadioGroup é um elemento encapsulador de RadioButtons, e garante que um único RadioButton existente dentro dele seja selecionado.

Para declarar esse elemento nós usamos a tag <RadioGroup>:

<RadioGroup
android:layout_width="wrap_content"
android:layout_height="wrap_content">

<RadioButton
android:id="@+id/radio_opcao_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Opção 1" />

<RadioButton
android:id="@+id/radio_opcao_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Opção 2" />

</RadioGroup>

Se você testar o código acima verá que se você marcar a opção 1, a opção 2 será desmarcada, e vice versa.

Somente com o uso do RadioGroup, nós não precisamos criar nenhum código, pois o próprio Android foi capaz de gerenciar isso pra gente.

Interagindo com o RadioButton via código

Por meio do código, nós conseguimos trabalhar com um RadioButton da seguinte forma:

val radioButton = findViewById<View>(R.id.radio_opcao_1) as RadioButton//Seleciona o elemento RadioButton pelo seu ID

Log.d("RadioButton", "${radioButton.isChecked}")//Usado para verificar se o RadioButton esta selecionado ou não (true / false)

radioButton.isChecked = true//Usado para selecionar esse RadioButton

Eventos no RadioButton

Quando trabalhamos com o RadioButton conseguimos escutar os eventos que o usuário realiza nele, como o simples fato de clicar dentro dele.

Para escutar os eventos, você precisa dizer ao RadioButton que a classe atual se responsabiliza por responder e captar os eventos:

val radioButton = findViewById<View>(R.id.radio_opcao_1) as RadioButton//Seleciona o elemento RadioButton pelo seu ID

radioButton.setOnCheckedChangeListener(this)//Diz ao RadioButton que a classe responsável por responder aos seus eventos é esta

Em seguida basta fazer a implementação da classe do CompoundButton na sua Activity da seguinte forma:

class MainActivity : AppCompatActivity(), CompoundButton.OnCheckedChangeListener {
...
}

E é claro, implementar os seus métodos obrigatórios:

override fun onCheckedChanged(button: CompoundButton?, isChecked: Boolean) {
TODO("Not yet implemented")
}

onCheckedChange: Método só é chamado quando o usuário interage com o RadioButton. 

É retornado dois parâmetros, o button que é a instância do objeto que foi clicado, e o isChecked que retorna um valor booleano, informando se o RadioButton está marcado (true) ou desmarcado (false).

Conflito com RadioButton

Se você já passou pelo artigo que fala sobre SwitchCompact ou Checkbox, você deve ter visto que tanto o elemento RadioButton quanto os elementos SwitchCompact e Checkbox, compartilham de um mesmo método de evento, o onCheckedChange.

Pode acontecer de você implementar tanto um Switch quanto um Checkbox ou quem sabe um RadioButton na mesma tela, ocasionando a mesma chamada de função.

Para diferenciar e saber quando o usuário clicou em um dos três, você pode diferencia-los por meio do parâmetro button da seguinte forma:

override fun onCheckedChanged(button: CompoundButton?, isChecked: Boolean) {
when(button.id){
R.id.checkbox_on_off -> {
//O que fazer quando o button for o checkbox
}
R.id.switch_on_off -> {
//O que fazer quando o button for um Switch
}
R.id.radio_opcao_1 -> {
//O que fazer quando o button for a Opção 1 do RadioButton
}
}
}

Caso existir mais de um RadioButton, basta separa-los por ID e identifica-los como estamos fazendo no código acima.

Conclusão

Neste conteúdo você aprendeu sobre o uso dos RadioButtons em conjunto com o RadioGroup.

Até o próximo conteúdo.