Android - Toolbar with opacity and blur

3

I have an app where I have a toolbar and I want to make it have a transparent effect with a little blur, how can I achieve this

Here is an example:

link

    
asked by Gustavo Serna 13.10.2016 в 01:02
source

2 answers

1

To get a transparent Toolbar:

In your Toolbar you define as background the color that can be transparent or blur:

 <android.support.v7.widget.Toolbar
        android:id="@+id/my_toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:background="@drawable/my_background"        
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

For the transparent case, within /drawable add the background file my_background.xml :

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient
    android:angle="90"
    android:startColor="@android:color/transparent"
    android:endColor="@android:color/transparent"
    android:type="linear" />
</shape>

Where @android:color/transparent is a transparent color defined by the system, therefore your Toolbar would be completely transparent:

To have a Toolbar with blur: we could modify our file /drawable/my_background.xml in this way:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <gradient
        android:angle="90"
        android:startColor="#FFFFFFFF"
        android:endColor="#00FFFFFF"
        android:type="linear" />
</shape>

and we get:

answered by 13.10.2016 / 01:22
source
0

I understand that what you want to do is blur the background with an image. For this I recommend a library called Picasso Transformations that complements the well-known Picasso :

ImageView fondoBlur;
Picasso.with(fondoBlur.getContext())
          .load(url)
          .transform(new BlurTransformation(getContext(), 25, 1))
          .transform(new ColorFilterTransformation(Color.argb(170, 0, 0, 0)))
          .fit()
          .centerCrop()
          .error(R.drawable.logo)
          .into(fondoBlur);

}
    
answered by 13.10.2016 в 08:59