如何在android中为视图设置阴影？

Question

我想知道如何在 android 的任何常规视图中添加阴影层。例如：假设我有一个布局 xml，显示类似这样的内容..

<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout  
    android:layout_height="wrap_content"  
    android:layout_width="wrap_content"  
    <Button....  
    ...  
</LinearLayout>  

现在，当它显示时，我希望它周围有一个阴影。

Answer 1

在 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"/>

Answer 2

您可以使用从 API 级别 21 开始提供的提升

由 Z 属性表示的视图的高度决定了 其阴影的视觉外观：具有较高 Z 值的视图投射 更大、更柔和的阴影。具有较高 Z 值的视图会遮挡具有较高 Z 值的视图 较低的 Z 值；但是，视图的 Z 值不会影响 视图的大小。设置视图的高度：

在布局定义中，使用

android:elevation

属性。要在活动的代码中设置视图的高度， 使用

View.setElevation()

 方法。

Source

Answer 3

</LinearLayout>
            <View
                android:layout_width="match_parent"
                android:layout_height="2dp"
                android:background="@color/dropShadow" />

在线性布局下方使用

另一种方法

在 /drawable 文件夹中创建“rounded_corner_bg.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="@color/primaryColor" />

        <corners android:radius="4dp" />
    </shape>
</item>

<item
    android:bottom="2dp"
    android:left="0dp"
    android:right="0dp"
    android:top="0dp">
    <shape android:shape="rectangle">
        <solid android:color="#F7F7F7" />

        <corners android:radius="4dp" />
    </shape>
</item>

</layer-list>

要使用这个布局 android:background="@drawable/rounded_corner_bg"

Answer 4

假设您将使用线性布局（我考虑过垂直线性布局）..并且在您的线性布局下方有一个视图。现在为这个视图提供一个开始颜色和结束颜色.. 我也想得到这个东西，它对我有用..如果您需要更好的效果，那么只需围绕开始和结束颜色进行处理。

activity_main

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:id="@+id/vertical"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:background="@drawable/layout_back_bgn"
        android:orientation="vertical" >
    </LinearLayout>

    <View
        android:layout_below="@+id/vertical"
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:background="@drawable/shadow"
        >
    </View>


</LinearLayout>

layout_back_bgn.xml

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >

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

</shape>

shadow.xml

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"  android:shape="rectangle">    
    <gradient
        android:startColor="#4D4D4D"
        android:endColor="#E6E6E6"
        android:angle="270"
        >
    </gradient>
</shape>

我尝试在使用上述代码后发布我拥有的图像，但由于我没有声誉，所以 stackoverflow 不允许我这样做......对此感到抱歉。

Answer 5

创建阴影的最佳方法是使用9patch 图像作为 视图的背景（或包裹视图的ViewGroup）。

第一步是创建一个带有阴影的 png 图像。一世 使用 Photoshop 创建这样的图像。真的很简单。

• 使用 Photoshop 创建新图像。
• 添加一个图层并创建一个 4x4 的黑色正方形。
• 通过选择图层中的图层在图层上创建阴影 资源管理器并单击标题为 fx 的按钮并选择投影。
• 将图像导出为 png。

下一步是从此图像创建 9-patch 可绘制对象。

• 从android-sdk/tools打开draw9patch
• 打开draw9patch中的图片
• 在正方形的四个边上创建 4 条黑线，如 然后将图片保存为shadow.9.png。

现在您可以将此阴影添加为您想要添加的视图的背景 添加阴影。将shadow.9.png 添加到res/drawables。现在添加它 作为背景：

<LinearLayout
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:background="@drawable/shadow"
  android:paddingBottom="5px"
  android:paddingLeft="6px"
  android:paddingRight="5px"
  android:paddingTop="5px"
>

我最近写了一个blog post 详细解释了这一点，并且 包括我用来创建阴影的 9patch 图像。

Answer 6

这是我的解决方案的俗气版本...这是找到的解决方案的修改 here

我不喜欢角落的样子，所以我把它们都褪色了......

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!--Layer 0-->
<!--Layer 1-->
<!--Layer 2-->
<!--Layer 3-->
<!--Layer 4 (content background)-->

<!-- dropshadow -->
<item>
    <shape>
        <gradient 
            android:startColor="@color/white"
            android:endColor="@color/white"
            android:centerColor="#10CCCCCC"
            android:angle="180"/>
        <padding android:top="0dp" android:right="0dp" android:bottom="2dp" android:left="0dp" />
    </shape>
</item>

<item>
    <shape>
        <gradient 
            android:startColor="@color/white"
            android:endColor="@color/white"
            android:centerColor="#20CCCCCC"
            android:angle="180"/>
        <padding android:top="0dp" android:right="0dp" android:bottom="2dp" android:left="0dp" />
    </shape>
</item>

<item>
    <shape>
        <gradient 
            android:startColor="@color/white"
            android:endColor="@color/white"
            android:centerColor="#30CCCCCC"
            android:angle="180"/>

        <padding android:top="0dp" android:right="0dp" android:bottom="2dp" android:left="0dp" />
    </shape>
</item>

<item>
    <shape>
        <gradient 
            android:startColor="@color/white"
            android:endColor="@color/white"
            android:centerColor="#40CCCCCC"
            android:angle="180"/>
        <padding android:top="0dp" android:right="0dp" android:bottom="2dp" android:left="0dp" />
    </shape>
</item>

<item>
    <shape>
        <gradient 
            android:startColor="@color/white"
            android:endColor="@color/white"
            android:centerColor="#50CCCCCC"
            android:angle="180"/>
        <padding android:top="0dp" android:right="0dp" android:bottom="2dp" android:left="0dp" />
    </shape>
</item>

<!-- content background -->
<item>
    <shape>
        <solid android:color="@color/PostIt_yellow" />
    </shape>
</item>

Answer 7

有一个简单的技巧，使用形成阴影的两个视图。

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" 
    android:padding="10dp"
    android:background="#CC55CC">
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <TableLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:stretchColumns="0">
            <TableRow>
                <LinearLayout
                    android:id="@+id/content"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content">
                    <TextView  
                        android:layout_width="fill_parent" 
                        android:layout_height="wrap_content"
                        android:background="#FFFFFF" 
                        android:text="@string/hello" />
                </LinearLayout>
                <View
                    android:layout_width="5dp"
                    android:layout_height="fill_parent"
                    android:layout_marginTop="5dp"
                    android:background="#55000000"/>
            </TableRow>
        </TableLayout>
        <View
            android:layout_width="fill_parent"
            android:layout_height="5dp"
            android:layout_marginLeft="5dp"
            android:background="#55000000"/>
    </LinearLayout>
</FrameLayout>

希望对您有所帮助。