Collapsing toolbar with textShadow

Question

I have a problem with collapsing toolbar, on expanded state I want a blurry shadow under the text, I use this code:

collapsingToolbar.setExpandedTitleTextAppearance(R.style.toolbar_text);

with :

<style name="toolbar_text">
    <item name="android:textColor">@color/white</item>
    <item name="android:shadowColor">@color/black</item>
    <item name="android:shadowDx">2</item>
    <item name="android:shadowDy">2</item>
    <item name="android:shadowRadius">4</item>
</style>

I can change the textColor, it works but the shadow doesn't work. I have tried many different value for shadow.

Is it possible to cast a shadow to the collapsed text? Because on light images the title is sometimes hard to read.

no, it's related to the Google appcompat lib. Maybe wait for an update. — neoteknic, Jul 19 '15 at 09:55

score 5 · Answer 1 · edited May 23 '17 at 12:25

5

Instead of using a textshadow, use a text protection scrim. See this question: Android CollapsingToolbarLayout Title background

edited May 23 '17 at 12:25

Community

1
1

answered Sep 01 '15 at 17:58

Andrew

2,898
4
25
23

iceman · Answer 2 · 2015-08-20T07:07:04.137

Looks like, as of design support lib version 22.2.1, it is not possible.

Here's the de-compiled method for setting text appearance:

void setExpandedTextAppearance(int resId) {
    TypedArray a = this.mView.getContext().obtainStyledAttributes(resId, styleable.TextAppearance);
    if(a.hasValue(styleable.TextAppearance_android_textColor)) {
        this.mExpandedTextColor = a.getColor(styleable.TextAppearance_android_textColor, 0);
    }

    if(a.hasValue(styleable.TextAppearance_android_textSize)) {
        this.mExpandedTextSize = (float)a.getDimensionPixelSize(styleable.TextAppearance_android_textSize, 0);
    }

    a.recycle();
    this.recalculate();
}

And it is setting only text colour and size.

UPDATE: Since you mentioned that you need to add shadow to the title to make it easier to read on light backgrounds, I suggest you change the expanded title colour to a dark shade. E.g.

collapsingToolbar.setExpandedTitleColor(0x000);

score 0 · Answer 3 · answered Sep 28 '15 at 09:37

I have Acheived text shadow by the following code. I have used FrameLayout in the position of ImageView and FrameLayout has both ImageView and View with background gradient.

        <ImageView
            android:id="@+id/groupIcon"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            android:scaleType="centerCrop"
            android:src="@drawable/drawer_header_background"
            app:layout_collapseMode="parallax" />

        <View
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/coll_toolbar_image_gradient" />
    </FrameLayout>

coll_toolbar_image_gradient.xml

<gradient
    android:angle="90"
    android:centerColor="#00ffffff"
    android:endColor="#aa000000"
    android:startColor="#aa000000" />
<corners android:radius="0dp" />

Collapsing toolbar with textShadow

3 Answers3

coll_toolbar_image_gradient.xml