android:elevation applied to toolbar AND its title

user_6418277 0
Viewed 1061

I use a very simple style to format my Toolbar, I use android:elevation to display a shadow under the Toolbar like this:

<style
    name="AppToolbarTheme"
    parent="AppTheme">

    <item name="android:background">@color/colorPrimary</item>
    <item name="android:titleTextColor">@android:color/white</item>
    <item name="android:elevation">4dip</item>
</style>

And I'm applying it simply like that:

<Toolbar
    android:id="@+id/main_toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppToolbarTheme"/>

The shadow displays under the toolbar like I want, howerver it is also somehow applied to the title of the toolbar which looks very weird:

enter image description here

android
3 Answers

I was looking at this and helped me to identify my mistake, which I think it is the same as yours:

You are using style properties (Widget) in a theme. Theme are used to define global properties such as colorOnSurface, colorSurface, primaryColor, etc. Here you are using:

<item name="android:background">@color/colorPrimary</item>
<item name="android:titleTextColor">@android:color/white</item>
<item name="android:elevation">4dip</item>

which are specific to a toolbar.

I recommend to define a style like below (you can set whatever parent you want as long as it is Widget.whatever.Toolbar)

<style name="Widget.Toolbar" parent="Widget.MaterialComponents.Toolbar.Surface">
    <item name="elevation">4dp</item>
</style>

<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    style="@style/Widget.Toolbar"/>

What I am doing at the moment is using appbar, so you can apply elevation there instead:

<com.google.android.material.appbar.AppBarLayout
    android:id="@+id/appbar"
    android:theme="@style/Theme.AppBarTheme"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

</com.google.android.material.appbar.AppBarLayout>

<style name="Theme.AppBarTheme">
    <item name="elevation">6dp</item>
    <item name="toolbarStyle">@style/Widget.Toolbar</item>
</style>

<style name="Widget.Toolbar" parent="Widget.MaterialComponents.Toolbar.Surface">
    <item name="android:titleTextColor">@android:color/white</item>
</style>
user_59239730

You use

android:theme="@style/AppToolbarTheme"

in your toolbar and in that case it add elevation to nested components as well 'cause you define a theme.

Use

style="@style/AppToolbarTheme"

instead.

user_5278080
Related