Android LinearLayout：在 LinearLayout 周围添加带有阴影的边框

Android LinearLayout : Add border with shadow around a LinearLayout

提问by wawanopoulos

I would like to create the same border of this LinearLayout as the example :

我想创建与示例相同的此 LinearLayout 的边框：

In this example, we can see that the border is not the same all around the linearLayout. How can I create this using an XML drawable file?

在这个例子中，我们可以看到，linearLayout 周围的边框是不一样的。如何使用 XML drawable 文件创建它？

For now, I have only able to create a simple border all around the LinearLayout like this :

现在，我只能在 LinearLayout 周围创建一个简单的边框，如下所示：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
  <corners
      android:radius="1dp"
      android:topRightRadius="0dp"
      android:bottomRightRadius="0dp"
      android:bottomLeftRadius="0dp" />
  <stroke
      android:width="1dp"
      android:color="#E3E3E1" />

  <solid android:color="@color/blanc" />

</shape>

回答by Hariharan

Try this..

尝试这个..

<?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="#CABBBBBB"/>
            <corners android:radius="2dp" />
        </shape>
    </item>

    <item
        android:left="0dp"
        android:right="0dp"
        android:top="0dp"
        android:bottom="2dp">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white"/>
            <corners android:radius="2dp" />
        </shape>
    </item>
</layer-list>

回答by Ray Suhyun Lee

That's why CardView exists. CardView | Android Developers
It's just a FrameLayout that supports elevation in pre-lollipop devices.

这就是 CardView 存在的原因。卡片视图 | Android 开发者
这只是一个 FrameLayout，支持在棒棒糖之前的设备中提升。

<android.support.v7.widget.CardView
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:cardUseCompatPadding="true"
    app:cardElevation="4dp"
    app:cardCornerRadius="3dp" >

    <!-- put whatever you want -->

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

To use this you need to add dependency to build.gradle:

要使用它，您需要将依赖项添加到build.gradle：

compile 'com.android.support:cardview-v7:23.+'

回答by funcoder

I get the best looking results by using a 9 patch graphic.

我通过使用 9 个补丁图形获得了最佳效果。

You can simply create an individual 9 patch graphic by using the following editor: http://inloop.github.io/shadow4android/

您可以使用以下编辑器简单地创建一个单独的 9 补丁图形：http: //inloop.github.io/shadow4android/

Example:

例子：

The 9 patch graphic:

9 补丁图形：

The result:

结果：

The source:

来源：

<LinearLayout
android:layout_width="200dp"
android:layout_height="200dp"
android:orientation="vertical"
android:background="@drawable/my_nine_patch"

回答by user3619170

okay, i know this is way too late. but i had the same requirement. i solved like this

好吧，我知道这太晚了。但我有同样的要求。我是这样解决的

1.First create a xml file (example: border_shadow.xml) in "drawable" folder and copy the below code into it.

1.首先在“drawable”文件夹中创建一个xml文件（例如：border_shadow.xml）并将以下代码复制到其中。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >

<item>
    <shape>
        <!-- set the shadow color here -->
        <stroke
            android:width="2dp"
            android:color="#7000" />

        <!-- setting the thickness of shadow (positive value will give shadow on that side) -->

        <padding
            android:bottom="2dp"
            android:left="2dp"
            android:right="-1dp"
            android:top="-1dp" />

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

<!-- Background -->

<item>
    <shape>
        <solid android:color="#fff" />
        <corners android:radius="3dp" />
    </shape>
</item>

2.now on the layout where you want the shadow(example: LinearLayout) add this in android:background

2.现在在你想要阴影的布局上（例如：LinearLayout）在android:background中添加这个

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dip"
    android:background="@drawable/border_shadow"
    android:orientation="vertical">

and that worked for me.

这对我有用。

回答by Morteza Rastgoo

This is so simple:

这很简单：

Create a drawable file with a gradient like this:

创建一个带有渐变的可绘制文件，如下所示：

for shadow below a view below_shadow.xml

用于视图下方的阴影 below_shadow.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">   
<gradient
    android:startColor="#20000000"
    android:endColor="@android:color/transparent"
    android:angle="270" >
</gradient>
</shape>

