如图所示，我想在一个圆角矩形的按钮后面添加阴影。但问题是我不知道如何添加阴影效果。请问该怎么做？
如何为按钮添加阴影
99
- Chintan Rathod
2
1请参考以下链接以在Android中为视图添加阴影效果：https://dev59.com/WHA65IYBdhLWcg3w6DJO 和 http://stackoverflow.com/questions/6563927/how-to-make-shadow-effect-for-abutton-in-android - Yasitha Waduge
这也可能很有用，用不同颜色实现逼真的阴影：https://stackoverflow.com/questions/68583069/how-to-put-shadow-with-gradient - Ole Pannier
10个回答
135
使用这种方法来获得你想要的外观。
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"
...
..
/>
- Festus Tamakloe
8
1缺少结束的 </selector> 标签。 - myforums
7这个解决方案并不完全符合提问者的要求，因为它产生了相反的效果：渐变按钮背景和实心阴影颜色。而且这似乎与外部阴影有很大的区别。 - user4702646
1我能否使textColor选择器嵌入到上述选择器中，这样每次定义一个按钮时就不必同时设置背景和文本颜色，只需要设置背景即可吗？ - JohnyTex
为什么这个回答被接受了？它看起来与期望的阴影差距很大。 - Ahmad Sattout
显示剩余3条评论
71
适用于Android 5.0及以上版本
尝试对其他视图使用Elevation..
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"
我的输出：
- Ranjithkumar
3
我想使用这种方法，但我的按钮是在网格控件中动态创建的（即在代码中），而不是声明式地创建（实际上，我正在使用Xamarin免费版本，因此是Mono库）。似乎没有一种直截了当的方法来设置任何属性。 - jrichview
@jrichview 请查看此答案并发表评论 https://dev59.com/SWAf5IYBdhLWcg3wnDwI#24459128 - Ranjithkumar
嘿，如果我使用drawable设置按钮的形状，我该如何将其用作drawable呢？ - Egor
24
这是我的带有阴影效果的按钮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>
如何使用：在按钮的 XML 中，您可以调整高度和宽度
<Button
android:text="+ add friends"
android:layout_width="120dp"
android:layout_height="40dp"
android:background="@drawable/cw_button_shadow" />
- Samir
12
如果你的目标是Android 5.0及以下版本的设备，你可以使用 Shadow-Layout，因为它简单易用且适用于不同种类的布局。
将 Shadow-Layout 添加到 Gradle 文件中：
dependencies {
compile 'com.github.dmytrodanylyk.shadow-layout:library:1.0.1'
}
在xml布局文件中，你的按钮上方添加以下内容：
xmlns:app="http://schemas.android.com/apk/res-auto"
它将使自定义属性可用。
然后在您的按钮周围放置一个阴影布局:
<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:设置以匹配所需的阴影效果。
希望对您有所帮助。
- torrao
1
糟糕的库，已经过时，而且不再受支持。此外，它似乎只允许使用黑色阴影，而不是浅色阴影。 - forsberg
11
我尝试了上面的代码，并制作了自己的阴影，它与我想要实现的东西更接近一些。也许它会对其他人有所帮助。
<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
1
5请附上屏幕截图。 - CoolMind
4
如果这个方法适用于您，请尝试：
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
1
这实际上是最准确的答案。不幸的是，让设计师使用9-patch并不容易。 - Jeffrey Blattman
2
添加以下2行代码对我有用
android:elevation="10dp"
android:stateListAnimator="@null"
- Akshay Masram
1
请阅读[答案]并[编辑]您的答案，以包含有关此代码实际解决问题的说明。请记住，您不仅要解决问题，还要教育OP和任何未来读者。 - Adriaan
1
经过大量研究，我发现了一种简单的方法。
创建一个9patch图像并将其应用为按钮或任何其他视图的背景。
您可以使用此网站创建带阴影的9patch图像。
将9patch图像放入drawable目录中，并将其应用为按钮的背景。
mButton.setBackground(ContextCompat.getDrawable(mContext, R.drawable.your_9_patch_image);
- shijo
0
由于这里的回答都没有真正回答问题，我想指出https://github.com/Devlight/ShadowLayout（不是我的项目）。这是一个简单的Android布局，您可以将其包装在任何东西周围以赋予其阴影。该库只有一个类，仅约250行。自述文件说已弃用，但它运行良好。
尽管包装所有视图并不理想，但在Android提供标准机制引入阴影之前，或者您想将所有按钮状态绘制为包含阴影像素的位图时，这是我能找到的最佳选项。
- Jeffrey Blattman
-1
您可以尝试这样做：
<?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
1
请阅读[答案]并[编辑]您的答案，以包含有关此代码实际解决问题的说明。请记住，您不仅要解决问题，还要教育OP和任何未来读者。 - Adriaan
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接