Pocket Science Lab

This blog covers the topic of how to create custom dialog boxes in an Android app by taking an example of how it was implemented in PSLab Android application. The custom dialog box that will be illustrated in this blog will have a layout similar to that from my PR feat: added a guide for Logic Analyzer Instrument using Alert Dialog Box in PSLab Android repository. But all the main functionalities that can be added to a custom dialog will be illustrated in this blog. How custom dialog was implemented in the PSLab app? The first step is to make a layout for the custom dialog box. The layout of custom dialog should be such that it shouldn’t occupy the whole screen as the idea here is to overlay the dialog over the activity and not replace the whole activity with the dialog layout. The layout can be implemented by using the following attributes : <?xml version="1.0" encoding="utf-8"?> <ScrollView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:id="@+id/custom_dialog_text" android:layout_width="match_parent" android:layout_height="wrap_content"/> <ImageView android:id="@+id/custom_dialog_schematic" android:layout_width="wrap_content" android:layout_height="@dimen/schematic_height" /> <TextView android:id="@+id/description_text" android:layout_width="match_parent" android:layout_height="wrap_content" /> <CheckBox android:id="@+id/toggle_show_again" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/toggle_show_again"> <Button android:id="@+id/dismiss_button" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </RelativeLayout> </RelativeLayout> </ScrollView> The result of the above layout after adding proper margins and padding is as shown in figure 1. Figure 1. The output of the layout made for custom dialog Now as the layout is ready, we can focus on adding Java code to inflate the layout over a particular activity. Make a function in the activity or the fragment in which the custom dialog is to be inflated. Add the following code (if the layout is same as that in PSLab app else modify the code as per the layout) in the function to display the custom dialog box. public void howToConnectDialog(String title, String intro, int iconID, String desc) { try { final AlertDialog.Builder builder = new AlertDialog.Builder(getContext()); LayoutInflater inflater = getLayoutInflater(); View dialogView = inflater.inflate(R.layout.custom_dialog_box, null); // Find and set all the attributes used in the layout and then create the dialog as shown builder.setView(dialogView); builder.setTitle(title); final AlertDialog dialog = builder.create(); ok_button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { dialog.dismiss(); } }); dialog.show(); } catch (Exception e) { e.printStackTrace(); } } Here, the LayoutInflater inflates the custom dialog layout in the Alertdialog builder. The Alertdialog builder is used to hold and set values for all the views present in the inflated layout. The builder then creates a final custom dialog when builder.create() method is called. Finally, the dialog is shown by calling method dialog.show() and is dismissed by calling method dialog.dismiss(). Now the dialog box is ready and it will be inflated when the above method is called. But the “Don't show again” checkbox currently has no functionality and so the dialog box will pop up although “Don’t show again” checkbox is ticked mark by the user. For adding this functionality, we will need to use Shared Preferences to save the state of the dialog box. For using Shared Preferences, first, add the…