Android: Animation gets clipped by parent view

Question

I currently have an ImageView which i am applying a scale animation to. This view is inside a relative layout which has layout_height and layout_width set as wrap_content. The problem is when the animation starts it makes the imageview bigger than its parent layout and the image then gets cut off. Is there anyway around this?

Here is a working sample:

xml file -

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dip" 
    android:layout_gravity="center_horizontal">
    <ImageView
        android:id="@+id/imgO"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/circle"/>
    </RelativeLayout>
</LinearLayout>

java file -

ImageView imgO;

ScaleAnimation makeSmaller;
ScaleAnimation makeBigger;

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.titlescreen);

    //Animation
    imgO = (ImageView)findViewById(R.id.imgO);

    makeSmaller = new ScaleAnimation((float)10.0, (float)1.0, (float)10.0, (float)1.0, Animation.RELATIVE_TO_SELF, (float)0.5, Animation.RELATIVE_TO_SELF, (float)0.5);
    makeSmaller.setAnimationListener(new MyAnimationListener());
    makeSmaller.setFillAfter(true);
    makeSmaller.setDuration(500);
    makeBigger = new ScaleAnimation((float)1.0, (float)10.0, (float)1.0, (float)10.0, Animation.RELATIVE_TO_SELF, (float)0.5, Animation.RELATIVE_TO_SELF, (float)0.5);
    makeBigger.setAnimationListener(new MyAnimationListener());
    makeBigger.setFillAfter(true);
    makeBigger.setDuration(750);
    imgO.startAnimation(makeBigger);
}

class MyAnimationListener implements AnimationListener {

    public void onAnimationEnd(Animation animation) {

        ScaleAnimation sa = (ScaleAnimation)animation;

        if (sa.equals(makeSmaller))
            imgO.startAnimation(makeBigger);
        else
            imgO.startAnimation(makeSmaller);
    }

    public void onAnimationRepeat(Animation animation) {
    }

    public void onAnimationStart(Animation animation) {
    }

}

Thanks.

Solution 1

I fixed this by making everything fill parent then centering the images horizontally and vertically.

Solution 2

A little late for you, but for everybody looking for an answer: You can call setClipChildren(false) on the enclosing ViewGroups (like RelativeLayout or LinearLayout).

Solution 3

I was applying a translation and alpha animation to a child view and the parent was clipping the child bounds.

For me @HerrHo's answer by itself didn't work, but once I added

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

together, it started working!

Comments

[Ricky]

excelent anwser! you can also clean your code if you use XML: android:clipChildren="false"

[tricknology]

Thanks, if those children were buttons, how would you keep the onClickListener events? Mine are disappearing.

[daxgirl]

Outstanding answer! Thanks! Worth mentioning, it's enough to set clipChildren to "false" on main parent (root layout).

[Randy]

I had to add android:clipToPadding="false" as well. Thanks for the additional information!