Efecto de ondulación de material oculto por otra vista en el diseño

He añadido un efecto de rizo en un ImageButton , sin embargo, está oculto por un ImageView utilizado como fondo para la vista padre RelativeLayout .

Aquí está el archivo de diseño:

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="172dp" android:orientation="vertical" android:theme="@style/ThemeOverlay.AppCompat.Dark"> <ImageView android:id="@+id/drawerBackgroundImageView" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" android:src="@drawable/drawer_background"/> [...] <ImageButton android:id="@+id/drawerLogoutButton" android:layout_width="32dp" android:layout_height="32dp" android:layout_alignBottom="@id/drawerEmailTextView" android:layout_alignParentEnd="true" android:layout_alignParentRight="true" android:layout_marginEnd="@dimen/activity_horizontal_margin" android:layout_marginRight="@dimen/activity_horizontal_margin" style="@style/FlatButtonStyle" android:scaleType="centerInside" android:src="@drawable/ic_logout_white_24dp"/> </RelativeLayout> 

(hay un montón de otras vistas, pero son irrelevantes aquí)

Estoy usando un ImageView como el fondo para RelativeLayout como necesito fijar un scaleType específico para la imagen, así que no puedo utilizar la característica básica del android:background .

El efecto de rizado está oculto, ya que no tiene una capa de máscara (quiero que se extienda fuera de los límites del botón) y, por tanto, utiliza la vista principal de ImageButton para mostrar. El efecto es perfectamente visible si ImageView el ImageView .

¿Hay una manera de obtener el efecto de rizo que se muestra por encima de la problemática ImageView ?

Tenía exactamente el mismo problema y lo solucioné usando este hilo: https://code.google.com/p/android/issues/detail?id=155880

Vista preliminar del problema:

Antes de resolver:

antes de

Después de resuelto:

Después

Explicación:

"Los botones sin bordes dibujan su contenido en el fondo más cercano, es posible que su botón no tenga fondo entre sí y el ImageView , por lo que dibuja debajo del ImageView ."

Solución:

"Utilice un fondo transparente ( android:background="@android:color/transparent" ) en algún diseño que contenga el botón (debajo del ImageView ). Esto determinará cuáles son los límites máximos del efecto ripple."

 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" ...> <!-- Your background ImageView --> <ImageView android:id="@+id/drawerBackgroundImageView" android:src="@drawable/drawer_background" ... /> <!-- ... --> <!-- HERE, you need a container for the button with the transparent background. Let's say you'll use a FrameLayout --> <FrameLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@android:color/transparent"> <!-- Maybe more items --> <!-- Button with borderless ripple effect --> <ImageButton android:id="@+id/drawerLogoutButton" android:background="?selectableItemBackgroundBorderless" ... /> </FrameLayout> </FrameLayout> 

Espero eso ayude.

Estoy experimentando el mismo problema. La única solución que he encontrado hasta ahora no es 100% bien ya que la ola está enmascarada por la vista (no está sin bordes).

La solución (solución): rodea tu ImageButton con otra vista y establece ripple al primer plano en lugar del fondo en tu diseño como este:

 <ImageView ... /> <FrameLayout ... android:clickable="true" android:focusable="true" android:foreground="?attr/selectableItemBackgroundBorderless" > <ImageButton /> </FrameLayout> 

Me alegraría mucho que alguien explique por qué la ondulación se dibuja detrás de la imagen. Además, si miras la aplicación Fotos de Google, en el detalle de la imagen tienen iconos transparentes sobre la vista de imagen con ripple. Me gustaría replicar esto, pero no soy capaz de hacer que la ondulación de estar en primer plano. ¿Alguien sabe cómo poner transparentes imagebuttons sobre todo, pero todavía tienen la ondulación?

EDIT solución final aquí se puede encontrar exactamente el mismo enlace pregunta

con gran explicación de lo que está sucediendo. la solución es la misma pero encima de eso resuelve la máscara rectangular agregando

 android:clipChildren="false" android:clipToPadding="false" 

a su disposición. ahora tu ondulación debe ser sin fronteras (funcionó para mí). El xml de diseño podría ser algo como esto:

 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" ... android:clipChildren="false" android:clipToPadding="false"> <ImageView ... /> <FrameLayout ... android:clickable="true" android:foreground="?attr/selectableItemBackgroundBorderless"> <ImageView ... /> </FrameLayout> </FrameLayout> 

Estoy enterado que esto es un poste viejo pero luché con esto absolutamente un pedacito hoy por lo que estoy fijando lo que era finalmente capaz de figurar hacia fuera y quizás alguien podría beneficiarse de él. Un énfasis clave de antemano, por favor, haga siempre RTFM !

1) La historia

Tenía la intención de utilizar el efecto de ondulación ilimitado en los elementos de la pestaña y por lo tanto se han extendido por todo el área de AppBarLayout. Había aplicado @android:color/transparent a TabLayout como el primer padre que envolvió y le di a AppBarLayout un color de fondo, sin embargo la ondulación todavía estaba siendo cortada justo en los bordes de la altura de TabLayout.

2) La moraleja de la historia (RTFM)

Así que corro al nido del conocimiento de Android: The Documentation , y he visto esto:

? android: attr / selectableItemBackgroundBorderless para una ondulación que se extiende más allá de la vista. Será dibujado sobre, y limitado por, el padre más cercano de la vista con un fondo no nulo .

3) El curso de acción

Usando el inspector de diseño, me di cuenta de que @android:color/transparent aunque transparente (duh!) Realmente asigna 0 como el valor del atributo bg de una vista, pero cero no es nulo por lo que la ondulación se limita en el padre más cercano.

4) La conclusión

Con eso en la mano, fui y establecí el android:background propiedad de android:background de mi TabLayout a @null lugar de transparente, y ahora tengo una pequeña onda de lujo propagación en el área de la AppBarLayout.

5) Otro: ** ANDROID & SO FTW!

Props a todos en este post que arrojar luz sobre el asunto en la palabra. ¡Aclamaciones!

  • El efecto Ripple no funciona en RelativeLayout
  • Las ondulaciones no se muestran con selectableItemBackground como primer plano en un CardView con un dispositivo Android 5.0
  • RippleDrawable máscara de color, ¿para qué sirve?
  • Agregar los efectos de un RippleDrawable y un StateListDrawable a un RecyclerView
  • Obtenga el efecto de ondulación en RecyclerView con elementos que contengan otro color de fondo
  • Cómo establecer state_selected en ripple drawable
  • Cómo crear efecto de rizo para pre-lollipop
  • Color de fondo ondulado de Android
  • ¿Cómo implementar el efecto ripple en Android KeyboardView?
  • El efecto Ripple no va por encima de ImageView
  • Crear una ondulación dibujable sin transparencia
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.