Android View阴影

102

我四处搜寻，但找不到适合的方法。我希望对我的视图具有以下阴影效果： 在此处输入图片说明

在此处输入图片说明

老实说，我不知道第二个是否通过应用阴影效果来完成。有任何想法吗？

android  shadow  dropshadow 
— 长跑者
source
1
你是这个意思？stackoverflow.com/questions/4406524/…（检查最高的投票答案，而不是标记的答案）
— 路加福音2014年
1
@DatVM，谢谢，这似乎可以解决问题，但我当时想也许在android sdk中内置了工具。例如，仅通过添加一些代码行即可为线性布局添加阴影：P
— longwalker 2014年
类似的问题- stackoverflow.com/q/52954743/9640177 -添加阴影矢量可绘制
— mayank1513

Answers:

158

我知道这个问题已经回答了，但我希望你知道，我发现了一个drawable上Android Studio这是非常相似的，你在这个问题有图片：看看这个：

android:background="@drawable/abc_menu_dropdown_panel_holo_light"

看起来像这样：

在此处输入图片说明

希望对您有所帮助

编辑

上面的选项适用于的较早版本，Android Studio因此可能找不到。对于较新的版本：

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

此外，如果您想拥有自己的自定义形状，我建议使用像这样的绘图软件Photoshop并进行绘制。

在此处输入图片说明

不要忘了将它保存为.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'
— 里克
source
谢谢，实际上，它看起来非常相似。我还找到了适用于Android的“ Google卡布局”，它们非常酷！
— longwalker 2014年
6
太棒了 仅供未来观众观看，仅供参考/<sdk-path>/extras/android/support。
— theblang 2014年
2
怎样使用cardView
— Alex Chengalan
100

我正在使用Android Studio 0.8.6，但找不到：

android:background="@drawable/abc_menu_dropdown_panel_holo_light"

所以我找到了这个：

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

它看起来像这样：

在此处输入图片说明

— 回购
source
1
但是我们不能添加角半径吗？
— Fay007 '19
40

放置的背景会@android:drawable/dialog_holo_light_frame产生阴影，但您不能更改背景颜色或边框样式，因此最好从阴影中受益，同时仍然可以通过图层列表放置背景

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

将其保存在说下的drawable文件夹中 shadow.xml

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

android:background="@drawable/shadow"
— 穆罕默德·塞利姆（Mohamed Selim）
source
您检查它是否有效吗？第二个<item>不执行任何操作。我不能将其更改为透明或圆角。
— zeeshan
2
在我尝试过的所有方法中，这是唯一有效的方法，谢谢。
— Shyam Sunder
1
绝佳的解决方案
— user1974368 '18
34

使用以下代码在res / drawable文件夹中创建card_background.xml：

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

然后将以下代码添加到您想要卡片布局的元素上

android:background="@drawable/card_background"

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

<solid android:color="#BDBDBD"/>
— Vivek Varma
source
10
这实际上不是阴影-因为它不会褪色。它更像是两侧的边界。
— ban-geoengineering
它不是阴影
— ShadeToD
24

CardView在android 5+中为您提供真正的阴影，并且具有支持库。只需用它包装您的视图就可以了。

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

它需要下一个依赖项。

dependencies {
    ...
    compile 'com.android.support:cardview-v7:21.0.+'
}
— 伊利亚·加兹曼（Ilya Gazman）
source
1
这是唯一正确的答案，因为CardView在compat模式下，对于不同的高程，阴影级别也不同。
— 贾里特·米拉德
我推荐MaterialCardView，因为它更清晰并且具有更多功能。
— H. Farid
12

这可能已经晚了，但是对于那些仍在寻找答案的人，我在git hub上找到了一个项目，这是唯一真正满足我需求的项目。android-materialshadowninepatch

只需在build.gradle依赖项上添加此行

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

干杯。为创作者竖起大拇指！happycodings

— 拉尔夫加布
source
嘿@ralphgabb，这是否仍然对您有用，还是您有更好的预棒棒糖设备解决方案？
— Swapnil
@Swapnil不确定AndroidX是否现在支持此功能，但是我不再支持棉花糖之前的设备。
— ralphgabb19年
5

我知道这很愚蠢，
但是如果您想在v21下支持，这就是我的成就。

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

angle_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_incoming.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以上（真实立面渲染） 在此处输入图片说明

  • 一个重要的区别是它将占据视图的内部空间，因此您的实际内容区域可以小于> =棒棒糖设备。
— 云杉
source
3

如果您需要正确应用阴影，则必须执行以下操作。

考虑使用背景可绘制对象定义的此视图：

<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

— 香格里斯·西凡（Shangeeth Sivan）
source
2

将height属性用于阴影效果：

<YourView
    ...
    android:elevation="3dp"/>
— Ofek Ashery
source
使用海拔高度需要设备运行棒棒糖。
— Shane Rowatt
2

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

<?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>
— gaurav iqlance
source
请同时为您提供的代码添加说明。
— Mangaldeep Pannu
非常好的xml唯一解决方案
— Bruno Bieri
2

这个问题可能很老了，但是对于以后想要通过简单方法实现复杂阴影效果的任何人，请在这里查看我的库 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 =“您的颜色代码”。

— 蓝光
source
1

使用此形状作为背景： 

<?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>
— 侯赛尼先生
source
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.