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:
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:
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);
}