Text background issue on Toolbar

Question

When adding some alpha to my Toolbar background color, I notice there is a background applied to the title's TextView:

Here is my layout:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
         xmlns:tools="http://schemas.android.com/tools"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         xmlns:app="http://schemas.android.com/apk/res-auto"
         android:background="#0099cc">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:theme="@style/FullscreenActionBarStyle"
        app:titleTextAppearance="@style/ActionBarTitle"/>

    <ImageView
        android:id="@+id/fullscreen_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/image"/>

</FrameLayout>

And my styles.xml:

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

        <item name="android:windowActionBar">false</item>
        <item name="windowActionBar">false</item>
    </style>

    <style name="FullscreenTheme" parent="AppTheme">
        <item name="android:windowBackground">@null</item>
        <item name="metaButtonBarStyle">?android:attr/buttonBarStyle</item>
        <item name="metaButtonBarButtonStyle">?android:attr/buttonBarButtonStyle</item>

        <item name="android:actionBarStyle">@style/FullscreenActionBarStyle</item>
        <item name="android:windowActionBarOverlay">true</item>
        <!--For compatibility-->
        <item name="actionBarStyle">@style/FullscreenActionBarStyle</item>
        <item name="windowActionBarOverlay">true</item>
    </style>

    <style name="FullscreenActionBarStyle" parent="Widget.AppCompat.ActionBar">
        <item name="background">@color/black_overlay</item>
        <item name="android:background">@color/black_overlay</item>
    </style>

    <style name="ActionBarTitle" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
        <item name="android:textSize">50sp</item>
    </style>
</resources>

"black_overlay" color value is #66000000

I am using AppCompat and Support libraries v24.2.1.

Do you have any idea on how to get rid of this text background?

Cheers.

score 10 · Answer 1 · edited May 23 '17 at 12:01

10

As you can see in the following issue, the problem comes from the attribute app:theme. It is applied to every view that a viewgroup inflate. Replace app:theme by style:

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

edited May 23 '17 at 12:01

Community

1
1

answered Nov 21 '16 at 16:17

NitroG42

5,336
2
28
32

perfect, and the cool thing is that you can use the `app:theme` at the same time and set all the properties you want except for the background keep it in `style` – Bassem Wissa Dec 24 '17 at 13:38

score 0 · Answer 2 · answered Sep 23 '16 at 08:19

Alright, removing the background properties on the FullscreenActionBarStyle style and putting it in the Toolbar layout definition make it work. As @apelsoczi pointed out, settings these properties in the toolbar style also apply them on children components.

score -1 · Answer 3 · answered Sep 22 '16 at 13:45

-1

Encapsulate a TextView inside the Toolbar and set the value of that.

<android.support.v7.widget.Toolbar
        ...>
        <TextView ... />
</android.support.v7.widget.Toolbar>

answered Sep 22 '16 at 13:45

apelsoczi

1,102
8
11

Well, it's a hacky workaround, and not the best solution :D – riot Sep 22 '16 at 15:32
If this works for you - please select the answer as the chosen solution to officially close the question on StackOverflow. A bit of insight as to why this happens: keep in mind the Toolbar is a ViewGroup with multiple child layouts and other Views, the properties which you change for the ViewGroup will always be inherited by the children. – apelsoczi Sep 22 '16 at 20:10

Text background issue on Toolbar

3 Answers3

Linked