Android Dialog with Radio Group and List example

In this example we will be creating a Dialog box for displaying, with some items in List for the user to choose from. The items will be add in a Radio group feature in Android.

We can use this Dialog for what ever reason we like, for example, selecting country from a list, creating dynamic list populated from some Restful API Service, collecting and displaying some personal or user information and much more.

For this example we will be using the Dialog, Radio Group, and List.

 

1 2

NOTE: We are going to use ButterKnife Library also for binding the Views from the XML, like buttons, text views, edit text etc.
ButterKnife by Jake Wharton Library with examples

First make new project in Android Studio, than create the layout for the HomeActivity named activity_home.xml

The MainActivity layout simple background image, button for showing the dialog, text view for displaying results and a text view for creator

Than we need the layout for the dialog named dialog_layout.xml:

This is separate layout xml file for creating the UI for the Dialog where we have title, simple buttons, and Radio Group widget nested in Scroll View for scrolling if there are more items that the Dialog can display.

Next we create custom_radio_button.xml as item that we going to use for our list:

Now we declare our string.xml resources.
NOTE: It is a good practice to add strings in string.xml resources for usage. Never use hardcoded strings, except when you absolutely need to do.

For populating the List we use string-array.xml resource. We can use anything for the list, hardcoded list method for populating, using API response or whatever you like.

The last, but not least, here are the color.xml resource:

Now, lets dissect the MainActivity.class
First we bind our views with ButterKnife with our previously created layouts:

And then the overridden onCreate method:

The magic happens in our radioButtonDialogWithList() method witch we will call it from the button click:

We declare and initialize Dialog object in our method as final so we can use it in the onClickListeners for the buttons. We are calling Window.FEATURE_NO_TITLE on the dialog because we are using our own dialog title, not from the Dialog object. Finally with setContentView() we add our previously created layout for the dialog.

The buttons and title must be instantiated using findViewById and binding them with correct views. After that we set text for our title in the dialog which we are getting as a parameter in our method.
We must declare and initialize RadioGroup object for using, and use the String array, that is a parameter in the method and adding the items to our RadioGroup object that is final, so we can use it in our onClickListeners.
After we create one control flow statement if, for displaying selected/clicked item in the list for the circle to be filled.

After that we use our OK and CANCEL buttons so we can call on them onClickListeners.
ok.onCLickListener gets the selected item from the list in the radio group and displays it on the info text field.
cancel.onClickListeners just dismisses the dialog.
In both cases we must .dismiss() the dialog because it will be on the screen all the time in this activity.
The last thing in this dialog that we create is the .show method for displaying the dialog layout. Without this the dialog would not been shown.

And our custom dialog method is called when the button for the dialog to be shown is pressed. Here we add to the method our application name as a title, and the previously created string-array.
NOTE: @OnClick annotation is from the ButterKnife library

Spread the love

Leave a Reply

Your email address will not be published.