如何在android中的drawable上添加阴影效果

Posted 2023-04-14

技术标签:

【中文标题】如何在android中的drawable上添加阴影效果【英文标题】：how to add shadow effect on drawable in android 【发布时间】：2014-12-08 23:11:54 【问题描述】：

我用drawable创建了聊天气泡，看起来不错，现在我想在drawable下方添加阴影效果，使其产生3d效果。我不想使用9-pitch图像。我只想知道如何在这个drawable上添加阴影效果。我的代码是

----right_bubble_chat_drawable

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

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

        <padding
            android:bottom="10dp"
            android:left="10dp"
            android:right="10dp"
            android:top="10dp" />

        <size
            android:
            android: />

--- 对于角指针'chat_laftarraow'

  <?xml version="1.0" encoding="utf-8"?>
   <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item >
     <rotate
        android:fromDegrees="90"
        android:toDegrees="-90"
        android:pivotX="50%"
        android:pivotY="50%" >
    <rotate
        android:fromDegrees="45"
        android:toDegrees="45"
        android:pivotX="-40%"
        android:pivotY="86%" >
        <shape
            android:shape="rectangle"  >
            <stroke android:color="#00aaef" android:/>
            <solid
                android:color="#00aaef"  />

        </shape>
       </rotate>
       </rotate>
      </item>
    </layer-list>

------- 我像使用它们一样

 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_
android:layout_ >
   <View
    android:id="@+id/left_chatArror"
    android:layout_
    android:layout_
    android:layout_alignParentRight="true"
    android:layout_marginTop="6dp"
    android:background="@drawable/chat_laftarraow"/>

<RelativeLayout

    android:layout_
    android:layout_
    android:maxWidth="220dp"
    android:layout_marginRight="-3dp"
    android:orientation="horizontal"
    android:layout_toLeftOf="@+id/left_chatArror"
    android:paddingBottom="5dp"
    android:paddingTop="5dp"
    android:background="@drawable/right_bubble_chat_drawable">

    </RelativeLayout>
  </RelativeLayout>

请建议我如何在气泡下方添加阴影效果，如下图所示

【问题讨论】：

【参考方案1】：

您可以尝试通过实现一个图层列表来充当 LinearLayout 的背景，并在其中添加您的 view。

引用this question的回答：

将 background_with_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>

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

<LinearLayout
  android:layout_
  android:layout_
  android:background="@drawable/background_with_shadow"/>

编辑

您可以创建单独的 xml 来创建像 thsis 这样的灰色图像：

----right_bubble_shdw_chat_drawable

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

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

        <padding
            android:bottom="10dp"
            android:left="10dp"
            android:right="10dp"
            android:top="10dp" />

        <size
            android:
            android: />

--- 对于角指针'chat_laftarraow_shdw'

  <?xml version="1.0" encoding="utf-8"?>
   <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item >
     <rotate
        android:fromDegrees="90"
        android:toDegrees="-90"
        android:pivotX="50%"
        android:pivotY="50%" >
    <rotate
        android:fromDegrees="45"
        android:toDegrees="45"
        android:pivotX="-40%"
        android:pivotY="86%" >
        <shape
            android:shape="rectangle"  >
            <stroke android:color="@android:color/darker_gray" android:/>
            <solid
                android:color="@android:color/darker_gray"  />

        </shape>
       </rotate>
       </rotate>
      </item>
    </layer-list>

------- 我像使用它们一样

 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_
android:layout_ >
   <View
    android:id="@+id/left_chatArror"
    android:layout_
    android:layout_
    android:layout_alignParentRight="true"
    android:layout_marginTop="6dp"
    android:background="@drawable/chat_laftarraow"/>

<RelativeLayout

    android:layout_
    android:layout_
    android:maxWidth="220dp"
    android:layout_marginRight="-3dp"
    android:orientation="horizontal"
    android:layout_toLeftOf="@+id/left_chatArror"
    android:paddingBottom="5dp"
    android:paddingTop="5dp"
    android:background="@drawable/right_bubble_chat_drawable">

    </RelativeLayout>


   <View
    android:id="@+id/left_chatArrorShdw"
    android:layout_
    android:layout_
    android:layout_alignParentRight="true"
    android:layout_marginTop="15dp"
    android:background="@drawable/chat_laftarraow_shdw"/>

