Clarification about Android clipToPadding property

Question

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.

Hehe. Android documentation can be confusing sometimes, not to mention filled with grammatical errors and what not. Maybe [this](https://plus.google.com/photos/+AndroidDevelopers/albums/5984848297731814001) can help? (You would need to expand the text by clicking on Read More, just above the GIF.) — Ishita Sinha, Aug 16 '16 at 09:53
Basically, if you `clipToPadding=true`, the parent will clip off its children as if the padded portion hides a portion the child under it. I don't know if I'm making much sense to you... :/ — Ishita Sinha, Aug 16 '16 at 09:56
Well, I also managed to find the same example with lists, but I cannot understand, how it works, when there are no lists, but ordinary [no list] views :( — rofl, Aug 16 '16 at 18:05
Possible duplicate of [Android what does the clipToPadding Attribute do?](http://stackoverflow.com/questions/40953049/android-what-does-the-cliptopadding-attribute-do) — Richard Le Mesurier, Jan 10 '17 at 10:35

score 37 · Answer 1 · edited May 23 '17 at 12:34

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>

Clarification about Android clipToPadding property

1 Answers1