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:
With 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 oval
drawable:
<shape android:shape="oval">
<solid android:color="#f2f2f2"/>
</shape>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With