Fullscreen DialogFragment with translucent StatusBar

Question

I have a DialogFragment which I want to show in fullscreen. I do however still want a StatusBar present, and the hardware buttons at the bottom. I also want to set a background color of the StatusBar (for Lollipop).

My problem is that if I set the following flags in the DialogFragment:

getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);   
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);

Both the StatusBar and Hardware keyboard becomes translucent, and the DialogFragment stretches behind these.

Here is the code, which has been greatly reduced to become readable:

public class CardDetailsDialog extends DialogFragment {

Setup parameters...

public static CardDetailsDialog newInstance(final long cardId, final long projectId){
    CardDetailsDialog frag = new CardDetailsDialog();
    frag.setStyle(DialogFragment.STYLE_NORMAL, R.style.CardDetailsDialogStyle);
    return frag;
}

@Override
public void onActivityCreated(Bundle savedInstanceState) {
    super.onActivityCreated(savedInstanceState);
    if(getDialog() != null) {
        getDialog().getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
        getDialog().getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        getDialog().getWindow().getAttributes().windowAnimations = R.style.DialogSlideAnimation;
        getDialog().getWindow().setLayout(LinearLayout.LayoutParams.MATCH_PARENT,
                LinearLayout.LayoutParams.MATCH_PARENT);
        getDialog().getWindow().setStatusBarColor(Color.RED);
    }
}

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setHasOptionsMenu(true);
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    super.onCreateView(inflater, container, savedInstanceState);
    View view = inflater.inflate(R.layout.card_details, container, false);

    Handle everything that happens inside the view...

    return view;
}
}

Here is the referred theme:

<style name="CardDetailsDialogStyle" parent="@style/Theme.AppCompat.Light.Dialog" >
    <item name="android:windowBackground">@null</item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowFrame">@null</item>
    <item name="android:windowIsFloating">true</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:windowAnimationStyle">@android:style/Animation.Dialog</item>
    <item name="android:windowSoftInputMode">stateUnspecified|adjustPan</item>
</style>

And the style of the fragment:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/pp.whiteBackgroundColor" >

<android.support.v7.widget.Toolbar xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_details_toolbar"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:layout_alignParentTop="true"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/PopupMenutheme">
</android.support.v7.widget.Toolbar>

    <ScrollView
        android:id="@+id/details_scrollview"
        android:layout_height="wrap_content"
        android:layout_width="match_parent">

        All subview elements here...

    </ScrollView>

</RelativeLayout>

This is the result:

As you can see, the ToolBar extends over the StatusBar and hardware buttons. I don't know if I am approaching this correctly. Am I missing something?

EDIT

This is what the same view look likes when I remove

getDialog().getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);

Solution 1

For anyone who's still having this problem, do the following. This just solves half of the problem that is posted i.e. black status bar.

Add following theme to res/value-v21/style

<style name="DialogTheme" parent="@style/Base.Theme.AppCompat.Light.Dialog">
     <item name="android:windowTranslucentStatus">true</item>
</style>

And then apply Style on DialogFragment in onCreate

@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setStyle(DialogFragment.STYLE_NO_TITLE, R.style.DialogTheme);
}

Edit if you've problem with your dialog theme then use this style e.g. colorAccent or colorControlHighlight etc

<style name="DialogTheme" parent="@style/ThemeOverlay.AppCompat.Dialog">
     <item name="android:windowTranslucentStatus">true</item>
</style>

Solution 2

Try use the same Style from your App. I tested with simple dialog without fragment and works fine. Like that:

new Dialog(context, R.style.CardDetailsDialogStyle);

Solution 3

In my case SYSTEM_UI_FLAG_LAYOUT_STABLE solved problem with overlapping

        int width = ViewGroup.LayoutParams.MATCH_PARENT;

        int height = ViewGroup.LayoutParams.MATCH_PARENT;

        dialog.getWindow().setLayout(width,height);

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            dialog.getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
            dialog.getWindow().setStatusBarColor(getResources().getColor(R.color.darkGrayTransp));
            dialog.getWindow().getDecorView().setSystemUiVisibility(SYSTEM_UI_FLAG_LAYOUT_STABLE);//solves issue with statusbar
            dialog.getWindow().setGravity(Gravity.CENTER_HORIZONTAL| Gravity.TOP);
        }

Solution 4

You have to set fitsystemwindows = true. Other way is to add a Space with 0dp and change its height to 25dp when the dialog is going to show.

To change the space size, use layout params, check this post: How to create a RelativeLayout programmatically with two buttons one on top of the other?

View more solutions

Comments

[JavierSegoviaCordoba]

Maybe can be that the elevation of the dialog is less than the toolbar.

[pnit]

I am not following, could you please elaborate?

[JavierSegoviaCordoba]

In appcompat 21 for lollipop, you can set elevation in the xml. If you are using a toolbar, maybe it has more elevation than the dialog.

[toidiu]

Thanks that worked! Here is some documentation: developer.android.com/reference/android/view/…

[Thang BA]

What is the " CardDetailsDialogStyle" ?

[Kishan Vaghela]

@ThangBA CardDetailsDialogStyle is style that is applied to activity

[MauroAlexandro]

This solution worked for me... without the line dialog.getWindow().getDecorView().setSystemUiVisibility(SYST‌​EM_UI_FLAG_LAYOUT_ST‌​ABLE); Thanks!!

[Bruce]

This saved me! Setting android:windowTranslucentStatus to true does the trick, crazy