[英]how to add shadow effect on drawable in android
我创建了带有 drawable 的聊天气泡,看起来不错,现在我想在 drawable 下方添加阴影效果,这样它就会产生 3d 效果。我不想使用 9 间距图像。 我只想知道如何在这个 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:height="@dimen/normal_button_height"
android:width="@dimen/normal_button_width" />
--- 角指针 '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:width="1dp"/>
<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_width="wrap_content"
android:layout_height="wrap_content" >
<View
android:id="@+id/left_chatArror"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_alignParentRight="true"
android:layout_marginTop="6dp"
android:background="@drawable/chat_laftarraow"/>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
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>
请建议我如何在气泡下方添加阴影效果,如下图所示
您可以尝试实现一个图层列表,它将充当 LinearLayout 的背景,并在其中添加您的view
。
引自对这个问题的回答:
将 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_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/background_with_shadow"/>
编辑
您可以创建单独的 xml 来创建灰色图像,如下所示:
----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:height="@dimen/normal_button_height"
android:width="@dimen/normal_button_width" />
--- 角指针'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:width="1dp"/>
<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_width="wrap_content"
android:layout_height="wrap_content" >
<View
android:id="@+id/left_chatArror"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_alignParentRight="true"
android:layout_marginTop="6dp"
android:background="@drawable/chat_laftarraow"/>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
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_width="20dp"
android:layout_height="20dp"
android:layout_alignParentRight="true"
android:layout_marginTop="15dp"
android:background="@drawable/chat_laftarraow_shdw"/>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
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>
我正在使用这个 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>
注意:-根布局应该是层列表。 在里面添加项目。
将 round_big_green_down.xml 作为背景添加到您的位置。
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.