Android Jetpack Compose UI Part-2

Abhishek Srivastava
3 min readOct 26, 2022

--

In last part we have discussed about jetpack compose ui project setup and some basic component’s like Text, Button, Row, Column, Image and Card View. For part-1 you can go to click on here.

Now in part-2 we will discuss on more components likes:-

  1. Radio Button
  2. Radio Button Group
  3. Check Box
  4. Number Slider

Now let’s start discuss about each components one by one.

1. Radio Group

Lets start with radio group. Here RadioGroupFactory is the main entry point method for Create radio group. Here we have taken a Field object which has taken no’s of elements as we required and behalf of that we will render Radio button group. For Create Radio Group we have taken Row Composed for Radio group and Radio button Factory for Radio button. For Radio button factory we will discuss in point 2. And for handle single selection on Radio group we have used MutableStateOf Object.

The use of MutableState class is to store single value whose reads and writes are observed by Composed.

2. Radio Button

Now discuss about Radio button. In below method we have received 3 Object. First parameter is item which is name of the Radio button. Second parameter is selected which is actually value of selected radio Button to handle Single selection on radio group. And third parameter is setSelected which is MutableStateOf to handle option selection. With Radio button we have used Text compose ui which basically writes the name of radio group like in previous screenshot Option 1 .

3. Check Box

Now discuss about Check box. To create it we need a Row compose ui to display check box option and Text for their text.

After run above code. It will show a ui on screen like below screenshot.

4. Number Slider

Now discuss about slider, Which is basically change value as much we slide increase or decrease. Here the default value is 0f which is stored under MutableStateOf object. And text object which will display the all updated value as slider scrolled and Slider object will display slider. Where value property managed the value of slider and onValueChange manage the slide event as its scrolled.

After run above code it will display and work as below videos.

In Next part we will discuss more components on composed Ui like App Bar, Drawer, Snake bar etc.

Thanks for reading.

--

--

Abhishek Srivastava

Senior Software Engineer | Android | Java | Kotlin | Xamarin Native Android | Flutter | Go