Android View shadow - 开卷题库

小开

最佳答案

我知道这个问题已经得到了回答，但我想让你知道，我在 Android Studio上发现了一个 drawable，它与你在问题中看到的图片非常相似: 看看这个:

android:background="@drawable/abc_menu_dropdown_panel_holo_light"

它看起来像这样:

enter image description here

希望对你有所帮助

剪辑

上面的选项是针对旧版本的 Android Studio，所以你可能找不到它。对于新版本:

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

此外，如果你想有自己的自定义形状，我建议使用一个绘图软件，如 Photoshop和绘制它。

enter image description here

不要忘记将其保存为 .9.png文件(例如: my_background.9.png)

阅读文档: 拔出9号补丁

编辑2

一个更好、更简单的解决方案是使用 CardView并设置 app:cardPreventCornerOverlap="false"以防止视图重叠边界:

<android.support.v7.widget.CardView
android:id="@+id/card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="2dp"
app:cardElevation="2dp"
app:cardPreventCornerOverlap="false"
app:contentPadding="0dp">


<!-- your layout stuff here -->


</android.support.v7.widget.CardView>

还要确保在 build.gradle中包含了最新的版本，当前是

compile 'com.android.support:cardview-v7:26.0.0'

小开

我使用的是 Android Studio 0.8.6，但我找不到:

android:background="@drawable/abc_menu_dropdown_panel_holo_light"

所以我找到了这个:

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

它看起来像这样:

enter image description here

小开

Create card_background.xml in the res/drawable folder with the following code:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">


<item>
<shape android:shape="rectangle">
<solid android:color="#BDBDBD"/>
<corners android:radius="5dp"/>
</shape>
</item>


<item
android:left="0dp"
android:right="0dp"
android:top="0dp"
android:bottom="2dp">
<shape android:shape="rectangle">
<solid android:color="#ffffff"/>
<corners android:radius="5dp"/>
</shape>
</item>
</layer-list>

Then add the following code to the element to which you want the card layout

android:background="@drawable/card_background"

下面一行定义了卡片阴影的颜色

<solid android:color="#BDBDBD"/>

小开

这可能有点晚了，但是对于那些仍然在寻找答案的人来说，我在 git hub 上找到了一个项目，这是唯一一个真正符合我需要的。机器人-材料和零件

Just add this line on your build.gradle dependency

compile 'com.h6ah4i.android.materialshadowninepatch:materialshadowninepatch:0.6.3'

干杯，为创造者竖起大拇指！快乐编码

小开

CardView 在 android 5 + 中为您提供 true影子，并且它有一个支持库。用它包住你的视野，你就完了。

<android.support.v7.widget.CardView>
<MyLayout>
</android.support.v7.widget.CardView>

它需要下一个依赖项。

dependencies {
...
compile 'com.android.support:cardview-v7:21.0.+'
}

小开

putting a background of @android:drawable/dialog_holo_light_frame, gives shadow but you can't change background color nor border style, so it's better to benefit from the shadow of it, while still be able to put a background via layer-list

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!--the shadow comes from here-->
<item
android:bottom="0dp"
android:drawable="@android:drawable/dialog_holo_light_frame"
android:left="0dp"
android:right="0dp"
android:top="0dp">


</item>


<item
android:bottom="0dp"
android:left="0dp"
android:right="0dp"
android:top="0dp">
<!--whatever you want in the background, here i preferred solid white -->
<shape android:shape="rectangle">
<solid android:color="@android:color/white" />


</shape>
</item>
</layer-list>

将其保存在 shadow.xml下的可绘制文件夹中

要将其分配给视图，请在 xml 布局文件中设置视图的背景

android:background="@drawable/shadow"

小开

使用立面属性获得阴影效果:

<View ...
android:elevation="2dp"/>

这只能在 v21之后使用，请查看以下链接: http://developer.android.com/training/material/shadows-clipping.html

小开

使用阴影效果的仰角属性:

<YourView
...
android:elevation="3dp"/>

小开

If you are in need of the shadows properly to be applied then you have to do the following.

考虑一下这个视图，它使用一个背景绘图工具定义:

<TextView
android:id="@+id/myview"
...
android:elevation="2dp"
android:background="@drawable/myrect" />

背景可绘制图定义为带圆角的矩形:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#42000000" />
<corners android:radius="5dp" />
</shape>

这是应用阴影的推荐方法，请查看 https://developer.android.com/training/material/shadows-clipping.html#Shadows

小开

使用这个形状作为背景:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">


<item android:drawable="@android:drawable/dialog_holo_light_frame"/>


<item>
<shape android:shape="rectangle">
<corners android:radius="1dp" />
<solid android:color="@color/gray_200" />
</shape>
</item>


</layer-list>

小开

我知道这很愚蠢,
但是如果你想支持 v21，这里是我的成就。

rectangle_with_10dp_radius_white_bg_and_shadow.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">


