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

Question

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):

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:

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.

the gray shadow is the result of using elevation. try setting elevation value to 0dp — karan
– karan, Commented Jan 24, 2019 at 9:31
@KaranMer correct, but that will also remove the shadow, which is wanted — Eugen Pechanec
– Eugen Pechanec, Commented Jan 24, 2019 at 10:13
did you tried using lesser value for elevation ex 2dp? be more the elevation value more darker will be the shadow — karan
– karan, Commented Jan 24, 2019 at 10:15

Jake Lee · Accepted Answer · 2019-01-28 15:34:20Z

0

One solution is to apply the transparency to the frame itself, not just the rectangle's background. This would create an effect similar to the one pictured.

For example:

<FrameLayout
    android:layout_width="120dp"
    android:layout_height="120dp"
    android:elevation="8dp"
    android:alpha="0.6" />

This of course has problems if you want non-transparent elements, to fix this you could extract out the background, and do something along the lines of:

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

answered Jan 28, 2019 at 15:34

Jake Lee

8,1179 gold badges53 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related