Android actionbar behaving strangely

Question

I am trying to create a good looking SearchView. I used this code and integrated it in my DrawerLayout. This is the current XML of my main activity:`

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <include
        layout="@layout/main_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <include layout="@layout/app_bar_main"/>
        <include layout="@layout/app_bar_main_search"
            android:visibility="gone"/>

    </RelativeLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        android:visibility="gone"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer" />

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

This is my app_bar_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar android:id="@+id/toolbar"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    app:titleTextColor="@color/white"
    android:layout_alignParentTop="true"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/colorPrimary"
    android:theme="@style/AppTheme.AppBarOverlay"/>

My app_bar_main_search.xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar android:id="@+id/searchtoolbar"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    app:collapseIcon="@drawable/ic_arrow_left"
    app:titleTextColor="@color/colorPrimary"
    android:layout_alignParentTop="true"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/white"/>

My main_layout.xml is just a file with a FAB and an empty constraintlayout.

The code above works, but the main layout is underneath the actionbar and the NavigationDrawer icon in the top-left corner stopped working (except if I take the NavigationDrawer out by swiping, then it starts working again for some reason). Removing the RelativeLayout around the actionbars makes the app_bar_main cover the entire screen. Assigning an ID to the app_bar_main makes it entirely empty, just a background color.

What am I doing wrong? How can I get the main layout below the actionbar?

EDIT: I got the toolbar working with @FAT's answer, but the navigationdrawer icon still isn't working. This is the relevant code:

    drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
    toggle = new ActionBarDrawerToggle(
            this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
    drawer.addDrawerListener(toggle);
    toggle.syncState();
    NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
    navigationView.setNavigationItemSelectedListener(this);
    navigationView.getMenu().getItem(0).setChecked(true);

I tried adding the syncState() to the onPostCreate but this did not change anything. The onOptionsItemSelected function also does not get called when I click the icon.

Answer 1

DrawerLayout should have at most two views. Inside the DrawerLayout, add one view that contains the main content for the screen (your primary layout when the drawer is hidden) and another view that contains the contents of the navigation drawer.

See documentation

To use a DrawerLayout, position your primary content view as the first child with width and height of match_parent and no layout_gravity>. Add drawers as child views after the main content view and set the layout_gravity appropriately. Drawers commonly use match_parent for height with a fixed width.

1. Keep your main_layout inside first direct child RelativeLayout.

2. Add attribute android:layout_below="@id/app_bar_main" to main_layout.

Update your layout XML as below:

<android.support.v4.widget.DrawerLayout 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/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <include
            android:id="@+id/appbar" 
            layout="@layout/app_bar_main"/>

        <include layout="@layout/app_bar_main_search"
            android:visibility="gone"/>

        <include
            layout="@layout/main_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@id/appbar"/>

    </RelativeLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        android:visibility="gone"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer" />

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

Hope this will help~