android:elevation only have shadow effects on the bottom side, how to make the shadow effects show on top side?
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
![Jayce](https://lh5.googleusercontent.com/-6Us-v4aygmw/AAAAAAAAAAI/AAAAAAAACfM/uj5HaxmLayg/photo.jpg?sz=256)
Jayce
Updated on April 22, 2020Comments
-
Jayce about 4 years
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"/>