Add a shadow over the bottom of the ImageView in CordinatorLayout

Question

Recently I am implementing a material design to my existing application. For this I am using the following library : http://android-developers.blogspot.com/2015/05/android-design-support-library.html to achieve the following effect : https://plus.google.com/+AndroidDevelopers/posts/XUDGFS9eYxg.

My layout code is like below:

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="350dp"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginBottom="32dp"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/event_image"
                android:layout_width="fill_parent"
                android:layout_height="350dp"
                android:background="@color/white"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/anim_toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView

--------

   </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="30dp"
        android:clickable="true"
        android:src="@drawable/ic_action_share"
        app:layout_anchor="@+id/appbar"
        app:layout_anchorGravity="bottom|right|end" />

</android.support.design.widget.CoordinatorLayout>

I achieve the desired effect but I have a problem with the image and the Text. The text is white color and when it happens that I have an image that in most part of it consist of white color, the text label cannot be read.

Any suggestion how to solve it, without destroying the effect?

score 2 · Answer 1 · answered Jun 26 '15 at 13:04

Thanks to @m vai for giving me the hint, I used another approach. I create a FrameLayout and inside I put the ImageView and also GradientView. Then I passed all the animation attributes to the FrameLayout. Its was quite simple at the end. So instead of ImageView should be the following code:

  <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_collapseMode="parallax"
                android:fitsSystemWindows="true">

                <RelativeLayout
                    android:id="@+id/title_layout"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content">

                    <ImageView
                        android:id="@+id/event_image"
                        android:layout_width="fill_parent"
                        android:layout_height="350dp"
                        android:background="@color/white"
                        android:scaleType="centerCrop"
                       />

                </RelativeLayout>

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

The XML file is like below:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">

    <size android:height="100dp"/>

    <gradient
        android:angle="270"
        android:startColor="#0000"
        android:endColor="#b000"/>

</shape>

score 1 · Answer 2 · answered Dec 07 '15 at 15:47

This can also be solved by using a shadow on the text.

For example, apply this example style to the TextView and even white text on a white image would be totally visible.

<style name="ShadowTextStyle" parent="@android:style/TextAppearance">
    <item name="android:textSize">35sp</item>
    <item name="android:textStyle">bold</item>
    <item name="android:textColor">@color/White</item>
    <item name="android:layout_marginLeft">40dp</item>
    <item name="android:layout_marginBottom">10dp</item>
    <item name="android:shadowColor">@android:color/black</item>
    <item name="android:shadowDx">0</item>
    <item name="android:shadowDy">0</item>
    <item name="android:shadowRadius">25</item>
</style>

Result:

score 0 · Answer 3 · answered Jun 26 '15 at 09:49

0

You could use the Palette library.

int myColor;
Bitmap b = ... //your image
Palette.Swatch swatch = Palette.from(b).generate().getVibrantSwatch();
if (swatch != null) {
    myColor = swatch.getTitleTextColor();
}

With just a few lines it lets you analyze the image and extract the most appropriate text color, which will have a good contrast with the image behind.

Color can then be set on your CollapsingToolbarLayout.

CollapsingToolbarLayout ctl = (CollapsingToolbarLayout) findViewById(R.id.ctl);
ctl.setExpandedTitleColor(myColor);

answered Jun 26 '15 at 09:49

natario

24,954
17
88
158

I tried the above solution. It would be the right one if the image is simple in colors, and not consisting words in it. So the ideal one is not to change the color of the text, but to create something in form of a shadow at the bottom of the `ImageView`. – Xhulio Jun 26 '15 at 12:42
1

I see. You might try to define a GradientDrawable in XML ranging from black to transparent, and put it as a second in your layout. – natario Jun 26 '15 at 12:44
1

[This question](http://stackoverflow.com/q/30902812/4288782) is what you are looking for. – natario Jun 26 '15 at 12:49
Thank you for the hint. I have used this solutions in the past, when I was trying to animate the ActionBar like PlayStore. It was still Android Kit Kat back then. – Xhulio Jun 26 '15 at 13:06

score 0 · Answer 4 · answered Nov 03 '18 at 07:06

You can apply below solution also;

  <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_collapseMode="parallax"
        android:fitsSystemWindows="true">

        <RelativeLayout
            android:id="@+id/title_layout"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content">

            <ImageView
                android:id="@+id/ivRestaurantImage"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/gradient"
                android:scaleType="fitXY"
                android:src="@drawable/second_img" />

        </RelativeLayout>

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

gradient.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">

<gradient
    android:angle="90"
    android:startColor="#00ffffff"
    android:endColor="#aa000000"
   />
</shape>

Add a shadow over the bottom of the ImageView in CordinatorLayout

4 Answers4