Android Toolbar occupies full screen

Question

Here's all my relevant code:

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    toolbar.setTitle("sometitle");
    toolbar.inflateMenu(R.menu.menu_main);
    setSupportActionBar(toolbar);

Styles:

<resources>

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/sunshine_blue</item>
    <item name="colorPrimaryDark">@color/sunshine_dark_blue</item>
    <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
    <item name="windowActionBar">false</item> <!-- Remove the default action bar -->
    <item name="windowNoTitle">true</item>
</style>
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
    <item name="spinBars">true</item>
    <item name="color">@android:color/white</item>
</style>

XML:

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

<!-- Replace the default action bar -->
<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_height="?attr/actionBarSize"
    android:layout_width="match_parent"
    android:elevation="5dp"
    android:background="?attr/colorPrimary" />

<!-- The main content view -->
<fragment 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:id="@+id/fragment"
    android:name="com.***.***.***.MainActivityFragment"
    tools:layout="@layout/fragment_main" android:layout_width="match_parent"
    android:layout_height="match_parent" />

<!-- The navigation drawer -->
<ListView android:id="@+id/left_drawer"
    android:layout_width="240dp"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:choiceMode="singleChoice"
    android:divider="@android:color/transparent"
    android:dividerHeight="0dp"
    android:background="#111"/>

And here's the result: enter image description here

Probably need to specify a fixed height rather than use `wrap_content`? — stkent, May 17 '15 at 16:31
What if you remove minheight and maxHeight and use a specific size instead of wrap_content ? — inmyth, May 17 '15 at 16:32
Is this the only XML code you have ? are you not wrapping the code inside another view say, Frame layout or Relative Layout? — Kushal Sharma, May 17 '15 at 16:34
No I am @rogerthatcode .. By the way just for the sake of it I gave the hardcoded sizes a shot and it didn't work inmyth . — Anshu Dwibhashi, May 17 '15 at 16:36
The above code seems to be okay. It will be helpful if you can add more code.. — Kushal Sharma, May 17 '15 at 16:37
Can you try and put DrawerLayout and Toolbar inside a Frame Layout ? — Kushal Sharma, May 17 '15 at 16:39
Yup. Took the toolbar outside the drawer layout and wrapped them in a relative layout. Please post it as an answer so that I can accept it.. — Anshu Dwibhashi, May 17 '15 at 16:42

score 12 · Answer 1 · answered May 17 '15 at 16:45

12

The DrawerLayout is allowed only 2 children. From the documentation:

The main content view (the FrameLayout above) must be the first child in the DrawerLayout because the XML order implies z-ordering and the drawer must be on top of the content.

The main content view is set to match the parent view's width and height, because it represents the entire UI when the navigation drawer is hidden.

Try wrapping your Toolbar and fragment in a FrameLayout.

answered May 17 '15 at 16:45

queencodemonkey

431
2
5

Thanks.. I already got the answer though.. +1 (I know we're not supposed to make comments like these but I think that rule doesn't make sense, how else are we supposed to appreciate) – Anshu Dwibhashi May 17 '15 at 16:46
This explained the root cause of the issue rather than just a solution, thanks! – Jonathan Cameron Dec 21 '16 at 22:07

score 11 · Accepted Answer · edited Dec 29 '15 at 02:05

11

Possible solution will be to move the Toolbar outside the DrawerLayout and put those two inside a frame layout.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:paddingTop="?attr/actionBarSize"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!-- The main content view -->
        <fragment
            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:id="@+id/fragment"
            android:name="com.***.***.***.MainActivityFragment"
            tools:layout="@layout/fragment_main" android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <!-- The navigation drawer -->
        <ListView
            android:id="@+id/left_drawer"
            android:layout_width="240dp"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:choiceMode="singleChoice"
            android:divider="@android:color/transparent"
            android:dividerHeight="0dp"
            android:background="#111"/>

    </android.support.v4.widget.DrawerLayout>

    <!-- Replace the default action bar -->
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_height="?attr/actionBarSize"
        android:layout_width="match_parent"
        android:elevation="5dp"
        android:background="?attr/colorPrimary" />

</FrameLayout>

edited Dec 29 '15 at 02:05

eigenein

2,083
3
25
43

answered May 17 '15 at 16:45

Kushal Sharma

5,978
5
25
41

Just one final thing (sorry about that) my hamburger doesn't spin and animate to a back button though I've set `true ` in my styles – Anshu Dwibhashi May 17 '15 at 16:54
check out this post http://stackoverflow.com/questions/26434504/how-to-implement-drawerarrowtoggle-from-android-appcompat-v7-21-library – Kushal Sharma May 17 '15 at 16:56
That is actually the one that I followed.. I edited the styles in the original question so that you can see the big picture.. – Anshu Dwibhashi May 17 '15 at 16:57
if like this the `toolbar` will cover a part of `drawerlayout` – chinaanihchen Sep 18 '15 at 08:53
@chinaanihchen The attribute `android:paddingTop="?attr/actionBarSize"` on `DrawerLayout` will make sure the fragment inside will not be covered with `toolbar` as it is setting a padding equal to the height of `toolbar` – Kushal Sharma Sep 18 '15 at 09:00
@ Kushal Sharma. thanks for reply,I want when the `drawerlayout` showing to cover the `toolbar`,my content which is a `fragment` is match parent without `toolbar `,finally, i set `toolbar` and `FrameLayout` in a `LinearLayout`, `LinearLayout` and `Listview` in to `DrawerLayout ` – chinaanihchen Sep 18 '15 at 13:09
The paddingTop is not respected, replace the FrameLayout with LinearLayout. – Srneczek May 13 '16 at 16:03

Android Toolbar occupies full screen

2 Answers2