How to make DialogFragment fullscreen without overlapping status bar/navigation bar and mantain status bar color?

Question

I've been googling for hours and tried countless things but I just can't get this to work...

This is MyFragment.java:

public class MyFragment extends DialogFragment {

    public MyFragment() {
        // Required empty public constructor
    }

    public static MyFragment newInstance() {
        MyFragment newFragment = new LoginDialogFragment();
        newFragment.setCancelable(false);
        return newFragment;
    }

    @NonNull
    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        return new Dialog(getActivity(), R.style.MyAppTheme_Dialog);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_my, container, false);
        ButterKnife.bind(this, view);
        return view;
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);

        Window window = getDialog().getWindow();

        if (window != null) {
            window.setLayout(WindowManager.LayoutParams.MATCH_PARENT, WindowManager.LayoutParams.MATCH_PARENT);
            window.setWindowAnimations(R.style.MyAppTheme_Dialog);
        }
    }

}

And this is styles.xml:

<style name="MyAppTheme" parent="PreferenceFixTheme.Light.NoActionBar">
    <item name="android:windowBackground">@color/background</item>
    <item name="android:colorBackground">@color/background</item>
    <item name="colorPrimary">@color/primary</item>
    <item name="colorPrimaryDark">@color/primary_dark</item>
    <item name="colorAccent">@color/accent</item>
    <item name="preferenceCategory_marginBottom">0dp</item>
</style>

<style name="MyAppTheme.Dialog">
    <item name="android:backgroundDimEnabled">false</item>
    <item name="android:windowBackground">@null</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:windowEnterAnimation">@anim/slide_up</item>
    <item name="android:windowExitAnimation">@anim/slide_down</item>
    <item name="android:windowFrame">@null</item>
    <item name="android:windowIsFloating">true</item>
    <item name="android:windowSoftInputMode">stateUnspecified|adjustPan</item>
</style>

This almost works as I expect it... The only problem is that calling window.setLayout(WindowManager.LayoutParams.MATCH_PARENT, WindowManager.LayoutParams.MATCH_PARENT); to fill the whole screen (minus the status/navigation bars) changes the status bar color to black. When I close the dialog, it changes back to colorPrimaryDark.

If I remove that window.setLayout(...) line, the status bar will keep the colorPrimaryDark but the dialog size will be the default (a small square on the middle of the screen).

In the same place I call window.setLayout(...), I tried putting the following code:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
    getWindow().setStatusBarColor(ContextCompat.getColor(getActivity, R.color.primary_dark));
}

This sets the status bar color to colorPrimaryDark but it overlaps both the status and navigation bar.

I just can't get fullscreen without overlapping the status and navigation bars and keep colorPrimaryDark on the status bar.

A few questions I've found with the same problem but I couldn't get the suggestions to work. Neither have an accepted answer:

