Comment fournir une ombre à Button

Réponses:

132

Utilisez cette approche pour obtenir le look souhaité.
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>

Et dans votre mise en page XML:

<Button
   android:background="@drawable/button_selector"
   ...
   ..
/>
Festus Tamakloe
la source
Cela a l'air cool, mais quand j'ai essayé cette intellij ne l'aimait pas. Quand j'ai regardé le doc car itemil dit android:drawableest nécessaire .
JohnnyLambada
1
La balise de fermeture </selector> est manquante
myforums
5
Ce n'est pas exactement ce que le demandeur voulait car cette solution fait le contraire: l'arrière-plan du bouton dégradé et la couleur de l'ombre unie. Et cela semble très différent de l'ombre extérieure
1
Puis-je faire en sorte qu'un sélecteur textColor soit intégré dans le sélecteur ci-dessus - pour ne pas avoir à définir les deux textColor d'arrière-plan chaque fois que je définis un bouton, mais seulement besoin de définir l'arrière-plan ...?
JohnyTex
<selector>et <item>ne sont pas nécessaires. L'image est inversée, comme l'a dit @ user4702646.
CoolMind
54

Pour la version Android 5.0 et plus

essayez l' élévation pour d'autres vues.

android:elevation="10dp"

Pour les boutons,

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

sous la version 5.0,

Pour toutes les vues,

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

Ma sortie:

entrez la description de l'image ici

Ranjith Kumar
la source
J'aimerais utiliser cette approche, mais mes boutons sont créés dynamiquement (c'est-à-dire dans le code) dans un contrôle de grille, pas de manière déclarative (en fait, j'utilise la version gratuite de Xamarin, donc Mono lib). Cela ne semble pas être une méthode simple pour définir n'importe quel attribut.
jrichview
@jrichview voir cette réponse et commenter également stackoverflow.com/a/24459128/3879847
Ranjith Kumar
Hé, comment puis-je utiliser cela comme dessinable, si je définis la forme de mon bouton avec drawable?
Egor randomiser le
19

Voici mon bouton avec une ombre cw_button_shadow.xml dans le drawable dossier

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

Comment utiliser. dans Button xml, vous pouvez redimensionner votre taille et votre poids

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

entrez la description de l'image ici

Sam
la source
13

Si vous ciblez des appareils pré-Lollipop, vous pouvez utiliser Shadow-Layout , car c'est facile et vous pouvez l'utiliser dans différents types de mises en page.


Ajoutez une mise en page d'ombre à votre fichier Gradle :

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


En haut de la mise en page xml où vous avez votre bouton, ajoutez en haut :

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

il rendra disponibles les attributs personnalisés.


Ensuite, vous mettez une disposition d'ombre autour de vous Button :

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

Vous pouvez ensuite modifier le app: paramètres pour qu'ils correspondent à votre ombre requise.

J'espère que cela aide.

torrao
la source
Bibliothèque médiocre, avec des dépréciations, plus aucun support. En outre, il semble que cela ne permette que les ombres sombres / noires, pas les ombres claires.
forsberg
10

J'ai essayé le code ci-dessus et créé ma propre ombre qui est un peu plus proche de ce que j'essaie de réaliser. Peut-être que cela aidera les autres aussi.

<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
la source
1
Veuillez joindre une capture d'écran.
CoolMind
3

Essayez ceci si cela fonctionne pour vous

entrez la description de l'image ici

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
la source
1

Exemple d'image 9 patch avec ombre

Après de nombreuses recherches, j'ai trouvé une méthode simple.

Créez une image de 9 patchs et appliquez-la comme bouton ou comme arrière-plan de toute autre vue.

Vous pouvez créer une image 9 patch avec une ombre en utilisant ce site Web .

Mettez l'image du patch 9 dans votre répertoire dessinable et appliquez-la comme arrière-plan du bouton.

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

Vous pouvez essayer ceci:

<?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
la source