Collapsing toolbar with textShadow

3.7k views Asked by At

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.

3

There are 3 answers

0
iceman On

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);
0
Andrew On

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

0
Pruthviraj On

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