Fullscreen DialogFragment overlaps with StatusBar

Question

I created a full screen dialog with the official Guide

The problem is, that my Toolbar overlaps with the status bar and I cannot figure out how to solve this.

DialogFragment

public class CreateAccountDialogFragment extends BaseDialogFragment {

    @Inject
    CreateAccountViewModel viewModel;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        //InjectDependencies....
        View rootView = createDataBinding(inflater, container);
        createToolbar(rootView);

        return rootView;
    }

    private View createDataBinding(LayoutInflater inflater, ViewGroup container) {
        CreateAccountDialogFragmentBinding binding =
                DataBindingUtil.inflate(inflater, R.layout.create_account_dialog_fragment, container, false);
        binding.setViewModel(viewModel);
        return binding.getRoot();
    }

    private void createToolbar(View rootView) {
        Toolbar toolbar = (Toolbar) rootView.findViewById(R.id.toolbar);

        // Set an OnMenuItemClickListener to handle menu item clicks
        toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                if (item.getItemId() == R.id.action_save) {
                    viewModel.createAccount();
                }
                return true;
            }
        });

        // Inflate a menu to be displayed in the toolbar
        toolbar.inflateMenu(R.menu.create_account_menu);
        toolbar.setTitle(R.string.create_account);
        toolbar.setNavigationIcon(R.drawable.ic_cancel);

        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                dialogFragment.dismiss();
            }
        });
}
}

Layout

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android">
    <data>
        <variable
            name="viewModel"
            type="org.altoware.weity.viewmodels.CreateAccountViewModel"/>
    </data>
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/background_light">

        <include layout="@layout/toolbar"/>

        <LinearLayout
            android:layout_width="250dp"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:orientation="vertical">

            <org.altoware.weity.views.BindableEditText
                android:id="@+id/editTextUsername"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:addTextChangedListener="@{viewModel.onUsernameChanged}"
                android:hint="Username"
                android:singleLine="true"/>

            <org.altoware.weity.views.BindableEditText
                android:id="@+id/editTextPassword"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:addTextChangedListener="@{viewModel.onPasswordChanged}"
                android:hint="Password"
                android:inputType="textPassword"
                android:singleLine="true"/>

        </LinearLayout>
    </RelativeLayout>

Toolbar

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout 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="wrap_content"
                                            android:theme="@style/AppTheme.AppBarOverlay"
                                            tools:showIn="@layout/activity_login">

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

Activity creating Dialog

@Subscribe
public void showNewAccountDialog(OttoMessages.Login.ShowNewAccountDialog evt) {
    FragmentManager fragmentManager = getSupportFragmentManager();
    CreateAccountDialogFragment newFragment =
            new CreateAccountDialogFragment();

    boolean isLargeLayout = false;
    if (isLargeLayout) {
        newFragment.show(fragmentManager, "dialog");
    } else {
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        transaction.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN);
        transaction.add(android.R.id.content, newFragment)
                .addToBackStack(null).commit();
    }
}

EDIT

After removing StatusBarTransparency from v21-styles it looks like this

Answer 1

The problem is in the transaction.add(containerId, fragment) part.

You have it set to: transaction.add(android.R.id.content, fragment), and it is the setting of it to android.R.id.content that is causing the overlap.

Instead, set it to the id of the parent's content frame in the calling activity.

For example, in my code the main activity parent layout was a DrawerLayout, with id of drawer_layout, so my fix was

 MyDialogFragment fragment = new MyDialogFragment ();
 FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
 transaction.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN);
 transaction.add(R.id.drawer_layout, frag)
            .addToBackStack(null).commit();

Answer 2

If you want DialogFragment in fullscreen and also want statusbar with your own color, you may add this in onCreate() method on your DialogFragment.

 setStyle(DialogFragment.STYLE_NORMAL, android.R.style.Theme_DeviceDefault_Light_NoActionBar_Fullscreen);

You may also add below code in onCreateView method for status bar color.

 getDialog().getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
 getDialog().getWindow().setStatusBarColor(getResources().getColor(R.color.colorPrimaryDark));