How to Android dialog (fullscreen, embedded) as in Google Calendar app

What I'd like to achive

A small/large screen behavior as it is implemented by Google in its Calendar app.

For example when you create a new event, on a large screen a 'dialog' opens

that darkens the Activity in the background
the Toolbar always stays at the same location and never gets pushed out of view by the on-screen keyboard
in portrait mode the bottom of the dialog's Toolbar is aligned with the bottom of the Activity's 'extended' toolbar.

Toolbar alignment w/ Activity Toolbar

The Contextual Action Bar (e.g. for text selection) is drawn over the Toolbar of the Activity, and pushes the dialog down, so it's not anchored with the Activity's Toolbar anymore.
in landscape mode it seems to be anchored below the notification bar; the Contextual Action Bar is drawn over the Toolbar of the Activity

Contextual Action Bar: left landscape, right portrait

on a small screen,

the dialog fills the screen
the Contextual Action Bar gets drawn over the Toolbar

What I've tried so far

A. fullscreen DialogFragment expample from the android documentation (can't add anymore links b/c of a lack of reputation)

when displayed as fullscreen dialog, the background is transparent, and it draws over the notification bar (similar to immersive mode)

B. added (thanks to some posts on stackoverflow)

dialog fragment styles:

setStyle(DialogFragment.STYLE_NORMAL, R.style.MyDialogFragmentStyle);

<style name="MyDialogFragmentStyle" parent="@style/MyTheme">
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowFullscreen">false</item>
    <item name="android:windowIsFloating">false</item>
</style>

removed the window title

getDialog().getWindow().requestFeature(Window.FEATURE_NO_TITLE);

added a custom toolbar

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

  <android.support.v7.widget.Toolbar
     android:id="@+id/toolbar"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:background="?attr/colorPrimary"
     android:minHeight="?attr/actionBarSize"
     app:homeAsUpIndicator="@drawable/ic_arrow_back_white_24dp"
     app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

  <FrameLayout
    android:id="@+id/content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@id/toolbar" >
  </FrameLayout>

</RelativeLayout>

and set the dialog to fullscreen on small devices

dialog.getWindow().setLayout(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);

and this kinda works, it solves some of my What I'd like to achive points and A. 'the Android sample' problems (transparent background, ...)

darkens the Activity in the backgound
- works
the Toolbar always stays at the same location and never gets pushed out of view by the on-screen keyboard
- kinda, with the exception of the Toolbar being pushed out of screen by the on-screen keyboard
in portrait mode the bottom of the dialog Toolbar is aligned with the bottom of the Activity's 'extended/large' Toolbar. The Contextual Action Bar (e.g. for text selection) is drawn over the Toolbar of the Activity, and pushes the dialog down, so it's not anchored with the Activity's Toolbar anymore.
- nope, didn't put any effort into alignment b/c of 2. The Contextual Action Bar is drawn over the Activity's Toolbar and over part of the dialog's Toolbar.
in landscape mode it seems to be anchored below the notification bar; the Contextual Action Bar is drawn over the Toolbar of the Activity.
- nope, on-screen keyboard pushes the Toolbar out of screen and the Contextual Action Bar is drawn over the Activity's Toolbar, but also over part of the dialog (b/c of the dialog's Toolbar being pushed outside - I suppose)
it fills the screen
- works
the Contextual Action Bar gets drawn over the dialog's Toolbar
- the Contextual Action Bar pushes the dialog's Toolbar down, leaving the user with two toolbars. Looks weird, but at least it's functional.

So, my first post got a bit lenghty - thanks to all who read along so far.

I've been researching this subject on and off for quite some time now. Some people say dialog fragments are no good for non-fullscreen display and that one should style an activity to look like a dialog. Others say it's bad practice to style activities to look like dialogs b/c that's what DialogFragments were made for. There doesn't seem to be a broad agreement on this topic.

Does anyone have any insight on how Google implemented this in it's Calendar app? (Sadly in the AOSP sources, only the old calendar app is available).

And is there a way to meet all my requirements with dialog fragments?

Thanks a lot Michael

btw: Large device tests on a Android 4.1 tablet, small device Android 4.1 and 5.0, using Support Library DialogFragment, but in the transition to 'normal' DialogFragment.

Recommended topics

Hot tags