I am using a translate animation to move an egg(ImageButton) outside of the carton(ImageView), but it is consistently clipping, so I looked all over stackoverflow to find a solution, but after trying to implement all the solutions, it is still clipped.
Can anyone shed some light onto why mine is still clipping, here is the XML:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:gravity="top"
android:clipChildren="false"
android:clipToPadding="false"
android:layout_height="match_parent">
<ImageButton
android:id="@+id/imageButton1"
android:background="@drawable/transparentblackbackground"
android:layout_below="@+id/relativeLayout1"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:clipChildren="false" android:clipToPadding="false" >
</ImageButton>
<!-- Total Carton for Animation -->
<RelativeLayout
android:orientation="vertical"
android:layout_width="440dp"
android:id="@+id/opencarton"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:clipChildren="false"
android:clipToPadding="false" >
<!-- The carton that holds the eggs -->
<RelativeLayout
android:orientation="vertical"
android:layout_width="260dp"
android:id="@+id/opencarton"
android:layout_height="512dp"
android:layout_centerInParent="true"
android:clipChildren="false"
android:clipToPadding="false">
<ImageButton
android:id="@+id/blackbgnd"
android:background="@drawable/clearbackground"
android:layout_height="600dp"
android:layout_width="400dp"
android:clipChildren="false"
android:clipToPadding="false"
android:gravity="center">
</ImageButton>
<!-- Top of Carton image -->
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/topcomponent"
android:src="@drawable/topofcarton"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:clipChildren="false"
android:clipToPadding="false">
</ImageView>
<!-- First Row Of eggs goes here in future -->
<ImageButton android:clipChildren="false" android:clipToPadding="false" android:layout_height="158dp" android:id="@+id/egg1" android:background="@drawable/goldegg" android:layout_width="79dp" android:layout_alignTop="@id/topcomponent" android:layout_alignParentLeft="true" android:layout_marginLeft="10dp" android:layout_marginTop="3dp"></ImageButton>
<ImageButton android:clipChildren="false" android:clipToPadding="false" android:layout_height="158dp" android:id="@+id/egg2" android:background="@drawable/goldegg" android:layout_width="79dp" android:layout_alignTop="@id/topcomponent" android:layout_alignParentLeft="true" android:layout_marginLeft="90dp" android:layout_marginTop="3dp"></ImageButton>
<ImageButton android:clipChildren="false" android:clipToPadding="false" android:layout_height="158dp" android:id="@+id/egg3" android:background="@drawable/goldegg" android:layout_width="79dp" android:layout_alignTop="@id/topcomponent" android:layout_alignParentLeft="true" android:layout_marginLeft="170dp" android:layout_marginTop="3dp"></ImageButton>
................
</RelativeLayout>
</RelativeLayout>
</RelativeLayout>
Ok, I wasted about one hour solving a similar problem.
I suppose that you are animating the object "manually" using some transformations or so and calling postInvalidateDelayed() or similar to force a refresh.
The problem is (was for me) that you need to call it on the top view, because otherwise the canvas gets clipped automatically to the item you are refreshing. So calling invalidate() (or similar) on the very top view should cause redraw with canvas that is not clipped too much.
In your case, I noticed you have two "opencarton" ids defined, you should be probably refreshing the top one or the very top RelativeLayout.