How to achieve a full-screen dialog as described in material guidelines?

Question

Material guidelines describe the behavior of a full-screen dialog.

Full-screen dialog | Dialogs - Material Design

How can I achieve this in practice?

Answer 1

The answer from Boss is correct, but missing the requested action bar as displayed on link in the question.

So, full example below.

Dialog fragment:

public class AKDialogFragment extends DialogFragment {  private static final String TAG = "AKDialogFragment";  @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {      View rootView = inflater.inflate(R.layout.dialog_ak, container, false);      Toolbar toolbar = (Toolbar) rootView.findViewById(R.id.toolbar);     toolbar.setTitle("Dialog title");      ((AppCompatActivity) getActivity()).setSupportActionBar(toolbar);      ActionBar actionBar = ((AppCompatActivity) getActivity()).getSupportActionBar();     if (actionBar != null) {         actionBar.setDisplayHomeAsUpEnabled(true);         actionBar.setHomeButtonEnabled(true);         actionBar.setHomeAsUpIndicator(android.R.drawable.ic_menu_close_clear_cancel);     }     setHasOptionsMenu(true);     return rootView; }  @NonNull @Override public Dialog onCreateDialog(Bundle savedInstanceState) {     Dialog dialog = super.onCreateDialog(savedInstanceState);     dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);     return dialog; }  @Override public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {     menu.clear();     getActivity().getMenuInflater().inflate(R.menu.menu_ak, menu); }  @Override public boolean onOptionsItemSelected(MenuItem item) {     int id = item.getItemId();      if (id == R.id.action_save) {         // handle confirmation button click here         return true;     } else if (id == android.R.id.home) {         // handle close button click here         dismiss();         return true;     }      return super.onOptionsItemSelected(item); } } 

Layout dialog_ak.xml:

<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true">  <android.support.design.widget.AppBarLayout     android:layout_width="match_parent"     android:layout_height="wrap_content"     android:theme="@style/AppTheme.AppBarOverlay">      <android.support.v7.widget.Toolbar         android:id="@+id/toolbar"         android:layout_width="match_parent"         android:layout_height="?attr/actionBarSize"         android:background="?attr/colorPrimary"         app:popupTheme="@style/AppTheme.PopupOverlay"/>  </android.support.design.widget.AppBarLayout>  <LinearLayout     xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:app="http://schemas.android.com/apk/res-auto"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:background="#ffffff"     android:orientation="vertical"     android:paddingBottom="@dimen/activity_vertical_margin"     android:paddingLeft="@dimen/activity_horizontal_margin"     android:paddingRight="@dimen/activity_horizontal_margin"     android:paddingTop="@dimen/activity_vertical_margin"     app:layout_behavior="@string/appbar_scrolling_view_behavior">      <TextView         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="Your content here"/>  </LinearLayout>  </android.support.design.widget.CoordinatorLayout> 

Menu menu_ak.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android"   xmlns:app="http://schemas.android.com/apk/res-auto"   xmlns:tools="http://schemas.android.com/tools">   <item     android:id="@+id/action_save"     android:orderInCategory="100"     android:title="Save"     app:showAsAction="always"/> </menu> 

Hosting activity must extend AppCompatActivity. Launching dialog is the same as in Boss answer:

FragmentManager fragmentManager = getSupportFragmentManager(); AKDialogFragment newFragment = new AKDialogFragment(); FragmentTransaction transaction = fragmentManager.beginTransaction(); transaction.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN); transaction.add(android.R.id.content, newFragment).addToBackStack(null).commit(); 

I hope it helps someone.

Answer 2

Use DialogFragment

Refer this link for Showing a Dialog Fullscreen or as an Embedded Fragment

http://developer.android.com/guide/topics/ui/dialogs.html#FullscreenDialog

I am just copying the code here.

Create a dialogfragment

    public class CustomDialogFragment extends DialogFragment {     /** The system calls this to get the DialogFragment's layout, regardless         of whether it's being displayed as a dialog or an embedded fragment. */     @Override     public View onCreateView(LayoutInflater inflater, ViewGroup container,             Bundle savedInstanceState) {         // Inflate the layout to use as dialog or embedded fragment         return inflater.inflate(R.layout.purchase_items, container, false);     }      /** The system calls this only when creating the layout in a dialog. */     @Override     public Dialog onCreateDialog(Bundle savedInstanceState) {         // The only reason you might override this method when using onCreateView() is         // to modify any dialog characteristics. For example, the dialog includes a         // title by default, but your custom layout might not need it. So here you can         // remove the dialog title, but you must call the superclass to get the Dialog.         Dialog dialog = super.onCreateDialog(savedInstanceState);         dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);         return dialog;     } } 

Then add this method to show the dialog

    public void showDialog() {     FragmentManager fragmentManager = getSupportFragmentManager();     CustomDialogFragment newFragment = new CustomDialogFragment();      if (mIsLargeLayout) {         // The device is using a large layout, so show the fragment as a dialog         newFragment.show(fragmentManager, "dialog");     } else {         // The device is smaller, so show the fragment fullscreen         FragmentTransaction transaction = fragmentManager.beginTransaction();         // For a little polish, specify a transition animation         transaction.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN);         // To make it fullscreen, use the 'content' root view as the container         // for the fragment, which is always the root view for the activity         transaction.add(android.R.id.content, newFragment)                    .addToBackStack(null).commit();     } } 

The main thing that has to be focused is in this line

transaction.add(android.R.id.content, newFragment).addToBackStack(null).commit(); 

The dialog become fullscreen when u specifiy the rootview as the android.R.id.content