Saturday, 26 January 2019

How to create a shape with a transparent background and a shadow, but the shadow should not be visible behind the shape outline?

Somewhat similar question here but answer is to just remove elevation and shadow... not what I want: Android CardView with weird border when transparent

What I want is what is shown in the Pixel Launcher search bar... namely a shape which has a semi transparent background and also a shadow, but the shadow does not overlap with the white shape (which would end up making it look grey). I basically want a shadow but with a hole in the middle of it where my shape is...

This is what I want to achieve (the search bar down the bottom): What I want

Here is what I have tried but you can see from the attached picture, that the grey shadow is coming through the semitransparent white background.

activity_main.xml

    <FrameLayout
      android:layout_width="120dp"
      android:layout_height="120dp"
      android:background="@drawable/rectangle"
      android:elevation="8dp" />

Rectangle.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android">
  <corners android:radius="4dp" />
  <solid android:color="#aaffffff" />
</shape>

This is what my attempt looks like: My failed attempt

You can see that even though my shape is semi transparent white on a white background, it turns grey because of the shadow underneath which is not what I want.

I have also tried playing with View#setOutlineProvider with no success.

I have also tried playing with https://github.com/harjot-oberai/MaterialShadows

I don't want to do it with a 9patch image if I can avoid it.



from How to create a shape with a transparent background and a shadow, but the shadow should not be visible behind the shape outline?

No comments:

Post a Comment