Android View阴影

时间:2014-01-19 00:52:05

标签: android shadow dropshadow

我四处搜寻,找不到合适的方法。我想对我的观点产生以下阴影效果: enter image description here

enter image description here

说实话,我不知道第二个是否通过应用阴影效果来完成。有什么想法吗?

14 个答案:

答案 0 :(得分:148)

我知道这个问题已经得到解答但我希望您知道我在drawable上找到的Android Studio与您在问题中的图片非常相似: 看看这个:

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

阅读文档: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'

答案 1 :(得分:96)

我使用的是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

答案 2 :(得分: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"/>

答案 3 :(得分: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"

答案 4 :(得分:23)

CardView在android 5+中为您提供 true 阴影,并且它有一个支持库。只需用它包装你的视图就可以了。

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

它需要下一个依赖项。

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

答案 5 :(得分:18)

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

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

仅在v21之后使用,请查看此链接:http://developer.android.com/training/material/shadows-clipping.html

答案 6 :(得分:11)

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

只需在build.gradle依赖项

上添加此行
compile 'com.h6ah4i.android.materialshadowninepatch:materialshadowninepatch:0.6.3'

欢呼声。竖起大拇指为创作者! happycodings

答案 7 :(得分: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>

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

答案 8 :(得分:2)

使用高程属性进行阴影效果:

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

答案 9 :(得分:2)

我知道这很愚蠢,
但是如果您想在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_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制作的) enter image description here

v21以上版本(真实立面渲染) enter image description here

  • 一个重要的区别是它将占据视图的内部空间,因此您的实际内容区域可以小于> = lollipop 设备。

答案 10 :(得分: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>

答案 11 :(得分:0)

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

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

答案 12 :(得分:0)

您可以从此处创建可绘制的阴影:-

Check this

答案 13 :(得分:0)

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