CollapsingToolbarLayout-暗化/模糊背景图片

Question

I've got a collapsing toolbar with an imageview. When extended, it looks like this:

When collapsed, it looks like this:

I know that according to the guidelines, the toolbar should be of the primary color while collapsed, but i like the way i've set it up, and would like to keep it like that.

However, obviously, the toolbar title won't be visible if the image has a lot of white in it. So, is there a way i can blur/dim the background so that the toolbar title is visible at all times?

Edit: The image in question, is loaded from the internet using Picasso.

Answer 1

If you are using Picasso to display the image, then you can leverage the Transformation object in Picasso's builder and create a Blur effect class with something like this:

public class BlurEffect implements Transformation {
  private static final int UP_LIMIT = 25;
  private static final int LOW_LIMIT = 1;
  protected final Context context;
  private final int blurRadius;

  public BlurEffect(Context context, int radius) {
    this.context = context;

    if (radius < LOW_LIMIT) {
      this.blurRadius = LOW_LIMIT;
    } else if (radius > UP_LIMIT) {
      this.blurRadius = UP_LIMIT;
    } else {
      this.blurRadius = radius;
    }
  }

  @Override public Bitmap transform(Bitmap source) {

    Bitmap blurredBitmap;
    blurredBitmap = Bitmap.createBitmap(source);

    RenderScript renderScript = RenderScript.create(context);

    Allocation input =
        Allocation.createFromBitmap(renderScript, source, 
Allocation.MipmapControl.MIPMAP_FULL,
            Allocation.USAGE_SCRIPT);

    Allocation output = Allocation.createTyped(renderScript, input.getType());

    ScriptIntrinsicBlur script =
        ScriptIntrinsicBlur.create(renderScript, 
Element.U8_4(renderScript));

    script.setInput(input);
    script.setRadius(blurRadius);

    script.forEach(output);
    output.copyTo(blurredBitmap);

    return blurredBitmap;
  }

  @Override public String key() {
    return "blurred";
  }
}

Then you can use it from Picasso in this way, the more value in second parameter in the constructor, then blurer:

Picasso.with(appBarImage.getContext())
      .load(track.getUrl())
      .transform(new BlurEffect(this, 10))
      .into(appBarImage);

Answer 2

My not optimal solution to this problem was to overlap two images, the normal and the blurred one, and change the alpha of the blurred one. When expanded, the alpha is 0. When collapsed its alpha is one. I used

AppBarLayout.addOnOffsetChangedListener

to get the scroll event. In my case

 appBarLayout.addOnOffsetChangedListener((view, verticalOffset) -> {
        if (mScrollRange == 0) {
              mScrollRange = appBarLayout.getTotalScrollRange();
        }
        ViewCompat.setAlpha(mBlurredImage,
                (float) (1 - Math.pow(((mScrollRange + verticalOffset) / (float) mScrollRange), 4)));
 });

It is not ideal but it does its work

Answer 3

You could use Blurry library

Blurry is an easy blur library for Android

// from Bitmap 
Blurry.with(context).from(bitmap).into(imageView);

//use with Picasso

 Blurry.with(MainActivity.this)
                .radius(10)
                .sampling(8)
                .async()
                .capture(findViewById(R.id.image_veiw))
                .into((ImageView) findViewById(R.id.image_veiw));

Answer 4

Ok, So, i just ended up using android:tint in the layout file in order to add a grayish tint to the image.For reference, the tint value i set is #55000000 . This seems to make the title visible even on entirely white backgrounds.

Answer 5

You can use scrim for this. create gradient file in drawable folder.

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
    android:angle="-90"
    android:startColor="#00000000"
    android:centerColor="#00000000"
    android:endColor="#4d000000"
    android:type="linear" />
</shape>

After creating the above file add an extra view to your layout like this

<FrameLayout>
<ImageView>
<View
android:background="@drawable/nameOfAboveFile"/>
<TexTView>
</FrameLayout>