CODEWITHSUNDEEP
androidandroid-imageviewandroid-animation
BionicSheep
BionicSheep

Reputation: 444

ImageView scale up animation cuts off image

In my app I would like to animate an icon expanding to about 120% of its size. The problem is that when I do this the contents of the ImageView get cut off. Is there anyway to grow it so that this doesn't happen?

enter image description here

The calling of the animation:

Animation sgAnimation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.highlight);
charm.startAnimation(sgAnimation);

The animation itself:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true"
android:fillBefore="true"
android:interpolator="@android:anim/accelerate_interpolator"
android:shareInterpolator="true" >

<scale
    android:duration="100"
    android:pivotX="50%"
    android:pivotY="50%"
    android:fromXScale="1.0"
    android:fromYScale="1.0"
    android:toXScale="1.5"
    android:toYScale="1.5" />
</set>

And the layout section pertaining to the imageview:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/over_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
     >        
<RelativeLayout
    android:id="@+id/charms_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="15dp"
    android:layout_marginLeft="15dp"
    android:layout_marginRight="15dp" >

    <ImageView
        android:id="@+id/charm_phone"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:alpha=".75"
        android:contentDescription="@string/account_image_description"
        android:src="@drawable/ic_phone_white_24dp" />

    <ImageView
        android:id="@+id/charm_lock"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:contentDescription="@string/account_image_description"
        android:src="@drawable/ic_qs_lock_screen_off" />

    <ImageView
        android:id="@+id/charm_camera"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:alpha=".75"
        android:contentDescription="@string/account_image_description"
        android:src="@drawable/ic_camera_white_24dp" />

Note: I have already tried replacing 24dp with wrap_content, but that didn't work

Upvotes: 6

Views: 4772

Answers (3)

tharinduNA
tharinduNA

Reputation: 580

You could have achieved the expected result by giving ImageView's parent layout height according to the scaling animation.

In your case you are trying to animate a ImageView which is 24dp in width and height. Therefore you will need a 36dp room for the ImageView to animate properly. Since you gave layout width as match_parent, your image didn't cut from left and right sides, but wrap content for the height is not going to work.

Considering one image:

<RelativeLayout
    android:id="@+id/relative_layout"
    android:layout_width="match_parent"
    android:layout_height="36dp">

    <ImageView
        android:id="@+id/image_view"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_margin="6dp"
        android:layout_alignParentLeft="true"
        android:src="@drawable/src_image"/>

<RelativeLayout/>

Upvotes: 0

BionicSheep
BionicSheep

Reputation: 444

So I ended up adding padding to the imageview and increasing the size of the imageview by the extra padding. This way when it was animated, it animated into the padding space and was not cropped.

Upvotes: 3

AlexBalo
AlexBalo

Reputation: 1268

I would try using 

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

In your imageView container and in your imageview

Upvotes: 17

Related Questions