Android full screen dialogs using DialogFragment.

Dialogs have always been an intuitive way of displaying quick details without having to take users to a different screen. Full-Screen dialogs give a variety of use cases for performing quick UI screens along with the power of fragments without having to fire up a separate activity. From playing videos, viewing full-screen images to even showing complex lists can be implemented with Full-Screen Dialogs for enhancing user experience.

Full-screen dialogs are created by simply extending the DialogFragment class and customizing the theme. So, Let’s get started!

Creating the custom dialog layout

Let’s begin by creating a simple layout to view in the full screen dialog (A dialog layout that takes full width and height of the device screen). res/layouts/layout_full_screen_dialog.xml

res/layouts/layout_full_screen_dialog.xml

Creating custom styles for the dialog

We need to customize the appearance of the dialog fragment to be viewed as full-screen and to remove the default padding around the dialog. Let’s create an entry in the res/values/styles.xml file as follows.

res/values/styles.xml

Creating the FullScreenDialog class

Next we need to create the FullScreenDialog class by extending the android-support-v4 DialogFragment. Let's create a new file called as FullScreenDialog.java.

public class FullScreenDialog extends DialogFragment {

}

In the onCreate() method of the class let's initialize the dialog styles

@override
public void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setStyle(DialogFragment.STYLE_NORMAL,                  R.style.FullScreenDialogStyle);
}

Next, on the onCreateView() method, lets inflate the layout we created and initialize the toolbar with a close button to dismiss the dialog.

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
     super.onCreateView(inflater, container, savedInstanceState);
     View view = inflater.inflate(R.layout.layout_full_screen_dialog, container, false);
Toolbar toolbar = view.findViewById(R.id.toolbar);
     toolbar.setNavigationIcon(R.drawable.ic_close_white_24dp);
     toolbar.setNavigationOnClickListener(view1 -> cancelUpload());
     toolbar.setTitle("My Dialog");
return view;
}

Once the dialog is being created, we’ll be able to use the getDialog() method and set the window width and height to device screen width and height. Add the following lines into the onStart method of the class.

@override
public void onStart() {
     super.onStart();
     Dialog dialog = getDialog();
     if (dialog != null) {
         int width = ViewGroup.LayoutParams.MATCH_PARENT;
         int height = ViewGroup.LayoutParams.MATCH_PARENT;
         dialog.getWindow().setLayout(width, height);
     }
}

Once you have done this, Your FullScreenDialog class is ready to roll! Now the file should look like this.
Additionally add a constant String value for tag which will be used while creating the Dialog.

Launching our Dialog!

Once the dialog class, styles and layout has been wired up. We can fire up an instance of our DialogFragment from any activity or fragment. We need to have a fragment trasaction too to get things work. Add the following nuclear lauch codes inside any activity to lauch our dialog.

FullScreenDialog dialog = new FullScreenDialog();
FragmentTransaction ft = getFragmentManager().beginTransaction();
dialog.show(ft, FullScreenDialog.TAG);

If we need to send data to the dialog fragment, we can do so as we send arguments to a fragment. While creating the dialog object, create a bundle with all the data we need to send and pass it to the setArgument() method of the FragmentDialog object.

Bundle b = new Bundle();
b.putString("KEY", "VALUE");
b.putSerializable("KEY", OBJECT);
// or anything else

//initialize the dialog object
dialog.setArguments(b);

//create a fragmentTransaction and
//launch the dialog

Now, for recieving the data, inside the onCreate() of the FullScreenDialog use the getArgument() method, which will return the bundle as is.

Bundle b = getArguments();
String name = b.getString("KEY", "DEFAULT_VALUE");
//and get whatever you have sent

Thanks for reading this article! This is one of the first few articles I have published on Medium. Feel free to comment down suggests or edits :)

PS. Claps are appreciated ❤

This post was originally published at ZOCADA.