Fullscreen DialogFragment with translucent StatusBar

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:

  • Android Studio - Gradle sync error
  • Android ADB commands to get the device properties
  • How to set my gradle for final release apk
  • Detecting Doze State
  • How to run my Go code in Android?
  • Specifying test dependencies with the Gradle Android build system
  • 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: Screenshot

    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);
    

    enter image description here

    Related posts:

    How to use putExtra() and getExtra() for string data
    Writeable and Executable location on Android
    How to set dialog window background to transparent, without affecting its margin
    How to (properly) transition from startManagingCursor to CursorLoader?
    FusedLocationApi.getLastLocation always null
    Android 2.2 - How do I detect if I am installed on the SDCard or not?
  • Android: What is the difference between app:srcCompat=“ ” and android:src=“ ”?
  • Set child layout width programmatically In ANDROID?
  • Storing a secret key on Android
  • Can I turn on WiFi-Direct from code? on Android API-14 (ICS)
  • Backup/restore sqlite db in android
  • How to register an Android developer account for a company?
  • 3 Solutions collect form web for “Fullscreen DialogFragment with translucent StatusBar”

    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);
    

    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>
    

    enter image description here

    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?

    Android Babe is a Google Android Fan, All about Android Phones, Android Wear, Android Dev and Android Games Apps and so on.