clipChildren is not working

Question

In my application i am trying to move images using animation. When i try to animate the image (imageView2 or imageView4) to imageView1, the image is cutting when it is moving out of the Layout. Here Source image is imageView2 or imageView4 and destination image is imageView1

Below is my XML:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/animRL"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:clipChildren="false"
    android:clipToPadding="false"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="40dp"
        android:layout_height="60dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:src="@drawable/deskcard" />

    <RelativeLayout
        android:id="@+id/baselayout"
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/imageView1"
        android:clipChildren="false"
        android:clipToPadding="false" >

        <RelativeLayout
            android:id="@+id/layout"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="5dp"
            android:clipChildren="false"
            android:clipToPadding="false"
            android:gravity="bottom|center" >

            <ImageView
                android:id="@+id/imageView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_alignTop="@+id/imageView4"
                android:layout_marginLeft="118dp"
                android:clipChildren="false"
                android:clipToPadding="false"
                android:src="@drawable/test" />

            <ImageView
                android:id="@+id/imageView4"
                android:layout_width="40dp"
                android:layout_height="60dp"
                android:layout_alignParentBottom="true"
                android:layout_alignParentRight="true"
                android:layout_marginBottom="16dp"
                android:layout_marginRight="104dp"
                android:clipChildren="false"
                android:clipToPadding="false"
                android:src="@drawable/test1" />
        </RelativeLayout>
    </RelativeLayout>


</RelativeLayout>

And animation code is below:

imageView4.setOnClickListener(new View.OnClickListener() {

                @Override
                public void onClick(View v) {
                    // TODO Auto-generated method stub
                     int sourceCoords[] = new int[2];
                        int targetCoords[] = new int[2];
                        int xDelta;
                        int yDelta;
                        imageView4.getLocationOnScreen(sourceCoords);
                        image.getLocationOnScreen(targetCoords);
                        xDelta = targetCoords[0] - sourceCoords[0];
                        yDelta = targetCoords[1] - sourceCoords[1];

                    TranslateAnimation animation = new TranslateAnimation(0, xDelta, 0, yDelta);
                    animation.setDuration(400);
                    animation.setFillAfter(false);
                    animation.setAnimationListener(new MyAnimationListener());

                    imageView4.startAnimation(animation);
                }
            });

Answer 1

i know its late , but this is the simplest complete answer :

just put on every layout :

    android:clipChildren="false"
    android:clipToPadding="false"

Answer 2

Hi~ if your layout includes "paddingXXX" tags, you can remove them and try again. it's work for me~

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipChildren="false"
    android:gravity="center_vertical"
    android:padding="8dp"
    android:orientation="horizontal">

code above will clip childView and next will not:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipChildren="false"
    android:gravity="center_vertical"
    android:orientation="horizontal">

Answer 3

The final reason is "RelativeLayout". So to solve it, don't use RelativeLayout as your Larger-than-parent control's parent. FrameLayout instead, like:

<!-- it's ok as grand parent -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:clipChildren="false">

    <!-- parent must not be a RelativeLayout -->
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="38dp"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="9dp">

        <!-- Your Larger-than-parent View -->
        <View
            android:layout_width="56dp"
            android:layout_height="138dp"
            android:layout_gravity="center"
            android:background="@android:color/black" />

    </FrameLayout>

</RelativeLayout>

Answer 4

One of the parents of your RelativeLayout might be clipping children (sometimes compatibility libraries add a mystery ViewGroup such as NoSaveStateFrameLayout for example). I've used something like this in the past with success to disable clip on all parents of a view:

public void disableClipOnParents(View v) {
    if (v.getParent() == null) {
        return;
    }

    if (v instanceof ViewGroup) {
        ((ViewGroup) v).setClipChildren(false);
    }

    if (v.getParent() instanceof View) {
        disableClipOnParents((View) v.getParent());
    }
}

Answer 5

The idea of @roflharrison is quite good, however, the codes has some problem: Here we disable clipChildren recursively, but when we reached the root view, it's v.getParents() would be null, the method returns immediately, and its ClipChildren attribute won't be disabled.

What's more, for the following line:

if (v.getParent() instanceof View)

?? Shouldn't the parent of the view be a ViewGroup? And shouldn't we disable ViewGroup's clip attributes, not View's? So I change the code to the following, and it worked quite well:

public void disableClipOnParents(View v) {
    if (v == null) {
        return;
    }
    if (v instanceof ViewGroup) {
        ((ViewGroup) v).setClipChildren(false);
    }
    disableClipOnParents((View) v.getParent());
}