Lesson 4: RadioGroup and RadioButton Controls with example

Hello viewer, You can now have our Tutorial Lessons in your android mobile device and read it offline.
Download kotlin Programming APP on PlayStore
Download Website SEO Lessons APP on PlayStore

The goal of this concept is to practice implementing a program that requires RadioButton type controls to select an activity. We will learn how to group a set of RadioButton and verify which one is selected.

Create a project called Project003.

Problem:

Load two numbers into EditText type controls. Show messages requesting the loading of values within the same EditText (hint property). Have two RadioButton controls to select if we want to add or subtract those values. Finally, by means of a Button-type control, we perform the respective operation. We show the result in a TextView.

The problem is similar to the previous one. We have two EditText (Number) controls and configure their id and hint properties. To arrange the RadioButton type controls we must first insert a RadioGroup type control (this control is in the component palette on the Containers tab of the “Palette”):

Lesson 4: RadioGroup and RadioButton Controls with example - Lesson 4: RadioGroup and RadioButton Controls with example - Lesson 4: RadioGroup and RadioButton Controls with example -

After dragging the RadioGroup control we start the layout_width and layout_height properties with the value “match_parent”. We also define its id with the value group1.

Now we must drag two controls of the RadioButton class from the “Widgets” tab within the RadioGroup

Lesson 4: RadioGroup and RadioButton Controls with example - Lesson 4: RadioGroup and RadioButton Controls with example - Lesson 4: RadioGroup and RadioButton Controls with example -

Our problem only requires two RadioButton controls.

Another very important thing is to select the RadioGroup control again and change the layout_height property to the wrap_parent value (so that the RadioGroup control only occupies the space of the two RadioButton controls):

Lesson 4: RadioGroup and RadioButton Controls with example - Lesson 4: RadioGroup and RadioButton Controls with example - Lesson 4: RadioGroup and RadioButton Controls with example -

Now to the two controls of type RadioButton we define their id (we will call them r1 and r2 respectively)
We change their properties text by the texts “to add” and “to subtract”.

Do not forget to also change the id of the EditText controls by et1 and et2 (same as in the previous problem).

Finally, we add a button and a TextView to show the result We
initialize the properties of the button with the values:

  id: button
  text: operate

And the TextView with values:

  id: tv1
  text: result

We can control in the “Component Tree” window the defined id for each control (et1, et2, group1, r1, r2, tv1).
We can also observe which class is each visual control and the text text property for those controls that have sense its initialization.
Lesson 4: RadioGroup and RadioButton Controls with example - Lesson 4: RadioGroup and RadioButton Controls with example - Lesson 4: RadioGroup and RadioButton Controls with example -

We must solve the problem of Constraints by pressing the “Infer Constraints” icon:

Lesson 4: RadioGroup and RadioButton Controls with example - Lesson 4: RadioGroup and RadioButton Controls with example - Lesson 4: RadioGroup and RadioButton Controls with example -

The source code of the MaintActivity.kt class is:

package com.coding180.project001


import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.TextView
import android.widget.RadioButton
class MainActivity: AppCompatActivity () {

    override fun onCreate (savedInstanceState: Bundle?) {
        super.onCreate (savedInstanceState)
        setContentView (R.layout.activity_main)
// coding180.com
        var et1 = findViewById (R.id.et1) as EditText
        var et2 = findViewById (R.id.et2) as EditText
        var r1 = findViewById (R.id.r1) as RadioButton
        var r2 = findViewById (R.id.r2) as RadioButton
        var tv1 = findViewById (R.id.tv1) as TextView
        var b1 = findViewById (R.id.button) as Button
        b1.setOnClickListener {
            if (r1.isChecked)
            tv1.text = "Result: ${et1.text.toString () .toInt () + et2.text.toString () .toInt ()}"
            if (r2.isChecked)
            tv1.text = "Result: ${et1.text.toString () .toInt () - et2.text.toString () .toInt ()}"
        }
    }
}

We get the reference of the 2 EditText, 2 RadioButton, 1 TextView and the Button:

        var et1 = findViewById (R.id.et1) as EditText
        var et2 = findViewById (R.id.et2) as EditText
        var r1 = findViewById (R.id.r1) as RadioButton
        var r2 = findViewById (R.id.r2) as RadioButton
        var tv1 = findViewById (R.id.tv1) as TextView
        var b1 = findViewById (R.id.button) as Button

We pass a lambda to the setOnClickListener method of the button, where we check which of the two RadioButton is selected:

        b1.setOnClickListener {
            if (r1.isChecked)
                tv1.text = "Result: $ {et1.text.toString () .toInt () + et2.text.toString () .toInt ()}"
            if (r2.isChecked)
                tv1.text = "Result: $ {et1.text.toString () .toInt () - et2.text.toString () .toInt ()}"
        }

The isChecked method returns true if the RadioButton is selected.

Lesson 4: RadioGroup and RadioButton Controls with example - Lesson 4: RadioGroup and RadioButton Controls with example - Lesson 4: RadioGroup and RadioButton Controls with example -

 

About The Author

Related posts

Leave a Reply