Android LinearLayout:在LinearLayout周围添加阴影边框

时间:2014-06-07 08:12:28

标签: android border android-linearlayout

我想创建此LinearLayout的相同边框作为示例:

enter image description here

在这个例子中,我们可以看到borderLayout周围的边框不一样。 如何使用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>

15 个答案:

答案 0 :(得分:214)

试试这个..

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

答案 1 :(得分:70)

这就是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.+'

答案 2 :(得分:54)

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

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

示例:

9补丁图:

The 9 patch graphic:

结果:

enter image description here

来源:

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

答案 3 :(得分:33)

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

1.首先在&#34; drawable&#34;中创建一个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">

这对我有用。

答案 4 :(得分:18)

这很简单:

使用如下渐变创建可绘制文件:

表示视图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>

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

答案 5 :(得分:17)

作为替代方案,您可以使用9补丁图像作为布局的背景,从而允许更多“自然”阴影:

enter image description here

结果:

enter image description here

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

顺便说一下,这是在API 19 sdk resources文件夹中找到的现有资源的修改(缩小到最小平方大小)。
我留下了红色标记,因为它们似乎没有任何危害,如draw9patch工具所示。

<强> [编辑]

大约9个补丁,如果你从未与他们有任何关系。

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

黑色标记区域(左侧和顶部)将伸展(垂直,水平) 黑色标记区域(右侧,底部)定义“内容区域”(可以添加文本或视图的位置 - 如果您愿意,可以将未标记区域称为“填充”)。

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

答案 6 :(得分:9)

使用名称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"/>

答案 7 :(得分:3)

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

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

答案 9 :(得分:1)

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

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

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

  3. 在父版面集android:clipToPadding="false"

答案 10 :(得分:1)

使用这一行,希望您能获得最佳结果;

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

答案 11 :(得分:0)

你可以使用9补丁图形,但这是错误的方式,因为你必须使用png文件。我认为你应该使用xml文件(drawable文件)。 尝试使用此代码

activity_main.xml

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp"
android:orientation="vertical">
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="3dp"
    android:layout_marginLeft="3dp"
    android:layout_marginRight="3dp"
    android:background="@drawable/gradient_top"/>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
    <LinearLayout
        android:layout_width="3dp"
        android:layout_height="match_parent"
        android:layout_marginBottom="3dp"
        android:background="@drawable/gradient_left"/>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginRight="3dp"
            android:layout_marginBottom="3dp"
            android:background="@color/md_white_1000"
            android:orientation="vertical">

        </LinearLayout>

    <LinearLayout
        android:layout_width="3dp"
        android:layout_height="match_parent"
        android:layout_marginLeft="-4dp"
        android:layout_marginBottom="3dp"
        android:background="@drawable/gradient_right"/>
</LinearLayout>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="3dp"
    android:layout_marginTop="-4dp"
    android:layout_marginLeft="3dp"
    android:layout_marginRight="3dp"
    android:background="@drawable/gradient_bottom"/>

gradient_top.xml

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

gradient_left.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
    android:startColor="#dadada"
    android:endColor="#f2f2f2"
    android:angle="180"/>
</shape>

gradient_right.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
    android:startColor="#dadada"
    android:endColor="#f2f2f2"
    android:angle="0"/>
</shape>

gradient_bottom.xml

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

enter image description here

答案 12 :(得分:0)

您可以使用此网站生成阴影:http://inloop.github.io/shadow4android/。  设置参数并下载9-patch.png文件。

答案 13 :(得分:0)

如果您已有形状的边框,只需添加高程:

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

答案 14 :(得分:0)

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

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

        android:elevation="4dp"