<RelativeLayout

    android:layout_
    android:layout_
    android:maxWidth="220dp"
    android:layout_marginRight="-3dp"
    android:orientation="horizontal"
    android:layout_toLeftOf="@+id/left_chatArror"
    android:paddingBottom="5dp"
    android:paddingTop="5dp"
    android:background="@drawable/right_bubble_shdw_chat_drawable">
  </RelativeLayout>

【讨论】：

制作不同的layer-list 代码，只需在颜色代码中添加<solid android:color="@android:color/darker_gray" /> 没看懂，能不能给个例子或者代码。在你的 right_bubble_chat_drawable xml 中，而不是 <solid android:color="@color/chatrightbubbleColor" /> 使用 <solid android:color="@android:color/darker_gray" /> 和在 `'chat_laftarraow'` 中相同的地方，你使用 android:color 单独的 xml 作为阴影并添加另一个相同的用法为你的泡泡顶部（EDIT 文本上方）是此答案的副本：***.com/a/14871171 你能帮我吗http://***.com/questions/43412704/how-to-draw-a-dot-circle-inside-a-square-drawable-in-android【参考方案2】：

我正在使用这个 drawable/shadow.xml 文件

<!-- Drop Shadow Stack -->
<item>
    <shape>
        <padding
            android:bottom="1dp"
            android:left="1dp"
            android:right="1dp"
            android:top="1dp" />

        <solid android:color="#00CCCCCC" />

        <corners android:radius="3dp" />
    </shape>
</item>
<item>
    <shape>
        <padding
            android:bottom="1dp"
            android:left="1dp"
            android:right="1dp"
            android:top="1dp" />

        <solid android:color="#10CCCCCC" />

        <corners android:radius="3dp" />
    </shape>
</item>
<item>
    <shape>
        <padding
            android:bottom="1dp"
            android:left="1dp"
            android:right="1dp"
            android:top="1dp" />

        <solid android:color="#20CCCCCC" />

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

<!-- Background -->
<item>
    <shape>
        <solid android:color="@android:color/white" />

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

注意：- 根布局应该是层列表。在里面添加项目。

【讨论】：

【参考方案3】：

将round_big_green_down.xml 添加为您的位置的背景。

<LinearLayout
       android:orientation="vertical"
       android:layout_
       android:layout_
       android:background="@drawable/**round_big_green_down**"
       android:paddingBottom="@dimen/button_margin_100"/>

res/drawable/round_big_green_down.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Drop Shadow Stack -->
    <item>
        <shape>
            <padding android:top="1.5dp" />
            <solid android:color="#00000000" />
            <corners android:radius="@dimen/button_radius" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1.5dp" />
            <solid android:color="#01000000" />
            <corners android:radius="@dimen/button_radius" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1.5dp" />
            <solid android:color="#02000000" />
            <corners android:radius="@dimen/button_radius" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1.5dp" />
            <solid android:color="#03000000" />
            <corners android:radius="@dimen/button_radius" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1.5dp" />
            <solid android:color="#04000000" />
            <corners android:radius="@dimen/button_radius" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1.5dp" />
            <solid android:color="#05000000" />
            <corners android:radius="@dimen/button_radius" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1.5dp" />
            <solid android:color="#06000000" />
            <corners android:radius="@dimen/button_radius" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1.5dp" />
            <solid android:color="#06000000" />
            <corners android:radius="@dimen/button_radius" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1.5dp" />
            <solid android:color="#06000000" />
            <corners android:radius="@dimen/button_radius" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1.5dp" />
            <solid android:color="#06000000" />
            <corners android:radius="@dimen/button_radius" />
        </shape>
    </item>

    <!-- White Top color -->
    <item android:top="@dimen/button_margin_5">
        <shape >
            <gradient
                android:angle="90"
                android:endColor="@color/primary_color_50"
                android:startColor="@color/primary_color_500" />
            <corners
                android:topLeftRadius="@dimen/button_radius"
                android:topRightRadius="@dimen/button_radius"/>
        </shape>
    </item>
</layer-list>

分辨率/值/尺寸/

<dimen name="button_radius">25dp</dimen>

【讨论】：

感谢您的关注。如果我有任何建议，会更新。

以上是关于如何在android中的drawable上添加阴影效果的主要内容，如果未能解决你的问题，请参考以下文章

Android：如何使用 XML drawable 创建精确的材料设计阴影

android 上阴影效果怎么做

在ImageView中添加发光/阴影

如何在圆形 imageView android 上添加一个阴影和边界

从 figma 为任何图标添加完整的活动阴影

如何将图像添加到 Android Studio 中的“drawable”文件夹？