Cómo proporcionar sombra a Button

Respuestas:

132

Utilice este enfoque para obtener el aspecto deseado.
button_selector.xml:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <layer-list>
        <item android:right="5dp" android:top="5dp">
            <shape>
                <corners android:radius="3dp" />
                <solid android:color="#D6D6D6" />
            </shape>
        </item>
        <item android:bottom="2dp" android:left="2dp">
            <shape>
                <gradient android:angle="270" 
                    android:endColor="#E2E2E2" android:startColor="#BABABA" />
                <stroke android:width="1dp" android:color="#BABABA" />
                <corners android:radius="4dp" />
                <padding android:bottom="10dp" android:left="10dp" 
                    android:right="10dp" android:top="10dp" />
            </shape>
        </item>
    </layer-list>
</item>

</selector>

Y en su diseño xml:

<Button
   android:background="@drawable/button_selector"
   ...
   ..
/>
Festus Tamakloe
fuente
Esto se ve bien, pero cuando probé este intellij no me gustó. Cuando miré el doc para itemque dice android:drawablese requiere .
JohnnyLambada
1
Falta la etiqueta de cierre </selector>
myforums
5
No es exactamente lo que quería el autor de la pregunta, ya que esta solución hace lo contrario: fondo del botón de degradado y color de sombra sólido. Y esto parece muy diferente de la sombra exterior
1
¿Puedo hacer que un selector de color de texto se hornee en el selector de arriba, para que no tenga que establecer ambos colores de fondo cada vez que defino un botón, sino que solo necesito establecer el fondo ...?
JohnyTex
<selector>y <item>no son necesarios. La imagen se revierte, como dijo @ user4702646.
CoolMind
54

Para la versión de Android 5.0 y superior

prueba la elevación para otras vistas.

android:elevation="10dp"

Para botones,

android:stateListAnimator="@anim/button_state_list_animator"

button_state_list_animator.xml - https://android.googlesource.com/platform/frameworks/base/+/master/core/res/res/anim/button_state_list_anim_material.xml

por debajo de la versión 5.0,

Para todas las vistas,

 android:background="@android:drawable/dialog_holo_light_frame"

Mi salida:

ingrese la descripción de la imagen aquí

Ranjith Kumar
fuente
Me gustaría usar este enfoque, pero mis botones se crean dinámicamente (es decir, en código) en un control de cuadrícula, no declarativamente (en realidad, estoy usando la versión gratuita de Xamarin, por lo que Mono lib). No parece ser un método sencillo para establecer cualquier atributo.
jrichview
@jrichview vea esta respuesta y también comente stackoverflow.com/a/24459128/3879847
Ranjith Kumar
Oye, ¿cómo puedo usar esto como dibujable, si configuro la forma de mi botón con dibujable?
Egor Randomize
19

Aquí está mi botón con sombra cw_button_shadow.xml dentro de la drawable carpeta

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <layer-list>
            <!-- SHADOW -->
            <item>
                <shape>
                    <solid android:color="@color/red_400"/>
                    <!-- alttan gölge -->
                    <corners android:radius="19dp"/>
                </shape>
            </item>
            <!-- BUTTON alttan gölge
              android:right="5px" to make it round-->
            <item
                android:bottom="5px"
                >
                <shape>
                    <padding android:bottom="5dp"/>
                    <gradient
                        android:startColor="#1c4985"
                        android:endColor="#163969"
                        android:angle="270" />
                    <corners
                        android:radius="19dp"/>
                    <padding
                        android:left="10dp"
                        android:top="10dp"
                        android:right="5dp"
                        android:bottom="10dp"/>
                </shape>
            </item>
        </layer-list>
    </item>

    <item android:state_pressed="true">
        <layer-list>
            <!-- SHADOW -->
            <item>
                <shape>
                    <solid android:color="#102746"/>
                    <corners android:radius="19dp"/>

                </shape>
            </item>
            <!-- BUTTON -->
            <item android:bottom="5px">
                <shape>
                    <padding android:bottom="5dp"/>
                    <gradient
                        android:startColor="#1c4985"
                        android:endColor="#163969"
                        android:angle="270" />
                    <corners
                        android:radius="19dp"/>
                    <padding
                        android:left="10dp"
                        android:top="10dp"
                        android:right="5dp"
                        android:bottom="10dp"/>
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

