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>

Could you provide some code ? style.xml, your activity's xml, etc. I was able to replicated your issue, but I cannot guess your implementation. — xiaomi, Sep 23 '18 at 23:02
No point showing any java code as I don't do anything in there at the moment. I'm trying to get the themes sorted out before I start the main coding. It's all in styles.xml. I just need to apply a smooth image to the standard action bar. — nobody special, Sep 24 '18 at 00:40

score 0 · Answer 1 · answered Sep 23 '18 at 23:07

0

"android:background"

in your style change the background to each component in your layouts. You can change the color of your ActionBar with something like this.

<item name="android:navigationBarColor">@color/colorPrimary</item>

answered Sep 23 '18 at 23:07

Paolo Colombo

219
5
24

That would set a colour but I want to set the background to a image. – nobody special Sep 24 '18 at 00:19

score 0 · Accepted Answer · answered Sep 24 '18 at 01:43

0

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

answered Sep 24 '18 at 01:43

Ben P.

52,661
6
95
123

See https://stackoverflow.com/a/48844052/8298909 for more info about themes vs styles – Ben P. Sep 24 '18 at 01:44
Yes I knew I could add the drawable directly to the appBarLayout in activity_main.xml, but I was hoping there was a way in styles.xml to apply the background directly to the app bar background without affecting it's children, i.e. the same as adding the drawable to the layout component. I'm just trying to decouple as much styling from the code and layouts as possible, but this one has been frustrating, so my conclusion is to either use a flat colour in styles with android:backgroundTint or add the drawable to activity_main.xml appBarLayout. – nobody special Sep 24 '18 at 03:16
There's really nothing wrong with adding a background attribute to a view. Unless there are multiple attributes that you want to add with a single style, what's the difference between putting the `android:theme` attr vs `android:background` attr on the view? If you must use a style, though, just change `android:theme` to `style`, so that it only affects the AppBarLayout and not its children too. – Ben P. Sep 24 '18 at 03:19
Yes that's a good point. The allure of using styles.xml is just one of convenience, in having all styling in one place, but styling in the layouts is still preferable to styling in the java code. I shouldn't code so late at night, it's too easy to make mistakes or get stuck on the wrong idea, so thanks for setting me back on the correct path. – nobody special Sep 24 '18 at 04:27

score 0 · Answer 3 · answered Sep 24 '18 at 04:19

This is an example for the AppCompat-v7 Toolbar, the other Toolbar is a bit different when it comes to theme.

I can't really give you the answer that will suit you the most, and this code is only here to show you the way.

What changes is that the toolbar is using style instead of android:theme and it uses a new style AppTheme.Toolbar.

AppTheme.Toolbar groups your custom background, the theme for the views inside the toolbar (title, subtitle, etc) and the theme for the popup menu.

The theme for the children and the popup menu are separated so you can control each component separately.

Try to play with their parent attribute (from Dark to Light) and pick what is the best for you.

Into your styles.xml

<style name="AppTheme.Toolbar">
    <item name="android:background">@drawable/actionbar_background</item>
    <item name="popupTheme">@style/AppTheme.PopupOverlay</item>
    <item name="android:theme">@style/AppTheme.AppBarOverlay</item>
</style>

<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
    <!-- Change attribute of the toolbar views-->
</style>

<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Dark">
    <!--Change attribute of the menu-->
</style>

Into your activity_main.xml

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

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        style="@style/AppTheme.Toolbar"
        android:layout_height="?attr/actionBarSize" />

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

Problems styling ActionBar background with Drawable

3 Answers3