3

Tengo una app donde tengo una toolbar y quiero hacer que tenga un efecto transparente con un pequeño blur, como puedo lograr esto

Aqui un ejemplo:

http://media.idownloadblog.com/wp-content/uploads/2014/11/Expedia-4.1.1.-for-iOS-iPhone-screenshot-001.png

1

2 respuestas 2

1

Para obtener un Toolbar transparente:

En tu Toolbar defines como background el color que pueda ser transparente o 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"/>

Para el caso transparente, dentro de /drawable agrega el archivo fondo 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>

Donde @android:color/transparent es un color transparente definido por el sistema, por lo tanto tu Toolbar sería completamente transparente:

introducir la descripción de la imagen aquí


Para tener un Toolbar con blur: podríamos modificar nuestro archivo /drawable/my_background.xml de esta forma :

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

y obtenemos:

introducir la descripción de la imagen aquí


7
  • pero y la opacidad? Commented el 12 oct. 2016 a las 23:55
  • define esto en el shape: android:startColor="@android:color/transparent" android:endColor="@android:color/transparent"
    – Jorgesys
    Commented el 12 oct. 2016 a las 23:57
  • si, pero eso le daria una opacidad de 0, no? yo lo que quiero es que se alcance a ver lo que hay detras de la toolbar, no se si me doy a entiender Commented el 12 oct. 2016 a las 23:58
  • Si Gus, si defines el color transparente la opacidad es 0 por lo tanto se mostraría lo que esta detras del Toolbar.
    – Jorgesys
    Commented el 13 oct. 2016 a las 0:00
  • si viste la foto de mi post? ese en un ejemplo de lo que quiero lograr... Commented el 13 oct. 2016 a las 0:01
0

Entiendo que lo que quieres hacer es el efecto de blur del fondo con una imagen. Para ello te recomiendo una librería llamada Picasso Transformations que complementa a la bien conocida 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);

}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.