I was working with animations recently, and got into trouble, when
FrameLayout did not show its shadow properly due to weird reasons.
I found a good answer, which helped me, but there was used a property called
clipToPadding. Answer can be found here: Android “elevation” not showing a shadow
However, I really wanted to understand the purpose of this property. I went to documentation of Android, which states that:
Defines whether the ViewGroup will clip its children and resize (but
not clip) any EdgeEffect to its padding, if padding is not zero. This
property is set to true by default.
I have read it for many times and I looked for examples on the web, but I really failed to find some. The only visuals I found was similar to this ClipToPadding difference
I can see the effect on the list, but how can it affect, when there is only one
View in the
ViewGroup for example etc.
It would be nice if someone could provide me a few key points about this property and how it works with a few examples.
clipToPadding basically means “If the view draws beyond its bounds into the padding area, overwrite this drawing with the parent’s padding”.
The shadow of an elevated view is drawn outside of the view’s bounds. In order for it to be visible, you need to make sure that there is space around the view. You can achieve this by setting padding on the parent, but then you need to set
clipToPadding=false so that the shadow is not overwritten.
As noted in this answer, this is also useful when you have a scrollable view such as a ListView or RecyclerView. When scrolling the list will draw contents out of its bounds. If you set
clipToPadding=false, you’ll be able to see that content instead of the padding, and only see the padding when you’ve completely scrolled up or down.
As an example, let’s set an oval shape as background of a view and let’s elevate this view. We’ll also set some padding on the container. The screenshot below was taken with “Show layout bounds” activated in the Developers options. The area between the two red rectangles is the parent’s padding.
This is how it looks with
clipToPadding=true, notice how the shadow is clipped at the bottom, where it would lie between the two red rectangles:
clipToPadding=false, we see the whole shadow:
Here is the XML I used:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="match_parent" android:layout_width="match_parent" android:background="#8888ff"> <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingLeft="40dp" android:paddingRight="40dp" android:paddingTop="20dp" android:paddingBottom="20dp" android:clipToPadding="false" android:layout_centerInParent="true"> <View android:layout_width="170dp" android:layout_height="170dp" android:background="@drawable/oval" android:alpha="0.5" android:elevation="5dp" /> </RelativeLayout> </RelativeLayout>
And here is is the
<shape android:shape="oval"> <solid android:color="#f2f2f2"/> </shape>