How to achieve a full-screen dialog as described in material guidelines?
Solution 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.
Solution 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
Solution 3
try this code:
Dialog yourDialog=new Dialog(this,android.R.styleTheme_Black_NoTitleBar_Fullscreen)
Skarafaz
Updated on December 11, 2021Comments
-
Skarafaz over 2 years
Material guidelines describe the behavior of a full-screen dialog.
How can I achieve this in practice?
-
JerabekJakub almost 8 yearsThat shows fullscreen dialog but I'm missing the toolbar with Close and Save buttons.
-
Emil almost 8 years@JerabekJakub For that, I think you have to add toolbar to your dialog fragment.
-
JerabekJakub almost 8 yearsYes, you are right. See my answer below. It was not so trivial.
-
Alessandro over 7 yearsIt helps... it helps a lot! Thank you!!
-
hector6872 over 7 yearsThis should have been the correct answer: "The dialog become fullscreen when u specifiy the rootview as the android.R.id.content"
-
Gonzalo about 7 yearsThe problem is that you are overriding the activity's actionbar, so you should restore it when the dialog is dismissed.
-
Mohammad Yahia almost 7 years@Gonzalo you don't need this is automatically handled by fragment transaction
-
Joseph over 6 yearsWhen i dimiss the fragment, the toolbar is still left with the close icon added with actionBar.setHomeAsUpIndicator, but the other menu items added through oncreateoptionsitems get cleared away. How do clear the close button?
-
Stuart Fisher over 6 yearsI can't upvote this enough. Android tell you to implement full screen dialogs in a particular way but they don't tell you how to do it. The DialogFragment class provides absolutely no support for doing this!
-
Choletski over 6 yearshere status bar overlap toolbar
-
Datasetter almost 6 yearsYes. status bar overlaps toolbar. the solution is to change android.R.id.content with R.id.drawer_layout (or the layout from the drawer not the entire content of the app)
-
mariozawa over 5 yearsFor menu, you can use this to avoid conflicts with your Activity's menu toolbar.inflateMenu(R.menu.menu_dialog); then add OnMenuItemClickListener toolbar.setOnMenuItemClickListener(OnMenuItemClickListener);
-
Sakiboy almost 4 yearsI get this error
IllegalArgumentException: No view found for (android:id/content) for fragment DateDialog
would anyone know why?