I have a layer-list
that I am using as the background to RelativeLayout
in my app. (this layout is being used as an overlay on top of other apps/browsers in android which is why you see chrome in the screenshot below). One of the shapes in the layer-list
is a rotated rectangle. I want to use elevation to provide a shadow for this layer-list
but it appears as though the shadow for the rotated element is the same as if it were not rotated.
drawable bubble.xml
:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:left="0dp"
android:top="20dp">
<rotate
android:fromDegrees="-45"
android:pivotX="0%"
android:pivotY="0%"
android:toDegrees="0">
<shape android:shape="rectangle" >
<padding android:top="0dp" />
<solid android:color="#FFFFFF" />
</shape>
</rotate>
</item>
</layer-list>
Layout file:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/opbFab"
android:layout_alignParentTop="true"
android:layout_toEndOf="@+id/opbFab"
android:layout_toRightOf="@+id/opbFab"
android:height="20dp"
android:background="@drawable/bubble"
android:elevation="10dp"
android:gravity="center_vertical"
android:orientation="horizontal"
android:textColor="@color/primary">
...
</RelativeLayout>
The first image shows the shape when it has not been rotated with the correctly applied elevation/shadow.
The second image shows that the shape (white rectangle) has been rotated but the shadow remains the same.
Correct shadow:
Incorrect shadow: