Come fornire ombra a Button

Risposte:

134

Usa questo approccio per ottenere l'aspetto desiderato.
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>

E nel tuo layout xml:

<Button
   android:background="@drawable/button_selector"
   ...
   ..
/>
— Festus Tamakloe
fonte
Sembra bello, ma quando ho provato questo intellij non mi è piaciuto. Quando ho guardato il doc per itemessa dice android:drawableè necessario .
— JohnnyLambada
1
tag di chiusura </selector> mancante
— myforums
6
Non è esattamente quello che voleva il richiedente poiché questa soluzione fa l'opposto: sfondo del pulsante sfumato e colore dell'ombra a tinta unita. E questo sembra molto diverso dall'ombra esterna
1
Posso fare in modo che un selettore textColor sia inserito nel selettore sopra -quindi non devo impostare entrambi i textColor di sfondo ogni volta che definisco un pulsante, ma ho solo bisogno di impostare lo sfondo ...?
— JohnyTex
<selector>e <item>non sono necessari. L'immagine viene ripristinata, come ha detto @ user4702646.
— CoolMind
57

Per la versione Android 5.0 e successive

prova l' elevazione per altre viste ..

android:elevation="10dp"

Per i pulsanti,

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

sotto la versione 5.0,

Per tutte le visualizzazioni,

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

La mia uscita:

inserisci qui la descrizione dell'immagine

— Ranjith Kumar
fonte
Mi piacerebbe usare questo approccio, ma i miei pulsanti vengono creati dinamicamente (cioè nel codice) in un controllo della griglia, non in modo dichiarativo (in realtà, sto usando la versione gratuita di Xamarin, quindi Mono lib). Non sembra essere un metodo semplice per impostare qualsiasi attributo.
— jrichview
@jrichview vedere questa risposta e anche commentare stackoverflow.com/a/24459128/3879847
— Ranjith Kumar
Ehi, come posso usarlo come disegnabile, se imposto la forma del mio pulsante con disegnabile?
— Egor Randomize
21

Ecco il mio pulsante con l'ombra cw_button_shadow.xml all'interno della drawable cartella

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

Come usare. in Button xml, puoi ridimensionare altezza e peso

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

inserisci qui la descrizione dell'immagine

— Sam
fonte
13

Se stai prendendo di mira dispositivi pre-Lollipop, puoi usare Shadow-Layout , poiché è facile e puoi usarlo in diversi tipi di layout.


Aggiungi il layout delle ombre al tuo file Gradle :

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


In alto il layout xml dove hai il tuo pulsante, aggiungi in alto :

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

renderà disponibili gli attributi personalizzati.


Quindi metti un layout di ombre intorno a te 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>

È quindi possibile modificare le app:impostazioni in modo che corrispondano all'ombra richiesta.

Spero che sia d'aiuto.

— torrao
fonte
Libreria scadente, con deprecazioni e non più supportata. Inoltre, sembra che consenta solo ombre scure / nere, non chiare.
— forsberg
10

Ho provato il codice dall'alto e ho creato la mia ombra che è un po 'più vicina a ciò che sto cercando di ottenere. Forse aiuterà anche gli altri.

<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
fonte
1
Per favore, allega uno screenshot.
— CoolMind
3

Prova questo se funziona per te

inserisci qui la descrizione dell'immagine

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

Immagine campione 9 patch con ombra

Dopo molte ricerche ho trovato un metodo semplice.

Crea un'immagine di 9 patch e applicala come pulsante o come sfondo di qualsiasi altra vista.

Puoi creare un'immagine di 9 patch con ombra usando questo sito web .

Metti l'immagine della patch 9 nella tua directory disegnabile e applicala come sfondo per il pulsante.

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

Puoi provare questo:

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

Android ora fornisce ExtendedFloatingActionButton che fa la stessa cosa per te.

— Hashim Akhtar
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.