Android View阴影

问题描述 投票：85回答：12

我四处搜寻，找不到合适的方法。我想对我的观点产生以下阴影效果：

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

android shadow dropshadow
12个回答
150
投票

我知道这个问题已经得到了解答但是我想让你知道我在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）

阅读文档：Draw 9-patch

编辑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'
2
投票

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

rectangle_with_10dp_radius_white_bg_and_shadow.xml

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

rectangle_with_10dp_radius_white_bg_and_shadow.xml（v21）

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

view_incoming.xml

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

结果如下：

在v21下（这是你用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（真正的海拔渲染）enter image description here

  • 一个显着的区别是它将占据视图的内部空间，因此您的实际内容区域可以小于> =棒棒糖设备。
0
投票

使用此形状作为背景：

enter image description here
0
投票

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

<?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>
0
投票

你可以从这里创建阴影drawable： -

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

96
投票

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

android:background="@drawable/abc_menu_dropdown_panel_holo_light"

所以我找到了这个：

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

它看起来像这样：

30
投票

使用以下代码在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"/>
29
投票

放置@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>

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

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

android:background="@drawable/shadow"
23
投票

CardView在android 5+中给你真正的影子，它有一个支持库。用它包装你的视图就完成了。

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

它需要下一个依赖项。

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

使用elevation属性来实现阴影效果：

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

这只是在v21之后使用，请看这个链接：http://developer.android.com/training/material/shadows-clipping.html

12
投票

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

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

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

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

3
投票

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

考虑这个视图，使用背景drawable定义：

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

背景drawable定义为带圆角的矩形：

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

这是应用阴影的推荐方法检查qazxsw poi

2
投票

使用提升属性进行阴影效果：

https://developer.android.com/training/material/shadows-clipping.html#Shadows
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.