Material design drawer under the status bar: how to achieve it using a DrawerLayout with two FrameLayouts as children?

fiipi

I'm currently setting up the navigation drawer to follow the material design specs. I've already checked Chris Banes post (available in Material design checklist) and made all of the implementations listed there such as custom themes and so on, and this question as well, but none of them seem to meet the requirements of my app structure.

As you guessed from the title, my DrawerLayout has got two FrameLayouts as children: one for the content and another for the drawer (it is important to point out that I can't change this structure since I need to keep the ability to update the content in the NavigationDrawer dinamically and obviously to keep the ability to swap fragments as the main content).

The problem is now that I don't know where to put the toolbar declaration in xml in order to achieve the expected design and without messing all up, since the DrawerLayout requires two children.

activity_main.xml

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.myapp.MainActivity" 
android:fitsSystemWindows="false"> <!-- Setting this one to true makes the status bar to have a non-transparent shitty background -->

<!--
     As the main content view, the view below consumes the entire
     space available using match_parent in both dimensions.
-->

<FrameLayout
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <android.support.v7.widget.Toolbar
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/toolbar"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:minHeight="?attr/actionBarSize"
        android:background="?attr/colorPrimary" 
        app:theme="@style/ThemeOverlay.AppCompat.ActionBar" />

    </FrameLayout>

<com.myapp.widget.ScrimInsetsFrameLayout
    android:id="@+id/navigation_drawer"
    android:layout_width="@dimen/navdrawer_width"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:fitsSystemWindows="true"/>
</android.support.v4.widget.DrawerLayout>

Gives this result: As you can see, the status bar seems to be completely absent (maybe it's correct?) since the content is drawn full screen. When the app starts I can see the toolbar is drawn (rendered without the staus bar padding, thus messing up with the system icons) and then suddenly gets overlayed by the map content. I'm currently running Android 4.4.4 but it's the same on the emulator with Android 5.0.

App running on Android 4.4.4. CM11

In another stackoverflow question it was suggested to put a root LinearLayout with the Toolbar and the DrawerLayout, but would result in strange results, such as correctly rendering the toolbar but with the status bar (with solid non-transparent background) under it. I've tried also to use a FrameLayout as root, with poor results.

Any advice on how to handle this problem?

michal.luszczuk
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/drawer_layout"> 

<LinearLayout
    android:id="@+id/someLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <android.support.v7.widget.Toolbar
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/toolbar"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:minHeight="?attr/actionBarSize"
        android:background="?attr/colorPrimary" 
        app:theme="@style/ThemeOverlay.AppCompat.ActionBar" />
     <FrameLayout android:id="@+id/container"></FrameLayout>

</LinearLayout>

<com.myapp.widget.ScrimInsetsFrameLayout
    android:id="@+id/navigation_drawer"
    android:layout_width="@dimen/navdrawer_width"/>
</android.support.v4.widget.DrawerLayout>

Now you just have to change your fragments in R.id.container, because container is under ToolBar in someLayout LinearLayout

I ommited some args of layouts but that is not the point.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

How to display the children under the parent of an xmll file using jquery?

분류에서Dev

Android material design - Creating Tool Bar

분류에서Dev

How to Add Two DataTables to a Tablix Using ReportViewer Design

분류에서Dev

Flutter: How to change the status bar text color on Android and iOS when not using AppBar

분류에서Dev

Navigation Drawer and Bottom Bar

분류에서Dev

How can I design Material for older versions?

분류에서Dev

Android How to achieve two screens,two activities,and they are independent

분류에서Dev

How to change the status bar bgcolor for UITableView with hidden nav bar?

분류에서Dev

Removing Status Bar In IOS 8 When Using A UINavigationController

분류에서Dev

Excel Graph: how can I show two values in the same bar? Not using stacked?

분류에서Dev

Google Material Design vs Material Design Lite

분류에서Dev

How can I move tmux's status bar to the top?

분류에서Dev

In AngularJS Material Design, how to hide overflowed text in the `md-toolbar`?

분류에서Dev

How to make search results appear in a field under the search bar?

분류에서Dev

Material Design Icons

분류에서Dev

Android color for Material Design

분류에서Dev

Material Design Ripple Event

분류에서Dev

Material UI: affect children based on class

분류에서Dev

Using a Navigation Drawer to Switch Activites?

분류에서Dev

Menu in system status bar is disabled

분류에서Dev

NSStatusItem reordering along Status Bar

분류에서Dev

Material Design Bottom Button in SwipeRefreshLayout

분류에서Dev

How to install two versions of software under Windows 10?

분류에서Dev

How to recognise an item selection/click in navigation drawer list instead of using its position in android?

분류에서Dev

How can I keep a Status Bar from covering my RichTextBox...? C#

분류에서Dev

How to select only first two children of a parent in a mixin with nth-child?, not every first and second

분류에서Dev

How to add tabhost with navigation drawer?

분류에서Dev

DrawerToggle backbutton 설정 in android navigation drawer / action bar

분류에서Dev

How to achieve complex messages using GWT i18n Messages interface

Related 관련 기사

  1. 1

    How to display the children under the parent of an xmll file using jquery?

  2. 2

    Android material design - Creating Tool Bar

  3. 3

    How to Add Two DataTables to a Tablix Using ReportViewer Design

  4. 4

    Flutter: How to change the status bar text color on Android and iOS when not using AppBar

  5. 5

    Navigation Drawer and Bottom Bar

  6. 6

    How can I design Material for older versions?

  7. 7

    Android How to achieve two screens,two activities,and they are independent

  8. 8

    How to change the status bar bgcolor for UITableView with hidden nav bar?

  9. 9

    Removing Status Bar In IOS 8 When Using A UINavigationController

  10. 10

    Excel Graph: how can I show two values in the same bar? Not using stacked?

  11. 11

    Google Material Design vs Material Design Lite

  12. 12

    How can I move tmux's status bar to the top?

  13. 13

    In AngularJS Material Design, how to hide overflowed text in the `md-toolbar`?

  14. 14

    How to make search results appear in a field under the search bar?

  15. 15

    Material Design Icons

  16. 16

    Android color for Material Design

  17. 17

    Material Design Ripple Event

  18. 18

    Material UI: affect children based on class

  19. 19

    Using a Navigation Drawer to Switch Activites?

  20. 20

    Menu in system status bar is disabled

  21. 21

    NSStatusItem reordering along Status Bar

  22. 22

    Material Design Bottom Button in SwipeRefreshLayout

  23. 23

    How to install two versions of software under Windows 10?

  24. 24

    How to recognise an item selection/click in navigation drawer list instead of using its position in android?

  25. 25

    How can I keep a Status Bar from covering my RichTextBox...? C#

  26. 26

    How to select only first two children of a parent in a mixin with nth-child?, not every first and second

  27. 27

    How to add tabhost with navigation drawer?

  28. 28

    DrawerToggle backbutton 설정 in android navigation drawer / action bar

  29. 29

    How to achieve complex messages using GWT i18n Messages interface

뜨겁다태그

보관