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:
- Android L's Ripple Effect - Touch Feedback para los botones - Uso de XML
- No hay efecto de ondulación en el tacto en la vista de reciclaje
- NavigationView + selector + efecto de rizo estado seleccionado no funciona
- ¿Es esta la forma correcta de obtener el efecto de rizo en los dispositivos pre-piruletas?
- ¿Cómo agregar efecto de rizado a las preferencias en android?
<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
?
- SetBackgroundResource actúa diferente de setBackground con RippleDrawable
- Lollipop RippleDrawable vs Selector para Pre-Lollipop
- Cómo crear efecto de rizo en un diseño sencillo
- ¿Cómo manejar el efecto Ripple en 9-patch y CardView, y tener control sobre los estados del selector?
- No se pudo encontrar la clase 'android.graphics.drawable.RippleDrawable' Unicode issue?
- Android Ripple Effect + Elevación en las vistas que no son de botón
- Android cómo hacer referencia a una nueva clase de la Ripple RippleDrawable
- Android Button Ripple en Lollipop y resaltar en pre lollipop
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:
Después de resuelto:
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!
- Butterknife vista de encargo unbind
- Android Gradle Unit Prueba de migración de JARs – duplicar los archivos hamcrest de junit y mockito