CollapsingToolbarLayout - 背景画像を薄暗くする

Question

私は画像ビューで崩壊しているツールバーを持っています。延長する場合は、次のようになります。

崩壊

が、それは次のようになります。

私はガイドラインによると、ツールバーが原色であるべきことを知っている

崩壊したが、私はそれを設定した方法が好きで、そのように保ちたいと思う。

ただし、画像に白い部分が多い場合、ツールバーのタイトルは表示されません。ですから、ツールバーのタイトルが常に表示されるように、背景をぼかす/暗くする方法はありますか？

編集：問題の画像はPicassoを使用してインターネットから読み込まれます。

Answer 1

この問題に対する私の最適でない解決策は、2つの画像、通常画像とぼかし画像を重ねて、ぼかし画像のアルファを変更することでした。展開すると、アルファは0になります。アルファは1つです。私はスクロールイベントを得るために

AppBarLayout.addOnOffsetChangedListener 

を使用しました。私の場合は

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

それは理想的ではないが、それは

Answer 2

あなたはBlurry library

ぼやけは、Android

のための簡単なぼかしライブラリ

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

で使用することができ、その作業を行います//ピカソで使用

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

Answer 3

[OK]を、ので、私はちょうどimage.For参照に灰色がかった色合いを追加するために、レイアウトファイルにandroid:tintを使用して終了は、私が設定色合い値は#55000000です。これは完全に白い背景でもタイトルを見えるようにしているようです。

Answer 4

これにはscrimを使用できます。 Drawableフォルダにグラデーションファイルを作成します。上記のファイルを作成した後

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

あなたが画像を表示するためにピカソを使用している場合、あなたはピカソのビルダーに変換オブジェクトを活用して作成することができます。この

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

Answer 5

のようなあなたのレイアウトに余分なビューを追加

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"; 
    } 
} 

次にあなたは、このような方法で、ピカソから、コンストラクタの2番目のパラメータでより多くの価値をそれを使用することができ、このような何かを持つブラーエフェクトクラスn blurer：

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