layout_weight - table layout android

Coloque ImageView sobre el botón de Android

Question

Estoy tratando de 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:

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 del ImageView superior es visible. Consulte más adelante..

Xml cambiado:

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

Captura de pantalla del XML cambiado:

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

Answer 1

@Vamsi Probé ambas combinaciones y la primera no funciona con Button . Tienes que pasar por ImageView. Esto es lo que intenté con ImageView :

Mientras intentaba hacerlo con Button y ver cuál era el resultado:

Intenté cambiar el orden pero todo fue en vano! Parece que tienes que ir con ImageView o ImageButton .

¡Al final! Puedes 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>

Hice el mismo tipo de trabajo con ImageView o ImageButton (probablemente con ImageView ) y probé el mismo enfoque que intentabas con Button .

Gracias

Answer 2

Button es solo un TextView con un cierto estilo aplicado, así que si reemplaza Button con TextView puede mostrar un ImageView encima de él. Esto también funciona en la API <21.

Answer 3

Coloqué ImageView en un botón con un desvío 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>

Answer 4

En realidad, es mucho más fácil simplemente configurar StateListAnimator en @null

<Button
    ...
    android:stateListAnimator="@null" />

Android de Android 5.0: ¿la elevación funciona para la vista, pero no el botón?

Answer 5

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" />

Answer 6

La razón es en realidad muy simple. :) Estamos tan atrapados pensando en 2D que pasamos por alto la elevation , en Z.

No hay nada malo con tu primer diseño. El Button simplemente tiene una elevation más elevation que ImageView : exactamente 1dp más alto. Por lo tanto, no importa cómo organice las dos vistas, el Button eleva arriba.

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í: Link . 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 estando detrás / debajo del Button .

¿Entonces, qué podemos hacer?

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

Otra solución, que requerirá un poco de trabajo, es eliminar la elevación Button''s lugar de cambiar la de ImageView''s . Basándonos en el StateListAnimator predeterminado, podemos crear el nuestro y eliminar la elevación. Luego, en su res/values-v21/styles.xml , defina un estilo que herede de Widget.Material.Button :

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

Ahora, establece este estilo en tu Button :

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

Editar :

En realidad, podemos aplicar el StateListAnimator personalizado directamente:

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

No es necesario tomar la ruta scenic !

Answer 7

Si desea obtener un ImageView encima de un botón, y está desarrollando para la API de Android <21 (por ejemplo, KitKat = 19), la forma más sencilla es no usar un botón y usar 2 ImageView. ¿Por qué querrías hacer eso? Puede deberse a que definió una forma dibujable para que el botón se vea "más fresco", por lo que ya está usando android: background con esa forma.

Ex:

<Button
    android:id="@+id/button01"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:background="@drawable/buttonshape"
    />

<ImageView
    android:id="@+id/image01"
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:layout_marginTop="10dp"
    android:layout_marginStart="10dp"
    android:src="@drawable/desiredImageOnTop"
    />

Donde @ drawable / buttonshape.xml es:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle">
<corners
    android:radius="30dp"
    />
<gradient
    android:angle="45"
    android:centerColor="#47A891"
    android:centerX="35%"
    android:endColor="#000000"
    android:startColor="#E8E8E8"
    android:type="linear"
    />
<padding
    android:bottom="0dp"
    android:left="0dp"
    android:right="0dp"
    android:top="0dp"
    />
<size
    android:width="100dp"
    android:height="100dp"
    />
<stroke
    android:width="3dp"
    android:color="#878787"
    />
</shape>

En ese caso, debe reemplazar el botón con un ImageView, cambiar android: background a android: src, y luego, en el código java, simplemente agrega un OnClickListener como si fuera un botón (ambos controles derivan de View y OnClickListener es un evento Ver). ¡Funciona de maravilla!

Answer 8

Use el ImageButton reemplazo de ImageButton y establezca el fondo de 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 su color y texto blue_500 (que es fácil de crear), luego configure esta imagen en su ImageButton . Después de eso, su ImageView verá en la parte superior de ImageButton .

¡Espero que esto ayude!

Answer 9

android:background existe para toda la vista. Como su nombre indica, esto es lo que habrá en el fondo.

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

Si el primer plano es más pequeño que el fondo, la parte del fondo que no está cubierta por el primer plano sería visible. Además, puede utilizar la transparencia en el primer plano, en cuyo caso el fondo sería visible (de forma transparente). Puedes usar ANTECEDENTES PARA TODAS LAS VISTAS ... Pero puedes usar SRC solo para ImageView y ImageButton ...