Android 查看阴影

Android View shadow

提问by longwalker

I searched around, and I could not find a proper way to do this. I want to have the following shadow effects on my views:

我四处寻找，但找不到合适的方法来做到这一点。我想对我的视图产生以下阴影效果：

To be honest, I do not know if this second one is done by applying shadow effect. Any ideas?

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

回答by Rick

I know this question has already been answered but I want you to know that I found a drawableon Android Studiothat is very similar to the pics you have in the question: Take a look at this:

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

android:background="@drawable/abc_menu_dropdown_panel_holo_light"

It looks like this:

它看起来像这样：

Hope it will be helpful

希望它会有所帮助

Edit

编辑

The option above is for the older versions of Android Studioso you may not find it. For newer versions:

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

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

Moreover, if you want to have your own custom shape, I suggest to use a drawing software like Photoshopand draw it.

而且，如果你想拥有自己的自定义形状，我建议使用类似的绘图软件Photoshop并绘制它。

Don't forget to save it as .9.pngfile (example: my_background.9.png)

不要忘了将它保存为.9.png文件（例如：my_background.9.png）

Read the documentation: Draw 9-patch

阅读文档：Draw 9-patch

Edit 2

编辑 2

An even better and less hard working solution is to use a CardViewand set app:cardPreventCornerOverlap="false"to prevent views to overlap the borders:

一个更好、更简单的解决方案是使用 aCardView和 setapp: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>

Also make sure to have included the latest version in the build.gradle, current is

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

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

回答by Repo

I'm using Android Studio 0.8.6 and I couldn't find:

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

android:background="@drawable/abc_menu_dropdown_panel_holo_light"

so I found this instead:

所以我找到了这个：

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

and it looks like this:

它看起来像这样：

回答by Mohamed Selim

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

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

save it in the drawable folder under say shadow.xml

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

to assign it to a view, in the xml layout file set the background of it

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

android:background="@drawable/shadow"

回答by Vivek Varma

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

使用以下代码在 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>

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

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

android:background="@drawable/card_background"

the following line defines the color of the shadow for the card

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

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

回答by Ilya Gazman

CardViewgives you trueshadow in android 5+ and it has a support library. Just wrap your view with it and you're done.

CardView在 android 5+ 中为您提供真正的阴影，并且它有一个支持库。只需用它包裹你的视图，你就完成了。

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

It require the next dependency.

它需要下一个依赖项。

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

回答by mossman252

Use elevation property to achieve a shadow affect:

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

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

This is only to be used past v21, check out this link: http://developer.android.com/training/material/shadows-clipping.html

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

回答by ralphgabb

This is may be late but for those who are still looking for answer for this I found a project on git hub and this is the only one that actually fit my needs. android-materialshadowninepatch

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

Just add this line on your build.gradle dependency

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

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

cheers. thumbs up for the creator ! happycodings

干杯。为创作者点赞！快乐编码

回答by wonsuc

I know this is stupidly hacky,
but if you want to support under v21, here are my achievements.

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

rectangle_with_10dp_radius_white_bg_and_shadow.xml

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)

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_incoming.xml

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>

Here is result:

这是结果：

Under v21(this is which you made with xml)

在 v21 下（这是您用 xml 制作的）

Above v21(real elevation rendering)

v21以上（真实高程渲染）

• The one significant difference is it will occupy the inner space from the view so your actual content area can be smaller than >= lollipopdevices.

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

回答by Shangeeth Sivan

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

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

Consider this view, defined with a background drawable:

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

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

The background drawable is defined as a rectangle with rounded corners:

背景可绘制对象定义为带圆角的矩形：

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

This is the recomended way of appying shadows check this out https://developer.android.com/training/material/shadows-clipping.html#Shadows

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

回答by gaurav iqlance

Create background drawable like this to show rounded shadow.

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

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