Android: Blur bitmap while ensuring text readability

Question

I am blurring a bitmap in my android app. This answer was quite helpful for that. The problem is that I am using white text on this image which is not visible if the contrast is not good enough, particularly for images which have a major white or yellow portion. I wanted to ask if there is a simple way to overcome this problem, somehow by making the image a bit dirty by adding shades of black or so. Spotify seems to do it very elegantly.

Any tutorials, guides etc that can be helpful? Any help would be appreciated.

You could potentially add a second layer that you would place between the blurred image (background) and the text (foreground), being a slightly transparent shade of black. This will "darken" the result of your blurred image and should help you reveal white text on any blurred image — NSimon, Apr 16 '16 at 14:46

Ryan · Accepted Answer · 2016-04-16T18:54:47.260

1

Adding a full scrim on top of your blurred image should do the trick.

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="@dimen/some_height"
        android:src="@drawable/placeholder"/>

    <View
        android:layout_width="match_parent"
        android:layout_height="@dimen/some_height"
        android:background="@color/full_image_scrim"/>

   <LinearLayout
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_gravity="center">

       <!-- Top layer views -->

   </LinearLayout>

</FrameLayout>

color.xml

<!-- 60% opaque black (use whatever transparent color works best for you) -->
<color name="full_image_scrim">#99000000</color>

edited Apr 16 '16 at 18:54

answered Apr 16 '16 at 14:59

Ryan

3,414
2
27
34

Thanks for the answer. While it definitely helps but the problem is that I have other views and images over the blurred image much like the Pink Floyd The Wall album image in my posted image above. And those images and views also get grayed out. I only need the background to be grayed out. I will think of a way to do this without graying out the other views. I am upvoting your answer. Will accept it if I am successful. – varunkr Apr 16 '16 at 15:19
@varunkr Are you using a `FrameLayout` in your view hierarchy? If so, you should be able to stack your views so that the scrim `View` only casts its scrim over your background image. I updated my answer to give an example of what your layout could look like. – Ryan Apr 16 '16 at 18:56
I was able to solve the problem however I did so programmatically since it was easier in my case, required less changes.. I did it by using one bitmap over another as suggested in the comment. But your answer also solves the problem, so I am accepting it. Thanks !! – varunkr Apr 16 '16 at 20:27

Android: Blur bitmap while ensuring text readability

1 Answers1