for shadow above a view above_shadow.xml

用于视图上方的阴影 above_shadow.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">   
<gradient
    android:startColor="#20000000"
    android:endColor="@android:color/transparent"
    android:angle="90" >
</gradient>
</shape>

and so on for right and left shadow just change the angle of the gradient :)

等等的左右阴影只是改变渐变的角度:)

回答by Phant?maxx

As an alternative, you might use a 9 patch image as the background for your layout, allowing for more "natural" shadows:

作为替代方案，您可以使用 9 个补丁图像作为布局的背景，从而产生更“自然”的阴影：

Result:

结果：

Put the image in your /res/drawablefolder.
Make sure the file extension is .9.png, not .png

将图像放在您的/res/drawable文件夹中。
确保文件扩展名是.9.png, 不是.png

By the way, this is a modified (reduced to the minimum square size) of an existing resource found in the API 19 sdk resources folder.
I left the red markers, since they don't seem to be harmful, as shown in the draw9patch tool.

顺便说一下，这是对 API 19 sdk 资源文件夹中现有资源的修改（缩小到最小正方形大小）。
我留下了红色标记，因为它们似乎没有害处，如 draw9patch 工具所示。

[EDIT]

[编辑]

About 9 patches, in case you never had anything to do with them.

大约 9 个补丁，以防您与它们无关。

Simply add it as the background of your View.

只需将其添加为您的视图的背景。

The black-marked areas (left and top) will stretch (vertically, horizontally).
The black-marked areas (right, bottom) define the "content area" (where it's possible to add text or Views - you can call the unmarked regions "padding", if you like to).

黑色标记区域（左侧和顶部）将拉伸（垂直、水平）。
黑色标记区域（右侧、底部）定义了“内容区域”（可以在其中添加文本或视图 - 如果您愿意，可以将未标记的区域称为“填充”）。

Tutorial: http://radleymarx.com/blog/simple-guide-to-9-patch/

教程：http: //radleymarx.com/blog/simple-guide-to-9-patch/

回答by Anh Duy

You create a file .xml in drawable with name drop_shadow.xml:

您在 drawable 中创建了一个名为 drop_shadow.xml 的文件 .xml：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--<item android:state_pressed="true">
        <layer-list>
            <item android:left="4dp" android:top="4dp">
                <shape>
                    <solid android:color="#35000000" />
                    <corners android:radius="2dp"/>
                </shape>
            </item>
            ...
        </layer-list>
    </item>-->
    <item>
        <layer-list>
            <!-- SHADOW LAYER -->
            <!--<item android:top="4dp" android:left="4dp">
                <shape>
                    <solid android:color="#35000000" />
                    <corners android:radius="2dp" />
                </shape>
            </item>-->
            <!-- SHADOW LAYER -->
            <item>
                <shape>
                    <solid android:color="#35000000" />
                    <corners android:radius="2dp" />
                </shape>
            </item>
            <!-- CONTENT LAYER -->
            <item android:bottom="3dp" android:left="1dp" android:right="3dp" android:top="1dp">
                <shape>
                    <solid android:color="#ffffff" />
                    <corners android:radius="1dp" />
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

Then:

然后：

<LinearLayout
...
android:background="@drawable/drop_shadow"/>

回答by Tamim

Use this single line and hopefully you will achieve the best result;

使用这一行，希望你能获得最好的结果；

use: android:elevation="3dp"Adjust the size as much as you need and this is the best and simplest way to achieve the shadow like buttons and other default android shadows. Let me know if it worked!

使用： android:elevation="3dp"根据需要调整大小，这是实现按钮和其他默认android阴影等阴影的最佳和最简单的方法。让我知道它是否有效！

回答by Krzynool

If you already have the border from shape just add elevation:

如果您已经有了形状的边框，只需添加高程：

<LinearLayout
    android:id="@+id/layout"
    ...
    android:elevation="2dp"
    android:background="@drawable/rectangle" />

回答by harishanth raveendren

I know this is late but it could help somebody.

我知道这已经晚了，但它可以帮助某人。

You can use a constraintLayout and add the following property in the xml,

您可以使用constraintLayout并在xml中添加以下属性，

        android:elevation="4dp"