Does it have to be a DialogFragment? Would an Activity work? — Karakuri, Dec 10 '16 at 04:14
have you tried with overrided dialogfragment. i have code. i dont know which will satisfy your needs or not. any way i will post the code. try it. — Noorul, Dec 10 '16 at 04:15
Why are you trying to force a dialog to be not a dialog? You seem to be using the wrong abstraction. — ianhanniballake, Dec 10 '16 at 04:21
@Karakuri It has to be a `DialogFragment` because I need the `setCancelable(false)` to disallow back button presses when this particular fragment is opened. To do that on a normal fragment the back button presses need to be handled on the Activity and I'm not fond of the possible solutions for that. — rfgamaral, Dec 10 '16 at 11:49
@ianhanniballake It is a dialog from the perspective of our UX/UI team, it just fills the whole screen (that's their approach for modal dialogs). This is not something that should live on the screen for a long period of time. You open this, quickly do what the fragment is meant to do and close it, without messing with the current activity/fragments lifecycle. — rfgamaral, Dec 10 '16 at 11:51

score 2 · Answer 1 · answered Dec 10 '16 at 04:23

check this customized dialog fragment, try it which will satisfy your need . and let me know.

 import android.content.pm.ActivityInfo;
 import android.content.res.Configuration;
 import android.graphics.Point;
 import android.os.Build;
 import android.os.Bundle;
 import android.support.v4.app.DialogFragment;
 import android.util.TypedValue;
 import android.view.Display;

/**
  * Created by Noorul on 02-07-16.
*/

public class _DialogFragment extends DialogFragment {
  @Override
  public void onCreate(Bundle savedInstanceState) {
     super.onCreate(savedInstanceState);
  //   preventScreenRotation();
  }

  @Override
  public void onDestroy() {
    // releaseScreenRotation();
    super.onDestroy();
}

@SuppressWarnings("deprecation")
@Override
public void onStart() {
    super.onStart();

    // change dialog width
    if (getDialog() != null) {

        int fullWidth = getDialog().getWindow().getAttributes().width;
        int fullHeight = getDialog().getWindow().getAttributes().height;

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB_MR2) {
            Display display =    getActivity().getWindowManager().getDefaultDisplay();
            Point size = new Point();
            display.getSize(size);

            fullWidth = size.x;
            fullHeight = size.y;
        } else {
            Display display = getActivity().getWindowManager().getDefaultDisplay();
            fullWidth = display.getWidth();
            fullHeight = display.getHeight();
        }

        final int padding = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 0, getResources()
                .getDisplayMetrics());

        int w = fullWidth - padding;
        int h = fullHeight - (padding * 2);

        getDialog().getWindow().setLayout(w, h);
    }
}


 private void preventScreenRotation() {
     if (getResources().getConfiguration().orientation ==  Configuration.ORIENTATION_PORTRAIT) {
                getActivity().setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
     } else {  
      getActivity().setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
}
  }

  private void releaseScreenRotation() {
      getActivity().setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_UNSPECIFIED);
}
}

change the size of the dialog depends on your need.

That almost worked... I forgot to mention one detail on my question. I have a slide up animation (from bottom to top) on this fragment and this code the fragment will be sized exactly how I expect it to be and the status bar will keep it's color. Only problem is that the fragment will be on top of the bottom navigation bar while sliding up... :( — rfgamaral, Dec 10 '16 at 12:03
I can't an actual screenshot has this hasn't been released yet but it's very similar to this one: https://i.stack.imgur.com/cppoj.png - See how the "write comment" bit is overlapping the navigation bar buttons? That's what happens during the slide animation. When it's finished it will look like this (but with the correct status bar color): https://i.stack.imgur.com/HiSv9.png - Which is what I want. — rfgamaral, Dec 10 '16 at 12:34
can you post XML code of the dialog? try to add padding from top. it will help — Noorul, Dec 10 '16 at 13:00
I don't understand how the top padding will help with the animation overlapping the bottom navigation bar... — rfgamaral, Dec 10 '16 at 13:16
apologize, i dont understand the actual screen. i said based on the screenshot you shared. that all. — Noorul, Dec 10 '16 at 13:18
I tried to create a sample project to better demonstrate the issue but for some reason couldn't make it work... — rfgamaral, Dec 10 '16 at 13:42

score 0 · Answer 2 · answered Jan 13 '17 at 19:53

To create a fullscreen dialog according to Material design guidelines. Put this code in the DialogFragment:

 @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        Dialog dialog = super.onCreateDialog(savedInstanceState);
        dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
        return dialog;
    }

Call this dialog by:

getSupportFragmentManager().beginTransaction().add(android.R.id.content, FullScreenDialog.newInstance()).addToBackStack(null).commit();

Set the top margin to 24dp in the base layout. So that the dialog doesn't overlap the statusbar.

How to make DialogFragment fullscreen without overlapping status bar/navigation bar and mantain status bar color?

2 Answers2