5

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.

timothyjc
  • 2,188
  • 3
  • 29
  • 54
  • are you by any chance using it above the cardview? – karan Jan 24 '19 at 09:24
  • your layout works perfectly fine as you want it to. – karan Jan 24 '19 at 09:30
  • the gray shadow is the result of using elevation. try setting elevation value to `0dp` – karan Jan 24 '19 at 09:31
  • @KaranMer correct, but that will also remove the shadow, which is wanted – Eugen Pechanec Jan 24 '19 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 Jan 24 '19 at 10:15
  • @KaranMer I want a nice visible shadow though, and transparency without the grey tint. – timothyjc Jan 24 '19 at 11:33
  • Well you cannot change the elevation shadow color, following material design guidelines https://material.io/design/environment/elevation.html#elevation-in-material-design However, i can hack my way through it, if thats something u want – 0xA Jan 31 '19 at 08:11

1 Answers1

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>
Jake Lee
  • 7,549
  • 8
  • 45
  • 86