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.
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@mipmap/bg_radio" tools:context="com.xtrid.dialogwithradiogroupandlist.HomeActivity"> <Button android:id="@+id/button" android:layout_width="250dp" android:layout_height="70dp" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android:layout_marginTop="36dp" android:background="@android:drawable/dialog_holo_light_frame" android:elevation="0dp" android:padding="15dp" android:text="@string/title" /> <TextView android:id="@+id/infoText" android:layout_width="250dp" android:layout_height="70dp" android:layout_alignStart="@+id/button" android:layout_below="@+id/button" android:autoSizeTextType="uniform" android:background="@android:drawable/dialog_holo_light_frame" android:backgroundTint="@color/colorBrown" android:gravity="center" android:padding="15dp" android:text="@string/chosen_item" android:textColor="@color/colorWhite" tools:ignore="UnusedAttribute" /> <TextView android:id="@+id/createdBy" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginBottom="10dp" android:text="@string/created_by" /> </RelativeLayout> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="200dp"> <TextView android:id="@+id/title" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/colorDarkBrown" android:gravity="center" android:paddingBottom="10dp" android:paddingTop="10dp" android:textColor="@color/colorWhite" android:textSize="16sp" /> <LinearLayout android:id="@+id/bottomLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:background="@color/colorBrown" android:orientation="horizontal" android:padding="10dp" android:weightSum="2"> <TextView android:id="@+id/cancel" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="@string/cancel" android:textAllCaps="true" android:textColor="@color/colorWhite" android:textSize="16sp" /> <TextView android:id="@+id/ok" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="end" android:text="@string/ok" android:textColor="@color/colorWhite" android:textSize="16sp" /> </LinearLayout> <ScrollView android:layout_width="match_parent" android:layout_height="match_parent" android:layout_above="@id/bottomLayout" android:layout_below="@id/title" android:layout_centerInParent="true"> <RadioGroup android:id="@+id/radioGroup" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/colorBeige" android:padding="10dp" /> </ScrollView> </RelativeLayout> |
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:
1 2 3 4 5 6 7 8 |
<?xml version="1.0" encoding="utf-8"?> <RadioButton xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:buttonTint="@color/colorPrimary" android:text=""> <!-- leave empty --> </RadioButton> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 |
<resources> <!-- Home Activity --> <string name="app_name">Dialog with RadioGroup and List</string> <string name="chosen_item">Chosen item from the Dialog should appear here</string> <string name="created_by">Created by Viktor Jovanovski</string> <string name="selected">%1$s selected</string> <!-- Dialog --> <string name="cancel">Cancel</string> <string name="ok">OK</string> <string name="title">Dialog with RadioGroup and List of items</string> </resources> |
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.
1 2 3 4 5 6 7 8 9 10 |
<?xml version="1.0" encoding="utf-8"?> <resources> <string-array name="example_items"> <item>Item one</item> <item>Item two</item> <item>Item three</item> <item>Item four</item> <item>Item five</item> </string-array> </resources> |
The last, but not least, here are the color.xml resource:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?xml version="1.0" encoding="utf-8"?> <resources> <color name="colorPrimary">#795548</color> <color name="colorPrimaryDark">#2b1d12</color> <color name="colorBlack">#000000</color> <color name="colorPrimaryLight">#484848</color> <color name="colorAccent">#ffffff</color> <color name="colorWhite">#ffffff</color> <color name="colorDarkGray">#303030</color> <color name="colorLightGray">#595959</color> <color name="colorBrown">#342316</color> <color name="colorDarkBrown">#2b1d12</color> <color name="colorBeige">#604128</color> </resources> |
Now, lets dissect the MainActivity.class
First we bind our views with ButterKnife with our previously created layouts:
1 2 3 |
@BindView(R.id.infoText) TextView info; public int selectedResolutionPosition = -1; |
And then the overridden onCreate method:
1 2 3 4 5 6 |
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_home); ButterKnife.bind(this); } |
The magic happens in our radioButtonDialogWithList() method witch we will call it from the button click:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
private void radioButtonDialogWithList(String dialogTitle, final String[] array) { final Dialog dialog = new Dialog(this); dialog.requestWindowFeature(Window.FEATURE_NO_TITLE); dialog.setContentView(R.layout.dialog_layout); TextView title = dialog.findViewById(R.id.title); TextView ok = dialog.findViewById(R.id.ok); TextView cancel = dialog.findViewById(R.id.cancel); title.setText(dialogTitle); final RadioGroup radioGroup = dialog.findViewById(R.id.radioGroup); for (String item : array) { RadioButton radioButton = new RadioButton(this); radioButton.setHighlightColor(getResources().getColor(R.color.colorBlack)); radioButton.setText(item); radioButton.setTextColor(Color.WHITE); radioGroup.addView(radioButton); } if (selectedResolutionPosition != -1 && array.length > selectedResolutionPosition) { RadioButton selectedRadioButton = (RadioButton) radioGroup.getChildAt(selectedResolutionPosition); selectedRadioButton.setChecked(true); } ok.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { int radioButtonID = radioGroup.getCheckedRadioButtonId(); if (radioButtonID != -1) { View radioButton = radioGroup.findViewById(radioButtonID); int index = radioGroup.indexOfChild(radioButton); info.setText(getString(R.string.selected, array[index])); selectedResolutionPosition = index; } dialog.dismiss(); } }); cancel.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { dialog.dismiss(); } }); dialog.show(); } |
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.
1 2 3 |
@OnClick(R.id.button) public void onButtonClick() { radioButtonDialogWithList(getString(R.string.app_name), getResources().getStringArray(R.array.example_items)); |
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