Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Text background issue on Toolbar

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

Toolbar title background

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.

like image 756
riot Avatar asked Feb 07 '23 02:02

riot


1 Answers

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"/>
like image 67
NitroG42 Avatar answered Feb 13 '23 06:02

NitroG42