如何为Button提供阴影


Answers:


132

使用此方法可获得所需的外观。
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>

并在您的xml布局中:

<Button
   android:background="@drawable/button_selector"
   ...
   ..
/>

这看起来很酷,但是当我尝试使用此intellij时却不喜欢它。当我查看文档时itemandroid:drawable必需的
JohnnyLambada 2014年

1
结束</选择>标记缺失
myforums

5
这并不是问标者想要的,因为这种解决方案正好相反:渐变按钮背景和纯阴影颜色。这似乎与外部阴影非常不同

1
我可以这样做,以便将textColor选择器烘焙到上述选择器中吗-因此我不必在每次定义按钮时都设置两个背景textColor,而只需要设置背景...?
JohnyTex

<selector>并且<item>不需要。如@ user4702646所说,图像已还原。
CoolMind

54

适用于Android 5.0及以上版本

尝试使用“立面图”查看其他视图。

android:elevation="10dp"

对于按钮,

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

低于5.0版本,

对于所有视图,

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

我的输出:

在此处输入图片说明


我想使用这种方法,但是我的按钮是在网格控件中动态创建的(即在代码中),而不是声明式的(实际上,我使用的是Xamarin免费版,因此是Mono lib)。似乎不是设置任何属性的直接方法。
jrichview '16

@jrichview看到这个答案并发表评论stackoverflow.com/a/24459128/3879847
Ranjith Kumar

嘿,如果我将按钮的形状设置为可绘制,该如何将其用作可绘制?
Egor随机将

19

这是我的 文件夹cw_button_shadow.xml 有阴影的按钮drawable

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

如何使用。在Button xml中,您可以调整身高和体重的大小

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

在此处输入图片说明


13

如果您以棒棒糖之前的设备为目标,则可以使用Shadow-Layout,因为它很容易,并且可以在其他类型的布局中使用。


将阴影布局添加到您的Gradle文件中

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


在按钮所在的xml布局的顶部,添加到顶部

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

它将使自定义属性可用。


然后在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>

然后,您可以调整app:设置以匹配所需的阴影。

希望能帮助到你。


lib较差,已弃用,并且不再受支持。此外,它似乎只允许深色/黑色阴影,而不允许浅色阴影。
forsberg

10

我已经从上面尝试了代码,并留下了自己的影子,该影子与我要实现的目标有点接近。也许它也会帮助其他人。

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

1
请附上截图。
CoolMind

3

如果这对您有用,请尝试此

在此处输入图片说明

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"

1

带有阴影的样本9补丁图像

经过大量研究,我发现了一种简单的方法。

创建一个9补丁图像并将其应用为按钮或任何其他视图的背景。

您可以使用此网站创建带阴影的9补丁图像。

将9补丁图像放置在可绘制目录中,并将其用作按钮的背景。

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

0

您可以尝试以下方法:

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


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.