Cómo utilizar. en Button xml, puede cambiar el tamaño de su altura y peso

<Button
                android:text="+ add friends"
                android:layout_width="120dp"
                android:layout_height="40dp"
               android:background="@drawable/cw_button_shadow" />

ingrese la descripción de la imagen aquí

Sam
fuente
13

Si está apuntando a dispositivos anteriores a Lollipop, puede usar Shadow-Layout , ya que es fácil y puede usarlo en diferentes tipos de diseños.


Agregue un diseño de sombra a su archivo Gradle :

dependencies {
    compile 'com.github.dmytrodanylyk.shadow-layout:library:1.0.1'
}


En la parte superior, el diseño xml donde tiene su botón, agregue a la parte superior :

xmlns:app="http://schemas.android.com/apk/res-auto"

pondrá a disposición los atributos personalizados.


Luego pones un diseño de sombra a tu alrededor Botón :

<com.dd.ShadowLayout
        android:layout_marginTop="16dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:sl_shadowRadius="4dp"
        app:sl_shadowColor="#AA000000"
        app:sl_dx="0dp"
        app:sl_dy="0dp"
        app:sl_cornerRadius="56dp"> 

       <YourButton
          .... />

</com.dd.ShadowLayout>

A continuación, puede modificar la app:configuración para que coincida con su sombra requerida.

Espero eso ayude.

torrao
fuente
Lib deficiente, con obsolescencia y sin soporte. Además, parece que solo permite sombras oscuras / negras, no claras.
forsberg
10

Probé el código de arriba y creé mi propia sombra, que está un poco más cerca de lo que estoy tratando de lograr. Quizás también ayude a otros.

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <layer-list>
            <item android:left="5dp" android:top="5dp">
                <shape>
                    <corners android:radius="3dp" />
                    <gradient
                        android:angle="315"
                        android:endColor="@android:color/transparent"
                        android:startColor="@android:color/black"
                        android:type="radial"
                        android:centerX="0.55"
                        android:centerY="0"
                        android:gradientRadius="300"/>
                    <padding android:bottom="1dp" android:left="0dp" android:right="3dp" android:top="0dp" />
                </shape>
            </item>
            <item android:bottom="2dp" android:left="3dp">
                <shape>
                    <corners android:radius="1dp" />
                    <solid android:color="@color/colorPrimary" />


                </shape>
            </item>
        </layer-list>
    </item>

</selector>
RexSplode
fuente
1
Por favor, adjunte una captura de pantalla.
CoolMind
3

Prueba esto si te funciona

ingrese la descripción de la imagen aquí

android:background="@drawable/drop_shadow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingLeft="3dp"
        android:paddingTop="3dp"
        android:paddingRight="4dp"
        android:paddingBottom="5dp"
DjHacktorReborn
fuente
1

Imagen de muestra de 9 parches con sombra

Después de mucha investigación encontré un método fácil.

Cree una imagen de 9 parches y aplíquela como botón o como fondo de cualquier otra vista.

Puede crear una imagen de 9 parches con sombra utilizando este sitio web .

Ponga la imagen de 9 parches en su directorio de diseño y aplíquela como fondo para el botón.

mButton.setBackground(ContextCompat.getDrawable(mContext, R.drawable.your_9_patch_image);
shijo
fuente
0

Puedes probar esto:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<layer-list>
        <item android:left="1dp" android:top="3dp">
            <shape>
                <solid android:color="#a5040d" />
                <corners android:radius="3dip"/>
            </shape>
        </item>
    </layer-list>
  </item>
<item>
    <layer-list>
        <item android:left="0dp" android:top="0dp">
            <shape>
                    <solid android:color="#99080d" />
                <corners android:radius="3dip"/>
            </shape>
        </item>
        <item android:bottom="3dp" android:right="2dp">
            <shape>
                <solid android:color="#a5040d" />
                <corners android:radius="3dip"/>
            </shape>
        </item>
    </layer-list>
</item>

Julfikar
fuente