如何在LinearLayout周围制作阴影?

时间:2015-09-15 10:47:17

标签: android android-linearlayout shadow android-cardview

我想在linearLayout周围制作阴影,如下图(顶部):

enter image description here

我正在使用带有形状的图层列表,但是所有底部阴影都是白色区域(见上图)。所有这些观点都是:

  <?xml version="1.0" encoding="utf-8"?>
  <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:orientation="vertical"
      android:background="@android:color/transparent" >

 <LinearLayout
     android:id="@+id/listView_layout"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:orientation="vertical"
     android:layout_marginLeft="10dp"
     android:layout_marginRight="10dp"
     android:layout_marginTop="45dp"
     android:background="@color/text_white">
 <!-- ListView to be shown on widget -->
         <ListView
             android:id="@+id/listViewWidget"
             android:layout_width="match_parent"
             android:layout_height="match_parent"/>

         <!-- Empty view is show if list items are empty -->
         <TextView
             android:id="@+id/empty_view"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:gravity="center"
             android:textColor="#ffffff"
             android:textSize="20sp"
             android:visibility="gone" />
 </LinearLayout>

 <LinearLayout
     android:layout_width="match_parent"
     android:layout_height="50dp"
     android:id="@+id/widget_toolbar"
     android:orientation="vertical"
     android:background="@drawable/layout_card_view"/>

 </FrameLayout>

如何制作?

6 个答案:

答案 0 :(得分:2)

你必须使用,这个例子有一个阴影和背景为白色的项目,你可以根据自己的喜好使用和调整。

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Drop Shadow Stack -->
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <solid android:color="#00CCCCCC" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <solid android:color="#10CCCCCC" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <solid android:color="#20CCCCCC" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <solid android:color="#30CCCCCC" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <solid android:color="#50CCCCCC" />
        </shape>
    </item>

    <!-- Background -->
    <item>
        <shape>
            <solid android:color="#FFF" />
            <corners android:radius="3dp" />
        </shape>
    </item>
</layer-list>

您可以根据需要添加更多投影。检查每一个的颜色。

答案 1 :(得分:1)

使用drawable的阴影效果:

1)创建阴影9补丁图像。

2)将9个补丁图像设置为布局背景。

使用此generator创建9个补丁阴影图像。

答案 2 :(得分:0)

试试这个......

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

答案 3 :(得分:0)

您可以使用此 第1行

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

    <item><layer-list>
        <item android:right="7dp" android:top="3dp"><shape>


        </shape></item>
        <item ><shape>
         <gradient android:angle="270" android:endColor="#FFFFFF" android:startColor="#BABABA" />
          <padding android:bottom="2dp" android:left="2dp" android:right="2dp" android:top="2dp" />
        </shape></item>

    </layer-list></item>

</layer-list>

第二路

您可以使用 9补丁图片。

答案 4 :(得分:0)

将ll_shadow.xml文件添加到res/drawable

<?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="@android:color/darker_gray"/>
    <corners android:radius="5dp"/>
    </shape>
  </item>
  <item android:right="1dp" android:left="1dp" android:bottom="2dp">
    <shape 
      android:shape="rectangle">
    <solid android:color="@android:color/white"/>
    <corners android:radius="5dp"/>
    </shape>
  </item>
</layer-list>

USE

<LinearLayout
    android:background="@drawable/ll_shadow"/>

答案 5 :(得分:0)

使用此代码并在drawable中创建一个shedow.xml文件,然后在布局文件中用作背景以获取所需的输出。

    <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Bottom 2dp Shadow -->
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#your_shadow_color" />
            <corners android:radius="7dp" />
        </shape>
    </item>
    <!-- Green Top color -->
    <item android:bottom="3px">
        <shape android:shape="rectangle">
            <solid android:color="#your_view_background_color" />
            <corners android:radius="7dp" />
        </shape>
    </item>
</layer-list>