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

147

我想创建与示例相同的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>
android  border  android-linearlayout 
— 瓦瓦诺普洛斯
source
1
您可以使用background属性，用于创建...一个XML文件像长方形，颜色和阴影效果，因为形状并将其设置为背景为您的线性布局..
— Pragnesh Ghodaシ
也将笔触用于灰色边框和填充效果
— Pragnesh Ghodaシ
我认为，它的两个布局xml，例如是线性布局，内部是具有填充的相对布局
— Giru Bhai
@ Prag's可以帮我创建这个xml文件吗？
— wawanopoulos 2014年
1
另一种方法是使用9补丁图像作为布局的背景。这将允许一个真正平滑，渐隐的阴影（在我看来，这是非常现实的）。
— Phantômaxx

Answers:

257

试试这个..

<?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>
— 哈里哈兰
source
@Hariharan非常感谢！我尝试了您的代码，看来还可以。但是，还有一件事要做，如何在线性布局的左侧和右侧添加细边框（1dp）？（例如）
— wawanopoulos
2
@wawanopoulos 在Hariharan的回答中替换"0dp"为"1dp"。
— Phantômaxx
你可以添加#EAEAEA颜色到父布局，这将是一样的问题，图像
— 萨马德
3
我也建议这样做，您可以<gradient>在其中使用它<shape>来增强边框效果，如果它确实是您的UI需要的效果，而不仅仅是纯色边框，也可以使用。
— patrickjason91
确保您具有match_parent的内部布局，然后为内部布局提供边距1
— Shaktisinh Jadeja '18
82

这就是CardView存在的原因。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>

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

compile 'com.android.support:cardview-v7:23.+'
— 李素贤
source
如何更改阴影颜色
— Aditay Kaushal
— user924
1
在具有4.4.4（或类似版本）的设备中非常奇怪的行为。巨大的利润被添加到cardview中，并使UI非常难看。
— Morteza Rastgoo
这应该是公认的答案。不过有一个小更新。您应该使用androidx一个-> androidx.cardview.widget.CardView
— bogdan
59

通过使用9补丁图形，我得到了最好的结果。

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

例：

9个补丁图形：

9个补丁图形：

结果：

在此处输入图片说明

来源：

<LinearLayout
android:layout_width="200dp"
android:layout_height="200dp"
android:orientation="vertical"
android:background="@drawable/my_nine_patch"
— Funcoder
source
1
如何隐藏黑线？请帮助
— 艾萨克·达隆
@Isaac保存该图像作为my_nine_patch.9.png（.9.png是9批次图像）
— 阿伦
这是最好的！
— Numanqmr
35

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

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

那对我有用。

— 用户名
source
20

这很简单：

创建具有如下渐变的可绘制文件：

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

等等，对于左右阴影，只需更改渐变的角度即可：)

— 莫特萨·拉斯特古（Morteza Rastgoo）
source
我在哪里称呼below_shadow？视图的背景？
— 亚瑟·梅洛
1
创建below_shadow xml文件，然后在您的视图中，在布局中添加一个“视图”，并将below_shadow.xml设置为该视图的背景
— Morteza Rastgoo，2016年
我的操作与您说的相同，但是当我将该视图放入自定义视图时，“ above_shadow”并不透明。单独工作正常。我该怎么办？
— SoYoung
18

或者，您可以使用9补丁图像作为布局的背景，以允许更多的“自然”阴影：

在此处输入图片说明

结果：

在此处输入图片说明

将图像放在/res/drawable文件夹中。
确保文件扩展名为.9.png，而不是.png

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

[编辑]

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

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

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

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

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

您在可绘制的文件中创建文件.xml，名称为drop_shadow.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"/>
— 安·迪（Anh Duy）
source
3

使用这一行，希望您会获得最佳结果；

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

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

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

<LinearLayout
    android:id="@+id/layout"
    ...
    android:elevation="2dp"
    android:background="@drawable/rectangle" />
— 草丁醇
source
2
API <21的行为是什么？
— CoolMind
1
不幸的是，在棒棒糖之前它不起作用，因此您应该使用此问题中的其他一些答案。但是，如果您以较新的手机为目标，则这是一种非常有效的简便方法。
— Krzynool
2

1.首先在“ drawable”文件夹中创建一个名为shadow.xml的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">
— Sudhir singh
source
非常感谢先生，您的代码似乎还不错...
— John dahat
1
@Johndahat没关系
— Sudhir singh
1

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>
— سیدرسولمیرعظیمی
source
1

我知道这很晚了，但是可以帮助到别人。

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

        android:elevation="4dp"
— 哈里珊斯·拉文德伦
source
0

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

  1. 您需要在布局上设置实心矩形背景。

  2. 使用此代码- ViewCompat.setElevation(view , value)

  3. 在父布局集上 android:clipToPadding="false"

— 萨塔克·甘地
source
2
如果你不知道，这是目前执行的ViewCompat.setElevation()对ViewCompat类方法：public void setElevation(View view, float elevation) {}。如您所见，它尚未实现。我真的怀疑这会不会有帮助，并且真的想知道您是否实际测试了自己的答案，大声笑
— mradzinski
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.