zocada

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 fullscreen dialog (A dialog layout that takes full width and height of the device screen). res/layouts/layout_full_screen_dialog.xml



Creating custom styles for the dialog

We need to customize the appearence 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.

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 followinf 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



Also published on Medium.

haxzie

Community Lead with a demonstrated history of working in a non-profit organization. Skilled in Python, Public Speaking, Graphic Design, Writing, and Android Development. Strong community and social services professional with a Bachelor's degree focused in Computer Science from Sahyadri College of Engineering and Management.