Coloque ImageView sobre el botón android

Estoy intentando colocar un ImageView sobre un botón usando RelativeLayout. Aquí está mi xml:

<RelativeLayout android:layout_width="0dip" android:layout_height="match_parent" android:layout_margin="10dp" android:layout_weight="0.50" > <Button android:id="@+id/btnFindDaysInBetween" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/blue_500" android:text="@string/dt_text_days" /> <ImageView android:id="@+id/imageview_find_days_in_between" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:contentDescription="@string/empty" android:src="@drawable/ic_check_circle_white" /> </RelativeLayout> 

Aquí está la captura de pantalla de la imagen:

Introduzca aquí la descripción de la imagen

Como puede ver, la imagen src de ImageView no es visible. Sin embargo, si cambio el botón en la parte posterior a un ImageView, la imagen de la parte superior de ImageView es visible. Por favor, consulte a continuación ..

Cambiado xml:

  <RelativeLayout android:layout_width="0dip" android:layout_height="match_parent" android:layout_margin="10dp" android:layout_weight="0.50" > <!-- <Button android:id="@+id/btnFindDaysInBetween" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/blue_500" android:text="@string/dt_text_days" /> --> <ImageView android:id="@+id/imageview_find_days" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_centerInParent="true" android:contentDescription="@string/empty" android:src="@drawable/ic_send_black" /> <ImageView android:id="@+id/imageview_find_days_in_between" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:contentDescription="@string/empty" android:src="@drawable/ic_check_circle_white" /> </RelativeLayout> 

Imagen cambiada de xml:

Introduzca aquí la descripción de la imagen

¿Qué es lo que estoy haciendo mal en el primer diseño?

6 Solutions collect form web for “Coloque ImageView sobre el botón android”

La razón es realmente muy simple. 🙂 Estamos tan atrapados pensando en 2D que pasamos por alto la elevation – en Z.

No hay nada mal con su primer diseño. El Button simplemente tiene una elevation más elevation que el ImageView – exactamente 1dp más alto. Por lo tanto, no importa cómo se organizan las dos vistas, el Button eleva por encima.

Un poco de prueba :

Un botón, por defecto obtiene el estilo Widget.Material.Button :

 <!-- Bordered ink button --> <style name="Widget.Material.Button"> <item name="background">@drawable/btn_default_material</item> <item name="textAppearance">?attr/textAppearanceButton</item> <item name="minHeight">48dip</item> <item name="minWidth">88dip</item> <item name="stateListAnimator">@anim/button_state_list_anim_material</item> <item name="focusable">true</item> <item name="clickable">true</item> <item name="gravity">center_vertical|center_horizontal</item> </style> 

El atributo que introduce esta elevación es android:stateListAnimator . StateListAnimator es similar a StateListDrawable , y proporciona animaciones de cambio de estado. El xml completo está aquí: Enlace . Pero aquí está el estado base del botón:

 <!-- base state --> <item android:state_enabled="true"> <set> <objectAnimator android:propertyName="translationZ" android:duration="@integer/button_pressed_animation_duration" android:valueTo="0" android:startDelay="@integer/button_pressed_animation_delay" android:valueType="floatType"/> <objectAnimator android:propertyName="elevation" android:duration="0" android:valueTo="@dimen/button_elevation_material" android:valueType="floatType" /> </set> </item> 

Como puede ver, el valor de elevación para el botón se establece en @dimen/button_elevation_material :

 <dimen name="button_elevation_material">1dp</dimen> 

Y así es como el ImageView termina detrás de / debajo del Button .

¿Entonces, qué podemos hacer?

Una solución directa sería establecer la elevación ImageView's a la misma cantidad – 1dp .

Otra solución, que requerirá un poco de trabajo, es quitar la elevación Button's lugar de cambiar ImageView's . Basado en el defecto StateListAnimator , podemos crear nuestro propio – y quitar la elevación. A continuación, en su res/values-v21/styles.xml , defina un estilo que hereda de Widget.Material.Button :

 <style name="MyDepressedButtonStyle" parent="android:Widget.Material.Button"> <item name="android:stateListAnimator">@anim/customized_state_animator</item> </style> 

Ahora, fije este estilo en su Button :

 <Button style="@style/MyDepressedButtonStyle" .... .... /> 

Editar :

En realidad, podemos aplicar el StateListAnimator personalizado directamente:

 <Button android:stateListAnimator="@anim/customized_state_animator" .... .... /> 

