android:elevation only have shadow effects on the bottom side, how to make the shadow effects show on top side?

Question

I use a framelayout at the bottom of an activity, in order to show the shadow effects on the fragment, I add android:elevation. But the shadow effects only appear in the bottom side not on top side, any one could give me some advice?

<FrameLayout     android:id="@+id/bottom_container"     android:background="#00737f"     android:layout_width="match_parent"     android:layout_height="50dp"     android:layout_gravity="bottom"     android:elevation="4dp"     android:layout_alignParentBottom="true"     android:layout_marginBottom="50dp"/> 

Answer 1

There is a trick that can be used to display a shadow above a View.

Basically we have to use two nested Layouts, where the outer Layout casts the shadow with an elevation and the inner layout sets the background. Then by setting a padding to the outer Layout, we can shift the inner Layout down, without moving the shadow, thus more of the shadow becomes visible:

<FrameLayout     android:layout_width="match_parent"     android:layout_height="50dp"     android:layout_alignParentBottom="true"     android:layout_marginBottom="50dp"     android:elevation="4dp"     android:outlineProvider="bounds"     android:paddingTop="2dp"     android:layout_marginTop="-2dp">      <FrameLayout         android:layout_width="match_parent"         android:layout_height="match_parent"         android:background="#00737f">          <!-- content -->      </FrameLayout>  </FrameLayout> 

An important thing here is the attribute outlineProvider, that is required to make the outer Layout cast a shadow even without having a background set.

Further we specify a negative margin to compensate for the offset created by the padding. Depending on the use-case we can omit that.

But attention: If we shift the View too much, some rendering artifacts become visible:

^{Source of this example on Github}