Appcompat Toolbar Not Showing With Navigation Drawer

Question

I am trying to configure the following in my app:

Toolbar (Appcompat v7 version)
Navigation Drawer
Pre-Lollipop Appcompat v7 Material theme

I followed the instructions here: http://android-developers.blogspot.com/2014/10/appcompat-v21-material-design-for-pre.html

However, after declaring .NoActionBar in the theme, as well as putting the toolbar in the layout, my toolbar does not show. What I end up getting is exactly what you'd expect when declaring no action bar -- no action bar. Here is the layout:

<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"
    android:orientation="vertical"
    tools:context=".MainActivity">

<!-- Toolbar -->
<include layout="@layout/toolbar"/>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/layout_main"
    android:layout_width="match_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">

    <Spinner
        android:id="@+id/spinner_main"
        android:visibility="gone"
        android:textAlignment="center"
        android:gravity="center"
        android:layout_gravity="center_horizontal"
        android:entries="@array/error_loading_content_array"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"/>

    <FrameLayout
        android:id="@+id/container"
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="0px"></FrameLayout>

</LinearLayout>

<fragment
    android:id="@+id/navigation_drawer"
    android:layout_width="@dimen/navigation_drawer_width"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:name=".NavigationDrawerFragment"
    tools:layout="@layout/fragment_navigation_drawer"/>

Toolbar.xml:

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

In MainActivity.java:

// Load view/layout
setContentView(R.layout.guidelib_activity_main);

// TODO: Toolbar not showing
mToolbar = (Toolbar)findViewById(R.id.toolbar);
setSupportActionBar(mToolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setHomeButtonEnabled(true);

Solution

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/linearlayout_root_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <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=".MainActivity">

        <LinearLayout
            android:id="@+id/layout_main"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <!-- Toolbar -->
            <!-- Moved up to new LinearLayout root tag -->
            <!--<include layout="@layout/toolbar"/>-->
            ...

what does this style look like `"@style/ThemeOverlay.AppCompat.Dark.ActionBar"` — tyczj, Oct 26 '14 at 03:06
@tyczj It's an Android provided style. ``. Even if I change the theme, it still does not show my Toolbar. — user1234, Oct 26 '14 at 03:11
You should not be using any theme that says actionbar because there is no actionbar — tyczj, Oct 26 '14 at 03:43
Your DrawerLayout should have 2 views inside (3 in your case) — Gabriele Mariotti, Oct 26 '14 at 07:50
@tyczj Ah okay. I was just following the 'styling' advice in the link. — user1234, Oct 26 '14 at 17:12
@GabrieleMariotti Might have something to do with the answer. — user1234, Oct 26 '14 at 17:13
@tyczj Scroll down to _styling_ and right under it you will see _dark action bar_. It described how to achieve a toolbar that looks like a dark action bar. `app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"` — user1234, Oct 26 '14 at 17:23

score 40 · Accepted Answer · answered Oct 26 '14 at 08:54

40

DrawerLayout extends FrameLayout, but you are treating it like a LinearLayout. You can either wrap your tag and the following LinearLayout in another LinearLayout, or you can move your tag.

Also, "fill_parent" is deprecated and maps to "match_parent" so you should just use the latter. You can also remove the additional xmlns attributes in your LinearLayout element.

<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=".MainActivity">

    <LinearLayout
        android:id="@+id/layout_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

            <!-- Toolbar -->
            <include layout="@layout/toolbar"/>
            ...

Your original layout did not work because the Toolbar was hidden (z-ordered) behind the LinearLayout.

answered Oct 26 '14 at 08:54

alanv

23,966
4
93
80

Thanks mate. I moved the toolbar and the previous LinearLayout into a LinearLayout. The toolbar properly displays now. I've noticed that the navigation drawer now displays on top of the toolbar. I did remember reading somewhere that this is intended in _Lollipop_. However, I want the navigation drawer to remain _under_ the toolbar, much like as you see in the newly updated Google Play app. Any input? – user1234 Oct 26 '14 at 17:16
1

@user1234 In this case, move the toolbar outside the drawer layout. – Gabriele Mariotti Oct 26 '14 at 17:20
@GabrieleMariotti Right. However, the Toolbar won't display outside of the LinearLayout, as discovered. DrawerLayout is also the root tag in this activity's layout, so I can't place it outside the DrawerLayout either. – user1234 Oct 26 '14 at 17:25
2

@GabrieleMariotti Sorry, noob mistake. Just woke up and still drinking my Joe;) I moved the DrawerLayout, previous root tag into a new root tag of LinearLayout. I put the Toolbar first inside this LinearLayout, and then the DrawerLayout (also containing everything else) second. I'll update my question with the fix. – user1234 Oct 26 '14 at 17:30
Can you please take a look at my question here? I have a similar problem but with different layout: http://stackoverflow.com/questions/27077391/why-does-toolbar-in-appcompat-not-show-when-using-as-an-actionbar – Loolooii Nov 22 '14 at 13:57

Appcompat Toolbar Not Showing With Navigation Drawer

1 Answers1

Linked

Related