No hay necesidad de tomar la ruta scenic !

Encontré una solución: simplemente android: elevation = "2dp"

 <Button android:id="@+id/btnAccess" android:layout_width="wrap_content" android:layout_height="50dp" android:layout_alignParentBottom="true" android:layout_gravity="right|center" android:layout_marginBottom="10dp" android:layout_marginTop="10dp"/> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/imageView4" android:background="@drawable/or" android:layout_alignBottom="@+id/btnRegister" android:layout_centerHorizontal="true" android:layout_margin="5dp" android:elevation="2dp" /> 

@Vamsi He probado sus dos combinaciones y la primera no funciona con Button . Tienes que ir a través de ImageView. Esto es lo que he intentado con ImageView :

Introduzca aquí la descripción de la imagen

Mientras intenté hacerlo con Button y ver cuál fue el resultado:

Introduzca aquí la descripción de la imagen

Traté de cambiar el orden, pero todo en vano! Parece que tienes que ir con ImageView o ImageButton .

¡Al final! Usted puede ver lo que había intentado:

 <RelativeLayout android:layout_height="match_parent" android:layout_width="match_parent"> <!-- <ImageView android:id="@+id/btnTest" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:src="@drawable/ic_launcher_web" android:contentDescription="@string/app_name" android:text="@string/app_name" /> --> <ImageView android:layout_width="wrap_content" android:id="@+id/imgView" android:layout_height="wrap_content" android:layout_centerInParent="true" android:contentDescription="@string/app_name" android:src="@drawable/ic_launcher" /> <Button android:id="@+id/btnTest" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/imgView" android:layout_alignTop="@+id/imgView" android:text="@string/app_name" /> </RelativeLayout> 

Yo había hecho el mismo tipo de trabajo, ya sea con ImageView o ImageButton (probablemente con ImageView ) y probado el mismo enfoque que estaba intentando con el Button .

Gracias

Utilice ImageButton reemplazar Button y establecer el fondo ImageButton como transparente.

 <ImageButton android:id="@+id/btnFindDaysInBetween" android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/blue_500_text" android:background="@android:color/transparent" /> <ImageView android:id="@+id/imageview_find_days_in_between" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:contentDescription="@string/empty" android:src="@drawable/ic_check_circle_white" /> 

Puede crear una imagen que tenga el color y el texto blue_500 (que sea fácil de crear), luego establezca esta imagen en ImageButton . Después de eso, ImageView verá en la parte superior de ImageButton .

¡Espero que esto ayude!

android:background existe para toda la vista. Como su nombre sugiere, esto es lo que va a estar allí en el fondo.

android:src existe para ImageViews y sus subclases. Se puede pensar en esto como el primer plano. Debido a que ImageView es una subclase de View, incluso tienes android:background para eso.

Si el primer plano es más pequeño que el fondo, la parte de fondo que no está cubierta por el primer plano sería visible. Además, puede utilizar la transparencia en primer plano, en cuyo caso el fondo sería visible (transparente). Usted puede utilizar ANTECEDENTES PARA TODAS LAS VISTAS .. Pero usted puede utilizar SRC sólo para ImageView & ImageButton …..

Puse ImageView en un botón con una desviación de RelativeLayout, espero que esto ayude.

  <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content" > <View android:id="@+id/tempview" android:layout_width="0dp" android:layout_height="0dp" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/tempview" android:background="@drawable/ic_launcher" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/tempview" android:src="@drawable/img_cancel" /> </RelativeLayout> 
  • ¿Cómo implementar un evento Swipe para ver Flipper en un ViewPager?
  • Dos diseños de marco en el ejemplo de FragmentTabs de Android Support4Demos
  • Texto del botón no con varias líneas
  • Pinch zoom para la vista personalizada
  • ¿Dónde está una referencia al diseño de la interfaz de usuario de Android de XML?
  • Android Wear: Sólo la mira "Simple" está funcionando, todas las otras negras
  • Android: ¿Es posible usar string / enum en el selector drawable?
  • El desplazamiento automático se produce cuando Horizontal RecyclerView se coloca como un elemento en un RecyclerView vertical
  • Atributos personalizados para un DialogPreference
  • ¿Diferencia entre setTranslationX / Y y offsetLeftAndRight / offsetTopAndBottom?
  • Eliminar o ocultar el encabezado de navegaciónVer en android
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.