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:

  • What Android tools and methods work best to find memory/resource leaks?
  • Android Lollipop recents/multitasking header styling, text always black
  • issue in string array in xml file: Multiple substitutions specified in non-positional format and Found tag </item> where </string-array> is expected
  • Android Change Navigation Drawer Menu Items Text programatically
  • How to integrate PayU money Gateway in Android?
  • How to check if a my ListView has scrollable number of items?
  • 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

  • Get context of test project in Android junit test case
  • Streaming Video From Android
  • SQLite database update query with multiple where conditions in Android
  • Change ActionBar title text color using Light.DarkActionBar theme in AppCompat 21
  • Trouble getting Android emulator to run in eclipse
  • Android: this.getApplication() returns NULL pointer
  • 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.