Home » Android

Slide image to XScale in Android (animation)

In this article, we are going to set animation on an image view by sliding the given image to XScale in Android.
Submitted by Manu Jemini, on February 01, 2018

In the example below, we are going to use the Animation.Animation class to create animation. This AnimationUtils.loadAnimation will create an object which can be used to create the animation for the image.

To implement this in your program you will need to import: android.view.animation.Animation, android.view.animation.AnimationUtils in your java file. Then create a layout file with a single button in the center and an ImageView.

<ImageView
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:id="@+id/imageView"
	android:src="@drawable/includehelp"
	android:layout_marginBottom="200dp" />

<Button
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="Slide"
	android:id="@+id/button"
	android:layout_alignParentBottom="true"
	android:layout_centerHorizontal="true"
	android:layout_marginBottom="89dp"
	android:onClick="slide"/>

We will make another XML file with name of Scale.xml which will used to provide the data about the scaling magnitude along the relative axis.

<scale
	android:duration="2000"
	android:fromXScale="1.0"
	android:fromYScale="1.0"
	android:interpolator="@android:anim/linear_interpolator"
	android:toXScale="0.0"
	android:toYScale="1.0" />

The Object of the Animation class will be used on the image: image.startAnimation(animation1);

1) Java file:

package com.example.hp.myapplication;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    public void slide(View view){
        ImageView image = (ImageView)findViewById(R.id.imageView);
        Animation animation1 =
                AnimationUtils.loadAnimation(getApplicationContext(), R.anim.slide);
        image.startAnimation(animation1);
    }
}

2) XML file:

<?xml version="1.0" encoding="utf-8"?>
<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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.hp.myapplication.MainActivity">


    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView"
        android:src="@drawable/includehelp"
        android:layout_marginBottom="200dp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Slide"
        android:id="@+id/button"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="89dp"
        android:onClick="slide"/>

</RelativeLayout>

3) Manifest file:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.hp.myapplication">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

4) Slide.xml file:

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

    <scale
        android:duration="2000"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:interpolator="@android:anim/linear_interpolator"
        android:toXScale="0.0"
        android:toYScale="1.0" />
</set>

Output