Como fornecer sombra ao botão

Respostas:

132

Use esta abordagem para obter a aparência desejada.
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 em seu layout xml:

<Button
   android:background="@drawable/button_selector"
   ...
   ..
/>
— Festus Tamakloe
fonte
Isso parece legal, mas quando tentei este intellij não gostei. Quando olhei para o doc para itemele diz que android:drawableé necessário .
— JohnnyLambada de
1
tag de fechamento </selector> ausente
— myforums
5
Não é exatamente o que o autor da pergunta queria, já que essa solução faz o oposto: fundo do botão gradiente e cor de sombra sólida. E isso parece muito diferente da sombra externa
1
Posso fazer com que um seletor textColor seja incorporado ao seletor acima, então não tenho que definir ambos textColor de fundo cada vez que definir um botão, mas só preciso definir o fundo ...?
— JohnyTex
<selector>e <item>não são necessários. A imagem é revertida, como @ user4702646 disse.
— CoolMind
54

Para Android versão 5.0 e superior

experimente a Elevação para outras vistas ..

android:elevation="10dp"

Para botões,

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

versão inferior a 5.0,

Para todas as visualizações,

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

Minha saída:

insira a descrição da imagem aqui

— Ranjith Kumar
fonte
Eu gostaria de usar essa abordagem, mas meus botões são criados dinamicamente (ou seja, no código) em um controle de grade, não declarativamente (na verdade, estou usando a versão gratuita do Xamarin, portanto, Mono lib). Não parece ser um método direto para definir qualquer atributo.
— jrichview de
@jrichview veja esta resposta e também comente stackoverflow.com/a/24459128/3879847
— Ranjith Kumar
Ei, como posso usar isso como drawable, se definir o formato do meu botão com drawable?
— Egor Randomize
19

Aqui está o meu botão com sombra cw_button_shadow.xml dentro da drawable pasta

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

Como usar. no Button xml, você pode redimensionar sua altura e peso

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

insira a descrição da imagem aqui

— Sam
fonte
13

Se você está almejando dispositivos pré-Lollipop, você pode usar Shadow-Layout , já que é fácil e você pode usá-lo em diferentes tipos de layouts.


Adicione o layout de sombra ao seu arquivo Gradle :

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


No topo do layout xml onde você tem o botão, adicione ao topo :

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

ele disponibilizará os atributos personalizados.


Em seguida, você coloca um layout de sombra em torno de você 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>

Você pode então ajustar as app:configurações para corresponder à sua sombra necessária.

Espero que ajude.

— Torrao
fonte
Lib pobre, com depreciações, e sem mais suporte. Além disso, parece que permite apenas sombras escuras / pretas, não claras.
— Forsberg
10

Eu tentei o código de cima e fiz minha própria sombra, que é um pouco mais próxima do que estou tentando alcançar. Talvez ajude outros também.

<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
Por favor, anexe uma imagem.
— CoolMind
3

Tente isso se funcionar para você

insira a descrição da imagem aqui

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

Amostra de imagem de 9 patch com sombra

Depois de muita pesquisa, descobri um método fácil.

Crie uma imagem de 9 patch e aplique-a como botão ou fundo de qualquer outra visualização.

Você pode criar uma imagem de 9 patch com sombra usando este site .

Coloque a imagem de 9 patch em seu diretório drawable e aplique-a como plano de fundo para o botão.

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

Você pode tentar isto:

<?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
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.