<!-- Shadow layers -->
<item
android:left="1dp"
android:right="1dp"
android:top="3dp">
<shape>
<corners android:radius="10dp" />
<padding
android:bottom="1.8dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="@color/shadow_hack_level_1" />
</shape>
</item>
<item
android:left="1dp"
android:right="1dp"
android:top="3dp">
<shape>
<corners android:radius="10dp" />
<padding
android:bottom="1.8dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="@color/shadow_hack_level_2" />
</shape>
</item>
<item
android:left="1dp"
android:right="1dp"
android:top="3dp">
<shape>
<corners android:radius="10dp" />
<padding
android:bottom="1.8dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="@color/shadow_hack_level_3" />
</shape>
</item>
<item
android:left="1dp"
android:right="1dp"
android:top="3dp">
<shape>
<corners android:radius="10dp" />
<padding
android:bottom="1.8dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="@color/shadow_hack_level_4" />
</shape>
</item>
<item
android:left="1dp"
android:right="1dp"
android:top="3dp">
<shape>
<corners android:radius="10dp" />
<padding
android:bottom="1.8dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="@color/shadow_hack_level_5" />
</shape>
</item>
<item
android:left="1dp"
android:right="1dp"
android:top="3dp">
<shape>
<corners android:radius="10dp" />
<padding
android:bottom="1.8dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="@color/shadow_hack_level_6" />
</shape>
</item>
<item
android:left="1dp"
android:right="1dp"
android:top="3dp">
<shape>
<corners android:radius="10dp" />
<padding
android:bottom="1.8dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="@color/shadow_hack_level_7" />
</shape>
</item>
<item
android:left="1dp"
android:right="1dp"
android:top="3dp">
<shape>
<corners android:radius="10dp" />
<padding
android:bottom="1.8dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="@color/shadow_hack_level_8" />
</shape>
</item>
<item
android:left="1dp"
android:right="1dp"
android:top="3dp">
<shape>
<corners android:radius="10dp" />
<padding
android:bottom="1.8dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="@color/shadow_hack_level_9" />
</shape>
</item>
<item
android:left="1dp"
android:right="1dp"
android:top="3dp">
<shape>
<corners android:radius="10dp" />
<padding
android:bottom="1.8dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<solid android:color="@color/shadow_hack_level_10" />
</shape>
</item>


<!-- Background layer -->
<item>
<shape>
<solid android:color="@android:color/white" />
<corners android:radius="10dp" />
</shape>
</item>


</layer-list>

rectangle_with_10dp_radius_white_bg_and_shadow.xml (v21)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@android:color/white" />
<corners android:radius="10dp" />
</shape>

View _ into. xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/rectangle_with_10dp_radius_white_bg_and_shadow"
android:elevation="7dp"
android:gravity="center"
android:minWidth="240dp"
android:minHeight="240dp"
android:orientation="horizontal"
android:padding="16dp"
tools:targetApi="lollipop">


<TextView
android:id="@+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="Hello World !" />


</LinearLayout>

结果如下:

在 v21 下(这是您用 xml 创建的)

以上 v21 (实际高程渲染)

一个重要的区别是，它将占据从视图的内部空间，所以您的实际内容区域可以小于 > = 棒棒糖设备。

小开

创建像这样的可绘制背景来显示圆形阴影。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Drop Shadow Stack -->
<item>
<shape>
<corners android:radius="4dp" />
<padding android:bottom="1dp" android:left="1dp"
android:right="1dp"  android:top="1dp" />
<solid android:color="#00CCCCCC" />
</shape>
</item>
<item>
<shape>
<corners android:radius="4dp" />
<padding android:bottom="1dp" android:left="1dp"
android:right="1dp"  android:top="1dp" />
<solid android:color="#10CCCCCC" />
</shape>
</item>
<item>
<shape>
<corners android:radius="4dp" />
<padding android:bottom="1dp" android:left="1dp"
android:right="1dp"  android:top="1dp" />
<solid android:color="#20d5d5d5" />
</shape>
</item>
<item>
<shape>
<corners android:radius="6dp" />
<padding android:bottom="1dp" android:left="1dp"
android:right="1dp"  android:top="1dp" />
<solid android:color="#30cbcbcb" />
</shape>
</item>
<item>
<shape>
<corners android:radius="4dp" />
<padding android:bottom="1dp" android:left="1dp"
android:right="1dp"  android:top="1dp" />
<solid android:color="#50bababa" />
</shape>
</item>


<!-- Background -->
<item>
<shape>
<solid android:color="@color/gray_100" />
<corners android:radius="4dp" />
</shape>
</item>
</layer-list>

小开

这个问题可能已经过时了，但是对于任何想要一个简单的方法来实现复杂的阴影效果的人来说，可以在这里查看我的图书馆 Https://github.com/blure-cn/complexview

使用该库，您可以更改阴影颜色，调整边缘等等。这里有一个实现你所追求的目标的例子。

<com.blure.complexview.ComplexView
android:layout_width="400dp"
android:layout_height="600dp"
app:radius="10dp"
app:shadow="true"
app:shadowSpread="2">


<com.blure.complexview.ComplexView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:color="#fdfcfc"
app:radius="10dp" />
</com.blure.complexview.ComplexView>

要更改阴影颜色，请使用 app: ShadowColor = “ your color code”。