Problems styling ActionBar background with Drawable

Question

I have tried to add a image to the ActionBar background using this theme/style

<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="android:background">@drawable/actionbar_background</item>
</style>

But although the background is being changed, it's creating a weird effect on the title and menu button. It's as thought they are separate child views within the ActionBar (maybe they are, I'm not sure) and the Drawable is being applied to them individually.

I was hoping for a seamless Drawable being applied across the ActionBar. Is this possible or should I just give up, and instead just change the background with a flat colour?

activity_main.xml

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/layout_activity_main"
    tools:context=".MainActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBarLayout"
        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"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

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

    <include layout="@layout/content_main" />

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

styles.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="coordinatorLayoutStyle">@style/Widget.Support.CoordinatorLayout</item>
        <item name="colorAccent">@android:color/black</item>
        <item name="colorPrimary">@android:color/holo_blue_dark</item>
        <item name="colorPrimaryDark">@android:color/holo_blue_dark</item>
        <item name="android:textColor">@android:color/white</item>
        <item name="android:textColorSecondary">@android:color/white</item>
        <item name="android:textColorHint">@android:color/white</item>
    </style>

    <style name="AppTheme.NoActionBar">
        <item name="android:windowBackground">@drawable/no_actionbar_background</item>
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
        <item name="android:background">@drawable/actionbar_background</item>
    </style>

    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light">
        <item name="android:background">@android:color/black</item>
    </style>
</resources>

Answer 1

When you set the android:theme attribute of a view, the style you pass is applied to that view and all of its children. In your case, the AppBarLayout does (internally) use separate views for the title and the overflow menu button.

However, since the only thing your style seems to be doing is setting the android:background attribute, you could just set that directly on the AppBarLayout. So, replace this:

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

with this:

<android.support.design.widget.AppBarLayout
    android:id="@+id/appBarLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/actionbar_background">