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

【问题标题】：Android LinearLayout : Add border with shadow around a LinearLayoutAndroid LinearLayout：在 LinearLayout 周围添加带阴影的边框
【发布时间】：2014-07-28 12:20:45
【问题描述】：

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

在这个例子中，我们可以看到linearLayout周围的边框并不相同。如何使用 XML 可绘制文件创建它？

目前，我只能像这样在 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>

【问题讨论】：

您可以使用background 属性...为它创建一个形状像矩形、颜色和阴影效果的XML文件，并将其设置为线性布局的背景..
使用描边来实现灰色边框和填充效果
我认为，它的两个布局 xml，比如说一个是线性布局，内部是具有填充的相对布局
@Prag's 你能帮我创建这个 xml 文件吗？
另一种方法是使用 9 个补丁图像作为布局的背景。这将允许一个非常平滑、褪色的阴影（在我看来非常逼真）。

标签： android border android-linearlayout

【解决方案1】：

试试这个..

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

【讨论】：

@Hariharan 非常感谢！我尝试了您的代码，似乎还可以。但是，还有一件事要做，如何在线性布局的左侧和右侧添加细边框（1dp）？（例如）
@wawanopoulos 只需在 Hariharan 的回答中将 "0dp" 替换为 "1dp"。
您可以将#EAEAEA 颜色添加到父布局中，这样它就像问题图像一样
我也建议这样做，您可以在<shape> 中使用<gradient> 来增强边框效果，如果它确实是您的UI 需要的效果，而不仅仅是纯色边框。
确保您有带有 match_parent 的内部布局，然后将边距 1 分配给内部布局

【解决方案2】：

这就是 CardView 存在的原因。 CardView | Android Developers
它只是一个支持棒棒糖前设备中的提升的 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>

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

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

【讨论】：

如何改变阴影颜色
影子很弱stackoverflow.com/questions/49076188/…
在 4.4.4（或类似版本）的设备中出现非常奇怪的行为。在cardview中添加了一个巨大的边距，使UI非常难看。
这应该是公认的答案。虽然是一个小更新。你应该使用 androidx 之一 -> androidx.cardview.widget.CardView

【解决方案3】：

我通过使用 9 个补丁图形获得了最好看的结果。

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

示例：

9个补丁图形：

结果：

来源：

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

【讨论】：

如何隐藏黑线？请帮忙
@Isaac 将图像保存为 my_nine_patch.9.png（.9.png 是 9 个批处理图像）

【解决方案4】：

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

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.现在在你想要阴影的布局上（例如：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">

这对我有用。

【讨论】：

【解决方案5】：

这很简单：

用这样的渐变创建一个可绘制文件：

视图下方的阴影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>

视图上方的阴影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>

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

【讨论】：

我在哪里调用 below_shadow？视图的背景？
创建below_shadow xml文件，然后在你的视图中，在你的布局中添加一个“视图”并将below_shadow.xml设置为这个视图的背景
我做了和你说的一样的事，但是当我把那个视图放在自定义视图中时，我的“above_shadow”不透明。它单独工作正常。我该怎么办？

【解决方案6】：

作为替代方案，您可以使用 9 块图像作为布局的背景，从而获得更“自然”的阴影：

结果：

将图片放入您的/res/drawable 文件夹中。
确保文件扩展名是.9.png，而不是.png

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

[编辑]

大约 9 个补丁，以防您从未与它们有任何关系。

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

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

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

【讨论】：

只需将其添加为视图的背景。黑色标记的区域（左侧和顶部）将拉伸（垂直、水平）。黑色标记的区域（右、下）定义了“内容区域”（可以在其中添加文本或视图 - 如果您愿意，可以将其称为“填充”）。教程：radleymarx.com/blog/simple-guide-to-9-patch

【解决方案7】：

您在 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>

然后：

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

【讨论】：

【解决方案8】：

1.首先在“drawable”文件夹中创建一个xml文件名为shadow.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="#CABBBBBB" />
                <corners android:radius="10dp" />
            </shape>
        </item>

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

然后在您的 LinearLayout 中添加图层列表作为背景。

<LinearLayout
        android:id="@+id/header_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/shadow"
        android:orientation="vertical">

【讨论】：

@Johndahat 没关系

【解决方案9】：

使用这一行，希望你能达到最好的效果；

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

【讨论】：

@MichałZiobro 将它与您的布局一起使用，例如，如果您有一个较小的布局并且您想要显示阴影。它应该工作。您可能会发现您的文本和按钮变得不可见，但是当您运行该应用程序时，您会看到最好的阴影。我不确定这是某种错误或其他东西，但就我而言，当我使用该代码时，它会使我的所有视图在 AS 预览中不可见，但当我在我的设备中调试/启动它时，它在应用程序中效果最佳。让我知道它是否有效。谢谢。

【解决方案10】：

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

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

【讨论】：

API
不幸的是，它在 Lollipop 之前不起作用，因此您应该使用此问题中的其他一些答案。但是，如果您针对的是较新的手机，这是一种非常简单的方法，效果很好。

【解决方案11】：

Ya Mahdi aj---用于RelativeLayout

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <gradient
                android:startColor="#7d000000"
                android:endColor="@android:color/transparent"
                android:angle="90" >
            </gradient>
            <corners android:radius="2dp" />
        </shape>
    </item>

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

【讨论】：

【解决方案12】：

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

你可以使用一个约束布局并在xml中添加以下属性，

        android:elevation="4dp"

【讨论】：

【解决方案13】：

我找到了解决这个问题的最佳方法。

您需要在布局上设置实心矩形背景。
使用此代码 - ViewCompat.setElevation(view , value)
关于父布局集android:clipToPadding="false"

【讨论】：

如果您不知道，这是 ViewCompat 类上 ViewCompat.setElevation() 方法的当前实现：public void setElevation(View view, float elevation) {}。如您所见，它没有实现。我真的怀疑它会不会有任何帮助，并且真的想知道您是否真的测试了自己的答案，哈哈
ViewCompat.setElevation(view, value) 工作并解决了我的问题。我正在为最低 api 级别 16 编写代码。