Implementing the new Material Design Full-Screen Dialog for Android

The Material Design guidelines describe a component called a full-screen dialog. This component is not yet officially available. In this blog post I describe how to easily create a full-screen dialog that complies with the guidelines by using the existing Android DialogFrament.

The final result

In this post I demonstrate how to achieve the following behavior:

One should notice the animations when opening and closing the dialog, the toolbar of the dialog with the close button and the positive action as text, and the full screen behavior of the dialog.

When to use it

According to the Material Design guidelines, a full-screen dialog should be used if the task meets any of the following criteria:

- Dialogs that include components which require keyboard input, such as form fields
- When changes aren’t saved instantly
- When components within the dialog open additional dialogs

The “x” in the toolbar indicates that changes are discarded when closing. The positive action (usually save or submit) is displayed as text in the toolbar.

Getting started

If you want to jump directly to the source code, you can also take a look at the Git repository.

We start with a new Android Studio project with an empty activity. I’ve changed the default theme so that everything is white, and added a button to my activity that should open our full-screen dialog later on.

Please note that I use the new AndroidX support library. All the stuff works with the old version as well, only the component names in the import statements and in the XML files have to be changed.

The app now looks like this:

Creating a DialogFragment

First we create a new class which inherits from DialogFragment. A dialog fragment offers the possibility to display a fragment as a modal. This dialog runs through the normal fragment lifecycle and is displayed with the help of a fragment manager. Therefore, this fragment also needs a layout. To achieve the desired result we need a toolbar with the close button and room for our actual content.

By using the attribute app:elevation = “0dp” of the AppBarLayout it is ensured that the toolbar has no shadow, but you can adjust this to your needs. The attributes android:paddingStart = “6dp” and android:paddingÉnd = “16dp” move the close button and the text for the positive action slightly away from the edges. The standard Material Design close icon is available here and serves as a navigation icon. As content the dialog contains only one TextView as an example, but here you can insert any views you like.

The corresponding class for this dialog fragment contains a static method to display the dialog. Moreover, it inflates our previously created layout in onCreateView. After the inflation the reference to the toolbar is retrieved. The title of the toolbar is set and the actions for the close button and for selecting the menu item are adjusted.

This is the menu resource used:

The dialog now looks like this:

Making the dialog full-screen

The first step is to change the size of the dialog itself. For this we have to adjust the layout parameters when the dialog is started. This is done with the following code in the onStart method of the dialog fragment:

Since it is still a dialog which is floating by default and darkens the background, the dialog does not reach to the edges of the screen. To solve this problem we create a custom dialog theme which removes the background of the dialog and the floating characteristic.

This theme is set in the onCreate method of the dialog fragment:

The dialog finally looks like this:

Entry and exit animations

Last but not least, we want the dialog to float in from the bottom to the top and float out again when closing. Therefore we create two animations in the anim directory. One to float up and one to float down. For this animations we create a theme which only overwrites the windowEnterAnimation and windowExitAnimation. Finally, we provide these animations to the dialog when starting in the onStart method in addition to the window size.

The result finally looks like this:

Code on GitHub

Check out the whole project on GitHub.

Keep in touch

Thank you for reading! Feel free to comment if you have any questions, ideas or just want to talk to me and remember to check out my other posts.