web-dev-qa-db-fra.com

Comment fournir une ombre à Button

enter image description here

Comme vous pouvez le voir sur l'image, je veux une ombre derrière une Button. J'ai créé Button avec des coins arrondis. Mais le problème est que je ne peux pas générer d’ombre derrière cette Button. Comment puis-je atteindre cet objectif?

androidmaterial-designshadow
69
Chintan Rathod

Utilisez cette approche pour obtenir votre 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"
   ...
   ..
/>
113
Festus Tamakloe

Pour Android version 5.0 et ultérieure 

essayez le Elevation 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/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:

enter image description here

42
Ranjith Kumar

Voici mon bouton avec shadowcw_button_shadow.xmlinsidedrawablefolder

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

 enter image description here

12
Sam

Si vous ciblez des appareils antérieurs à Lollipop, vous pouvez utiliser Shadow-Layout , puisque c'est facile et que vous pouvez l'utiliser dans différents types de présentations.


Ajouter un masque d’ombre à votre fichier Gradle:

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


Au sommet de la mise en page XML où vous avez votre bouton, ajoutez en haut: 

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

_ {rendra disponibles les attributs personnalisés.


Ensuite, vous mettez une disposition ombrée 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 les paramètres app: pour qu'ils correspondent à l'ombre requise.

J'espère que ça aide.

11
torrao

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

Essayez ceci si cela fonctionne pour vous 

enter image description here

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"
2
DjHacktorReborn

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>

1
Mohammad Julfikar

Exemple d'image de patch 9 avec ombre

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

Créez une image de 9 patchs et appliquez-la sous forme de bouton ou d'arrière-plan d'une autre vue.

Vous pouvez créer une image de 9 correctifs avec une ombre à l’aide de ce website . 

Placez l’image de 9 correctifs 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);
0
shijo