Darken an image in CollapsingToolbarLayout or Image Scrim

Hi, to habrazhiteli and amateur professionals developing for Android. In this article I want to share with you in my opinion the necessary and interesting information. It will be a question of such a thing as Image Scrim (I’ll say right away that I introduced this concept on my own).

Foreword

Not so long ago, while developing a project, I ran into a bit of a nuisance. The project was related to data acquisition through the Dribbble API. When I received the image and sorted it in RecyclerView, I had to transfer the image from one activity to another. Since in this project it was necessary to use modern solutions, when I clicked on an item in RecyclerView, I decided to implement it using CollapsingToolbarLayout and insert Image into it.
To make it clearer what I'm talking about (read “do not pour water”), I will give an example:



As you can see on this gif, the image is located on a white background and if not for the Image Scrim, which I implemented, then the name of the image “Happy Octopus” would not be visible (white font on the white image).
')
Well, now proceed to the implementation.

Implementation

In fact, the so-called. Image Scrim is the usual View elements inside CollapsingToolbarLayout.

1. In the required layout after the image inside CollapsingToolbarLayout we create two custom views, for example:

<android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:layout_scrollFlags="scroll|exitUntilCollapsed" app:expandedTitleTextAppearance="@style/TextAppearance.AppCompat.Large"> <ImageView android:id="@+id/image_shot" android:layout_width="match_parent" android:layout_height="@dimen/shot_image_height" android:background="@color/colorPrimary" android:scaleType="centerCrop" app:layout_collapseMode="parallax" /> <View android:layout_width="match_parent" android:layout_height="@dimen/text_scrim_height_top" android:background="@drawable/scrim_top" app:layout_collapseMode="pin"/> <View android:layout_width="match_parent" android:layout_height="88dp" android:layout_gravity="@dimen/text_scrim_height_bottom" android:layout_alignBottom="@+id/image_shot" android:background="@drawable/scrim_bottom"/>... 

2. Create 2 files in drawable, which are responsible for the shadow from the upper edge and the lower image and name them accordingly:

scrim_top.xml

 <shape xmlns:android="http://schemas.android.com/apk/res/android"> <gradient android:angle="270" android:startColor="@color/translucent_scrim_top" android:centerColor="@color/translucent_scrim_top_center" android:endColor="@android:color/transparent"/> </shape> 

scrim_bottom.xml

 <shape xmlns:android="http://schemas.android.com/apk/res/android"> <gradient android:angle="90" android:startColor="@color/translucent_scrim_bottom" android:centerColor="@color/translucent_scrim_bottom_center" android:endColor="@android:color/transparent"/> </shape> 

3. Add colors to colors:

 <color name="translucent_scrim_top">#33000000</color> <color name="translucent_scrim_top_center">#26000000</color> <color name="translucent_scrim_bottom">#4D000000</color> <color name="translucent_scrim_bottom_center">#40000000</color> 

With the transparency of colors, you can play around to find smoother colors.

4. In dimens.xml, add the following lines:

 <dimen name="text_scrim_height_top">50dp</dimen> <dimen name="text_scrim_height_bottom">88dp</dimen> 

By the method of typing, I found out that these indents from the upper and lower edges are excellent for an image of 300 dp, so if you have an equilateral image, then you can play around with dp, that is, bring it into line with your design principles.

PS I hope the article was helpful. I will be glad to answer all questions, if any.

PPS You may also find the following small tablet with alpha color channels in order to select the desired transparency for Image Scrim.