Home » Android » Clarification about Android clipToPadding property

Clarification about Android clipToPadding property

Posted by: admin June 15, 2020 Leave a comment

Questions:

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.

How to&Answers:

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.

Bounds and 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=true

With clipToPadding=false, we see the whole shadow:

enter image description here

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>