Android Coordinator Layout: Toolbar below AppBarLayout

Question

I'm trying to develop a simple test app using the android design support library but I can't understand why the Toolbar appears below th AppBarLayout:

My styles.xml is:

<resources>

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>

    <!-- ActionMode -->
    <item name="windowActionModeOverlay">true</item>
    <item name="android:windowActionModeOverlay">true</item>
    <item name="android:actionModeBackground">@color/colorAccent</item>
    <item name="android:actionModeSplitBackground">@color/colorPrimary</item>
    <item name="android:actionModeStyle">@style/AppTheme.ActionMode</item>
</style>

<style name="AppTheme.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
</style>

<style name="AppTheme.ActionMode" parent="@style/Widget.AppCompat.ActionMode">
    <item name="android:background">?android:attr/actionModeBackground</item>
    <item name="android:backgroundSplit">?android:attr/actionModeSplitBackground</item>
    <item name="android:height">?android:attr/actionBarSize</item>
    <!--<item name="android:titleTextStyle">@android:style/TextAppearance.Widget.ActionMode.Title</item>
    <item name="android:subtitleTextStyle">@android:style/TextAppearance.Widget.ActionMode.Subtitle</item>-->
</style>

<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

</resources>

And my layout is:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
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/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity">

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

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

<fragment android:id="@+id/items_fragment"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    class="it.bmsoftware.advancedrecyclerapp.MainFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:tag="items_fragment"
    tools:layout="@layout/fragment_recycler" />

</android.support.design.widget.CoordinatorLayout>

Does anyone known what I'm missing?

Thanks in advance :)

Answer 1

AppbarLayout just wraps the Toolbar to make it fixed on Actionbar. And view the code again.

Another problem is that you are using AppTheme in the Editor preview of Android studio which is not correct if you are using Toolbar then choose NoActionBar theme and then you will see the toolbar first. I think you are supposing the Appbarlayout top of your toolbar but actually its Actionbar.