{"id":600,"date":"2017-12-02T14:07:19","date_gmt":"2017-12-02T14:07:19","guid":{"rendered":"http:\/\/abhiandroid.com\/materialdesign\/?page_id=600"},"modified":"2024-02-23T11:27:46","modified_gmt":"2024-02-23T11:27:46","slug":"animation","status":"publish","type":"page","link":"https:\/\/abhiandroid.com\/materialdesign\/animation","title":{"rendered":"Animation Tutorial With Example In Android Studio"},"content":{"rendered":"

Property Animation API was introduced by Google in Android 3.0 which gives us the flexibility\u00a0to change object properties over a certain time interval. The Animations Framework allows us to create visually attractive animations and transitions in our apps. Using the animations, one can turn their good looking app into an excellent and highly usable app.<\/p>\n

\"AnimationsAnimations are useful when the screen changes state, i.e when the content loads or new actions become available.<\/p>\n

Animation is the process of creating motion and shape change. In this Tutorial we will show how simple animations encourage you to use them more freely and confidently.<\/p>\n

Animations notify users about what’s going on in your app and improve the mental model of your app’s interface.<\/p>\n

\n

Android Defines Three Types Of Animations:<\/strong><\/h4>\n

View Animation<\/strong>:<\/p>\n

This is the simplest animation used in Android. It define the properties of our Views that should be animated using a technique called Tween Animation.It take the following parameters i.e. size, time duration , rotation angle, start value , end value, and perform the required animation on that object.You can\u00a0 execute the animation by specifying transformations on your View. This can be done in XML resource files or programmatically.<\/p>\n

Android View animation can make animation on any View objects, such as ImageView, TextView or Button objects. View animation can only animate simple properties like position, size, rotation, and the alpha property that allows you animate the transparency of a View.<\/p>\n

The drawback of this mechanism is that it can only be applied to Views.<\/p>\n

Property Animation: <\/strong><\/p>\n

This animation was introduced in Android 3.0 (API level 11). It allows the user to animate anything.<\/p>\n

Property animations are highly customizable, you can specify the duration, the number of repeats, the type of interpolation, and the frame rate of the animation. The Property Animation system is always preferred for more complex animations.<\/p>\n

Property animations allow us to animate any property of any object from one value to another over a specified duration. Let us take an example, imagine you wanted to animate the 3d<\/a> rotation using the rotationX or rotationY properties that were introduced in API 11. Or maybe you want to animate a color change or animate the change of a drawable. This is not possible by using View Animations. For this purpose Property Animation is used .<\/p>\n

You are not limited by predefined animation types or by the type of object that you want to animate. At first the usage of the Property Animation System might seem a little complicated. However, in most cases you can use the very versatile ObjectAnimator that uses reflection. The ObjectAnimator makes creating Property Animations almost as easy as creating View Animations.<\/p>\n

Common properties commonly animated on views include:<\/p>\n\n\n\n\n\n\n\n\n\n
Property<\/th>\nDescription<\/th>\n<\/tr>\n<\/thead>\n
alpha<\/td>\nFade in or out<\/td>\n<\/tr>\n
rotation, rotationX, rotationY<\/td>\nSpin or flip<\/td>\n<\/tr>\n
scaleX ,scaleY<\/td>\nGrow or shrink<\/td>\n<\/tr>\n
x,y,z<\/td>\nPosition<\/td>\n<\/tr>\n
translationX, translationY, translationZ\u00a0\u00a0(API 21+)<\/td>\nOffset from Position<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

 <\/p>\n

Drawable Animation:<\/strong><\/p>\n

This animation\u00a0allows the user to load drawable resources and display them one frame after another. This method of animation is useful when user wants to animate things that are easier to represent with Drawable resources.<\/p>\n

To use Animations in Android , Android has provided us a class called Animation.<\/p>\n

To perform animation in android , we will\u00a0 call a static function loadAnimation()<\/strong>(this method is used to load animation) of the class AnimationUtils.<\/strong> We are going to receive the result in an instance of Animation Object. Its syntax is as follows \u2212<\/p>\n

Animation animation =AnimationUtils.loadAnimation(getApplicationContext(), R.anim.myanimation);<\/pre>\n
Second parameter refers to our animation.xml file.It is created under res directory(res->anim->myanimation.xml)<\/strong><\/p>\n
The Animation class has many methods given below:<\/strong><\/p>\n
1.start():\u00a0<\/strong>This method will start the animation.<\/p>\n
2.setDuration(long duration):\u00a0<\/b>This method sets the duration of an animation.<\/p>\n
3.getDuration()<\/strong>: This method gets the duration.<\/p>\n
4.end():<\/strong> This method ends the animation.<\/p>\n
5.cancel()<\/strong>: This method cancels the animation.<\/p>\n
\n
Setting The Animation Listeners (Optional)<\/strong><\/h4>\n
Animation listeners can be set by implementing AnimationListener in our Activity. If you will use AnimationListener, then\u00a0 you\u00a0 will have to override following methods.<\/p>\n
onAnimationStart<\/strong>\u00a0\u2013<\/p>\n
@Override\r\npublic void onAnimationStart(Animation animation) {\r\n}<\/pre>\n
onAnimationEnd\u00a0<\/strong>\u2013<\/p>\n
@Override\r\npublic void onAnimationEnd(Animation animation) {\r\n}<\/pre>\n
onAnimationRepeat\u00a0<\/strong>\u2013<\/p>\n
@Override\r\npublic void onAnimationRepeat(Animation animation) {\r\n}<\/pre>\n
Scale Animation<\/strong><\/em><\/p>\n
Scale Animation is used to make a smaller or larger view either on x axis or y axis. Pivot point can also be specified around which we want the animation to take place.<\/p>\n
Rotate Animation<\/em><\/strong><\/p>\n
Rotate Animation is used to rotate a view around a pivot point by a certain number of degrees.<\/p>\n
Translate Animation<\/strong><\/em><\/p>\n
Translate Animation is used to move a view along the x or y axis.<\/p>\n
Alpha Animation<\/strong><\/em><\/p>\n
Transparency of a view can be changed by Alpha Animation<\/p>\n
\n
Interpolator:<\/strong><\/h4>\n
The dictionary meaning of\u00a0 Interpolate is to alter, intercept or insert in between two things or events.<\/p>\n
It is used to insert or apply an additional animation effects between the start and the end value of the property of an object.It is also used to define the rate of change of an animation.<\/p>\n
Types of Interpolator:<\/strong><\/p>\n
1.Linear Interpolator:\u00a0<\/strong>It is the default interpolator of all animations. It defines that the rate of the change of the animation is constant.<\/p>\n
2.Accelerate Interpolator:<\/strong>\u00a0Accelerates the moving of the view, it starts out slowly and then accelerates until it reaches the final position.<\/p>\n
3.Decelerate Interpolator:<\/strong>\u00a0Does the opposite of the accelerate interpolator. It starts out fast and the slows down.<\/p>\n
4.Accelerate Decelerate Interpolator:<\/strong>\u00a0Makes the moving go slow at the beginning and the end, but fast in the middle.<\/p>\n
5.Anticipate Interpolator:<\/strong>\u00a0Moves the animation backwards before it starts<\/p>\n
6.Overshoot Interpolator:<\/strong>\u00a0Does the opposite of the anticipate interpolator. It make the animation to go further than the defined destintion, and then get back to the defined destination.<\/p>\n
7.Anticipate Overshoot Interpolator:\u00a0<\/strong>\u00a0Combines the anticipate and the overshoot interpoplator. The change starts backward then flings forward and overshoots the target value and finally goes back to the final value.<\/p>\n
8.Bounce Interpolator:<\/strong>\u00a0Makes an bounce animation before the desired animation ends.<\/p>\n
9.Cycle Interpolator:\u00a0<\/strong>Repeats the animation for a specified number of cycles.<\/p>\n
\n
Important XML Animation Attributes In Android:<\/strong><\/h4>\n
1. android:duration:<\/strong>\u00a0The duration in which animation is completed is referred to as duration attribute. It refers to the ideal duration to show the transition on the screen.<\/p>\n
android:duration=\"1500\"<\/pre>\n
2. android:fillAfter:<\/strong>\u00a0This attribute defines whether the view should be visible or not at the end of the animation.We have set its value true in our animation. If it would set to false then element changes comes to its previous state after the animation.<\/p>\n
android:fillAfter=\"true\"<\/pre>\n
3. android:interpolator:<\/strong>\u00a0This property refers to the rate of change in animation. You can define your own interpolators using the time as the constraint. In this animation we have used an inbuilt interpolator i.e.\u00a0 linear interpolator.<\/p>\n
android:interpolator=\"@android:anim\/linear_interpolator\"<\/pre>\n
4. android:startOffset:\u00a0<\/strong>It refers to\u00a0 the waiting time before an animation starts.<\/p>\n
android:startOffset=\"2000\"<\/pre>\n
5. android:repeatMode:\u00a0<\/strong>When user wants the animation to be repeated then this attribute is used<\/p>\n
android:repeatMode=\"restart\"<\/pre>\n
6. android:repeatCount: <\/strong>This attribute\u00a0defines the number of repetitions on animation.<\/p>\n
android:repeatCount=\"infinite\"<\/pre>\n
\n
Animation Example In Android Studio Showing 14 Types Of Animation:<\/strong><\/h4>\n
Below we will create one complete animation example in Android Studio which will display 14 different types of Animation. We will put the 14 types of Animation names in NavigationDrawer menu and onclick of names in menu that particular Animation will work.<\/p>\n
Below you can download code, see final output and step by step explanation of example.<\/p>\n
Download Code<\/a><\/p>\n
\"Animations<\/p>\n
Step 1<\/strong>: Create a blank new project and name it AnimationExample<\/p>\n
Step 2<\/strong>: Select Navigation Drawer Activity from Create New Project dialog, click next and then finish.<\/p>\n
\"Choose<\/p>\n
Important Note:<\/strong> When you select Navigation Drawer Activity for your project it will create four xml files in\u00a0res =>layout\u00a0<\/strong>folder and the\u00a0content_main.xml<\/strong>\u00a0file among four is important which we will use in our project.<\/p>\n
Step 3:<\/strong> Setting up NavigationDrawer for our example to show different types of Animations list in Navigation menu.<\/p>\n
activity_main.xml code:<\/strong><\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<android.support.v4.widget.DrawerLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\r\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\n    android:id=\"@+id\/drawer_layout\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    android:fitsSystemWindows=\"true\"\r\n    tools:openDrawer=\"start\">\r\n\r\n    <include\r\n        layout=\"@layout\/app_bar_main\"\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"match_parent\" \/>\r\n\r\n    <android.support.design.widget.NavigationView\r\n        android:id=\"@+id\/nav_view\"\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"match_parent\"\r\n        android:layout_gravity=\"start\"\r\n        android:fitsSystemWindows=\"true\"\r\n        app:headerLayout=\"@layout\/nav_header_main\"\r\n        app:menu=\"@menu\/activity_main_drawer\" \/>\r\n\r\n<\/android.support.v4.widget.DrawerLayout><\/pre>\n
app_bar_main.xml code<\/strong><\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<android.support.design.widget.CoordinatorLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\r\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    tools:context=\"com.example.abhishek.animationexample.MainActivity\">\r\n\r\n    <android.support.design.widget.AppBarLayout\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:theme=\"@style\/AppTheme.AppBarOverlay\">\r\n\r\n        <android.support.v7.widget.Toolbar\r\n            android:id=\"@+id\/toolbar\"\r\n            android:layout_width=\"match_parent\"\r\n            android:layout_height=\"?attr\/actionBarSize\"\r\n            android:background=\"?attr\/colorAccent\"\r\n            app:popupTheme=\"@style\/AppTheme.PopupOverlay\" \/>\r\n\r\n    <\/android.support.design.widget.AppBarLayout>\r\n\r\n    <include layout=\"@layout\/content_main\" \/>\r\n<\/android.support.design.widget.CoordinatorLayout><\/pre>\n
content_main.xml code<\/strong><\/strong><\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\r\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    android:paddingBottom=\"@dimen\/activity_vertical_margin\"\r\n    android:paddingLeft=\"@dimen\/activity_horizontal_margin\"\r\n    android:paddingRight=\"@dimen\/activity_horizontal_margin\"\r\n    android:paddingTop=\"@dimen\/activity_vertical_margin\"\r\n    app:layout_behavior=\"@string\/appbar_scrolling_view_behavior\"\r\n    tools:context=\".MainActivity\"\r\n    tools:showIn=\"@layout\/app_bar_main\">\r\n    <FrameLayout\r\n        android:id=\"@+id\/content_frame\"\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"match_parent\" \/>\r\n\r\n<\/RelativeLayout><\/pre>\n
nav_header_main.xml or nav_header.xml code:<\/strong><\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"@dimen\/nav_header_height\"\r\n    android:background=\"@drawable\/side_nav_bar\"\r\n    android:gravity=\"bottom\"\r\n    android:orientation=\"vertical\"\r\n    android:paddingBottom=\"@dimen\/activity_vertical_margin\"\r\n    android:paddingLeft=\"@dimen\/activity_horizontal_margin\"\r\n    android:paddingRight=\"@dimen\/activity_horizontal_margin\"\r\n    android:paddingTop=\"@dimen\/activity_vertical_margin\"\r\n    android:theme=\"@style\/ThemeOverlay.AppCompat.Dark\"\r\n    android:weightSum=\"1\">\r\n\r\n    <ImageView\r\n        android:id=\"@+id\/imageView\"\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:src=\"@drawable\/animation\"\r\n        android:layout_alignParentTop=\"true\"\r\n        android:layout_alignRight=\"@+id\/textView\"\r\n        android:layout_alignEnd=\"@+id\/textView\"\r\n        android:layout_marginRight=\"172dp\"\r\n        android:layout_marginEnd=\"172dp\" \/>\r\n\r\n    <TextView\r\n        android:id=\"@+id\/textView\"\r\n        android:layout_width=\"140dp\"\r\n        android:layout_height=\"55dp\"\r\n        android:text=\"ANIMATION EXAMPLE\"\r\n        android:textColor=\"#0606ea\"\r\n        android:textSize=\"11dp\"\r\n        android:textStyle=\"bold\"\r\n        android:layout_alignParentBottom=\"true\"\r\n        android:layout_alignParentRight=\"true\"\r\n        android:layout_alignParentEnd=\"true\"\r\n        android:layout_marginBottom=\"17dp\" \/>\r\n\r\n\r\n<\/RelativeLayout>\r\n\r\n<\/pre>\n
Step 4:<\/strong> Open\u00a0activity_main_drawer.xml\u00a0<\/strong>file available in\u00a0res=>menu<\/strong>\u00a0folder:<\/p>\n
Put the below code in it. In this Layout we will define different items we will create in NavigationDrawer.<\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<menu xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\r\n    xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\">\r\n\r\n    <group android:checkableBehavior=\"single\">\r\n        <item\r\n            android:id=\"@+id\/nav_zoomin\"\r\n            android:title=\"Zoom In\" \/>\r\n        <item\r\n            android:id=\"@+id\/nav_zoomout\"\r\n            android:title=\"Zoom Out\" \/>\r\n        <item\r\n            android:id=\"@+id\/nav_rotate\"\r\n            android:title=\"Rotate\" \/>\r\n        <item\r\n            android:id=\"@+id\/nav_move\"\r\n            android:title=\"Move\" \/>\r\n        <item\r\n            android:id=\"@+id\/nav_bounce\"\r\n            android:title=\"Bounce\" \/>\r\n        <item\r\n            android:id=\"@+id\/nav_Blink\"\r\n            android:title=\"Blink\" \/>\r\n        <item\r\n            android:id=\"@+id\/nav_slideup\"\r\n            android:title=\"Slide Up\" \/>\r\n        <item\r\n            android:id=\"@+id\/nav_slidedown\"\r\n            android:title=\"Slide Down\" \/>\r\n        <item\r\n            android:id=\"@+id\/nav_fade\"\r\n            android:title=\"Fade Animation\" \/>\r\n        <item\r\n            android:id=\"@+id\/nav_sequentialanimation\"\r\n            android:title=\"Sequential Animation\" \/>\r\n        <item\r\n            android:id=\"@+id\/nav_togetheranimation\"\r\n            android:title=\"Together Animation\" \/>\r\n        <item\r\n            android:id=\"@+id\/nav_flip\"\r\n            android:title=\"Flip Animation\" \/>\r\n        <item\r\n            android:id=\"@+id\/nav_drawable\"\r\n            android:title=\"Drawable Animation\" \/>\r\n        <item \r\n            android:id=\"@+id\/nav_swap\"\r\n            android:title=\"Swap Animation\"\/>\r\n    <\/group>\r\n<\/menu>\r\n\r\n<\/pre>\n
Step 5:<\/strong> Now open MainActivity.java<\/strong> file and put the below code.<\/p>\n
To make Drawer Menus functional we have used OnNavigationItemSelected()<\/strong> method. Then displaySelectedScreen() is used where a fragment object is created and intializing the fragment object which is selected.<\/p>\n
package com.example.abhishek.animationexample;\r\n\r\nimport android.support.v4.app.Fragment;\r\nimport android.os.Bundle;\r\nimport android.support.v4.app.FragmentTransaction;\r\nimport android.support.design.widget.NavigationView;\r\nimport android.support.v4.view.GravityCompat;\r\nimport android.support.v4.widget.DrawerLayout;\r\nimport android.support.v7.app.ActionBarDrawerToggle;\r\nimport android.support.v7.app.AppCompatActivity;\r\nimport android.support.v7.widget.Toolbar;\r\nimport android.view.Menu;\r\nimport android.view.MenuItem;\r\n\r\nimport com.example.abhishek.animationexample.fragment.blinkfragment;\r\nimport com.example.abhishek.animationexample.fragment.bouncefragment;\r\nimport com.example.abhishek.animationexample.fragment.drawableanimationfragment;\r\nimport com.example.abhishek.animationexample.fragment.fadefragment;\r\nimport com.example.abhishek.animationexample.fragment.flipfragment;\r\nimport com.example.abhishek.animationexample.fragment.movefragment;\r\nimport com.example.abhishek.animationexample.fragment.rotatefragment;\r\nimport com.example.abhishek.animationexample.fragment.sequentialanimationfragment;\r\nimport com.example.abhishek.animationexample.fragment.slidedownfragment;\r\nimport com.example.abhishek.animationexample.fragment.slideupfragment;\r\nimport com.example.abhishek.animationexample.fragment.swapanimationfragment;\r\nimport com.example.abhishek.animationexample.fragment.togetheranimationfragment;\r\nimport com.example.abhishek.animationexample.fragment.zoominfragment;\r\nimport com.example.abhishek.animationexample.fragment.zoomoutfragment;\r\n\r\npublic class MainActivity extends AppCompatActivity\r\n        implements NavigationView.OnNavigationItemSelectedListener {\r\n\r\n    @Override\r\n    protected void onCreate(Bundle savedInstanceState) {\r\n        super.onCreate(savedInstanceState);\r\n        setContentView(R.layout.activity_main);\r\n        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);\r\n\r\n        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);\r\n        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(\r\n                this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);\r\n        drawer.setDrawerListener(toggle);\r\n        toggle.syncState();\r\n        NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);\r\n        navigationView.setNavigationItemSelectedListener(this);\r\n    }\r\n\r\n    @Override\r\n    public void onBackPressed() {\r\n        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);\r\n        if (drawer.isDrawerOpen(GravityCompat.START)) {\r\n            drawer.closeDrawer(GravityCompat.START);\r\n        } else {\r\n            super.onBackPressed();\r\n        }\r\n    }\r\n\r\n    private void displaySelectedScreen(int itemId) {\r\n        Fragment fragment = null;\r\n        switch (itemId) {\r\n            case R.id.nav_bounce:\r\n                fragment = new bouncefragment();\r\n                break;\r\n            case R.id.nav_Blink:\r\n                fragment = new blinkfragment();\r\n                break;\r\n            case R.id.nav_zoomin:\r\n                fragment = new zoominfragment();\r\n                break;\r\n            case R.id.nav_zoomout:\r\n                fragment = new zoomoutfragment();\r\n                break;\r\n            case R.id.nav_rotate:\r\n                fragment = new rotatefragment();\r\n                break;\r\n            case R.id.nav_move:\r\n                fragment = new movefragment();\r\n                break;\r\n            case R.id.nav_slideup:\r\n                fragment = new slideupfragment();\r\n                break;\r\n            case R.id.nav_slidedown:\r\n                fragment = new slidedownfragment();\r\n                break;\r\n            case R.id.nav_sequentialanimation:\r\n                fragment = new sequentialanimationfragment();\r\n                break;\r\n            case R.id.nav_togetheranimation:\r\n                fragment = new togetheranimationfragment();\r\n                break;\r\n            case R.id.nav_flip:\r\n                fragment = new flipfragment();\r\n                break;\r\n            case R.id.nav_fade:\r\n                fragment= new fadefragment();\r\n                break;\r\n            case  R.id.nav_drawable:\r\n                fragment = new drawableanimationfragment();\r\n                break;\r\n            case R.id.nav_swap:\r\n                fragment = new swapanimationfragment();\r\n                break;\r\n        }\r\n        if (fragment != null) {\r\n            FragmentTransaction ft = getSupportFragmentManager().beginTransaction();\r\n            ft.replace(R.id.content_frame, fragment);\r\n            ft.commit();\r\n        }\r\n        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);\r\n        drawer.closeDrawer(GravityCompat.START);\r\n    }\r\n    @Override\r\n    public boolean onNavigationItemSelected(MenuItem item) {\r\n        displaySelectedScreen(item.getItemId());\r\n        return true;\r\n    }\r\n}<\/pre>\n
Step 6:<\/strong> Creating Screens for Navigation Menus using Fragment<\/p>\n
Whenever we click on a navigation item from the drawer, a respective screen should open. We will use fragments for this purpose. Below is the code for each fragment xml and associated java file. We will create a directory with name fragment\u00a0<\/strong>inside it and we will create our fragment.java files.<\/p>\n
Step 6.1. Setting Up Blink Animation:<\/strong><\/p>\n
\"BlinkFade in and Fade out animation performed infinitely in reverse mode each time is referred to as Blink Animation.<\/p>\n
android:repeatMode=”reverse”<\/strong>\u00a0– useful when you want the animation to be repeat<\/p>\n
android:repeatCount=”infinite” –<\/strong>\u00a0Defines the number of repetitions on animation. We have set this value to infinite now animation will repeat infinite times<\/p>\n
fragment_blink.xml in Layout:<\/strong><\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    android:orientation=\"vertical\">\r\n    <ImageView\r\n        android:id=\"@+id\/imageblink\"\r\n        android:src=\"@drawable\/blink\"\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:visibility=\"gone\"\r\n        android:layout_marginBottom=\"38dp\"\r\n        android:layout_above=\"@+id\/btnStart\"\r\n        android:layout_alignParentLeft=\"true\"\r\n        android:layout_alignParentStart=\"true\"\r\n        android:layout_marginLeft=\"10dp\"\r\n        android:layout_marginStart=\"10dp\" \/>\r\n\r\n    <Button android:id=\"@+id\/btnStart\"\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:text=\"Start Blinking\"\r\n        android:layout_marginBottom=\"17dp\"\r\n        android:layout_alignParentBottom=\"true\"\r\n        android:layout_alignParentRight=\"true\"\r\n        android:layout_alignParentEnd=\"true\"\r\n        android:layout_marginRight=\"34dp\"\r\n        android:layout_marginEnd=\"34dp\" \/>\r\n\r\n<\/RelativeLayout>\r\n\r\n<\/pre>\n

\nblinkfragment.java in fragment folder:<\/strong><\/p>\n
package com.example.abhishek.animationexample.fragment;\r\n\r\nimport android.app.Activity;\r\nimport android.support.v4.app.Fragment;\r\nimport android.os.Bundle;\r\nimport android.support.annotation.Nullable;\r\nimport android.view.LayoutInflater;\r\nimport android.view.View;\r\nimport android.view.ViewGroup;\r\nimport android.view.animation.Animation;\r\nimport android.view.animation.AnimationUtils;\r\nimport android.widget.Button;\r\nimport android.widget.ImageView;\r\nimport android.widget.TextView;\r\nimport android.widget.Toast;\r\nimport com.example.abhishek.animationexample.R;\r\nimport static com.example.abhishek.animationexample.R.drawable.animation;\r\n\r\n\/**\r\n * Created by abhiandroid\r\n *\/\r\n\r\npublic class blinkfragment extends Fragment implements Animation.AnimationListener {\r\n    ImageView imageView;\r\n    Button btnStart;\r\n    View view;\r\n    Animation animBlink;\r\n    @Override\r\n    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {\r\n        view = inflater.inflate(R.layout.fragment_blink, container, false);\r\n        imageView = (ImageView) view.findViewById(R.id.imageblink);\r\n        btnStart = (Button)view.findViewById(R.id.btnStart);\r\n        animBlink = AnimationUtils.loadAnimation(getContext(),\r\n                R.anim.blink);\r\n        animBlink.setAnimationListener(this);\r\n\r\n        btnStart.setOnClickListener(new View.OnClickListener() {\r\n            @Override\r\n            public void onClick(View v) {\r\n                imageView.setVisibility(View.VISIBLE);\r\n                imageView.startAnimation(animBlink);\r\n            }\r\n        });\r\n        return view;\r\n    }\r\n    @Override\r\n    public void onAnimationStart(Animation animation) {\r\n    }\r\n\r\n    @Override\r\n    public void onAnimationEnd(Animation animation) {\r\n    }\r\n\r\n    @Override\r\n    public void onAnimationRepeat(Animation animation) {\r\n    }\r\n}\r\n\r\n<\/pre>\n
Step 6.1.1 :<\/strong> Now we will create anim folder and blink.xml animation resource file in Android Studio<\/a>.<\/p>\n
blink.xml (Animation Resource file create in anim folder)<\/strong><\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<set xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\">\r\n    <alpha android:fromAlpha=\"0.0\"\r\n        android:toAlpha=\"1.0\"\r\n        android:interpolator=\"@android:anim\/accelerate_interpolator\"\r\n        android:duration=\"600\"\r\n        android:repeatMode=\"repeat\"\r\n        android:repeatCount=\"infinite\"\/>\r\n<\/set>\r\n<\/pre>\n
Step 6.2. Setting up Bounce Animation:<\/strong><\/p>\n
\"BounceThe\u00a0 animation which ends in bouncing fashion is known as bouncing animation For this set\u00a0android:interpolator<\/em><\/strong>\u00a0value to\u00a0@android:anim\/bounce_interpolator<\/em>.<\/p>\n
fragment_bounce.xml (Create in Layout folder):<\/strong><\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:layout_width=\"fill_parent\"\r\n    android:layout_height=\"fill_parent\" >\r\n    <ImageView\r\n        android:id=\"@+id\/imgbounce\"\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:layout_centerInParent=\"true\"\r\n        android:src=\"@drawable\/bounce\"\r\n        android:visibility=\"gone\" \/>\r\n    <Button\r\n        android:id=\"@+id\/btn_bounce\"\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:layout_marginBottom=\"26dp\"\r\n        android:text=\"Start Bouncing\"\r\n        android:layout_alignParentBottom=\"true\"\r\n        android:layout_alignParentRight=\"true\"\r\n        android:layout_alignParentEnd=\"true\"\r\n        android:layout_marginRight=\"13dp\"\r\n        android:layout_marginEnd=\"13dp\" \/>\r\n\r\n<\/RelativeLayout>\r\n\r\n<\/pre>\n
bouncefragment.java (Create in Fragment folder)<\/strong><\/p>\n
package com.example.abhishek.animationexample.fragment;\r\nimport android.support.v4.app.Fragment;\r\n\r\nimport android.os.Bundle;\r\nimport android.support.annotation.Nullable;\r\nimport android.view.LayoutInflater;\r\nimport android.view.View;\r\nimport android.view.ViewGroup;\r\nimport android.view.animation.Animation;\r\nimport android.view.animation.AnimationUtils;\r\nimport android.widget.Button;\r\nimport android.widget.ImageView;\r\n\r\nimport com.example.abhishek.animationexample.R;\r\n\r\n\/**\r\n * Created by abhiandroid\r\n *\/\r\n    public class bouncefragment extends Fragment implements Animation.AnimationListener {\r\n        ImageView imageView;\r\n        Button btnStart;\r\n        View view;\r\n        Animation animBounce;\r\n\r\n        @Override\r\n        public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {\r\n\r\n            view = inflater.inflate(R.layout.fragment_bounce, container, false);\r\n            imageView = (ImageView) view.findViewById(R.id.imgbounce);\r\n            btnStart = (Button)view.findViewById(R.id.btn_bounce);\r\n            animBounce = AnimationUtils.loadAnimation(getContext(),\r\n                    R.anim.bounce );\r\n            animBounce.setAnimationListener(this);\r\n\r\n            btnStart.setOnClickListener(new View.OnClickListener() {\r\n                @Override\r\n                public void onClick(View v) {\r\n                    imageView.setVisibility(View.VISIBLE);\r\n\r\n                    imageView.startAnimation(animBounce);\r\n                }\r\n            });\r\n            return view;\r\n        }\r\n        @Override\r\n        public void onAnimationStart(Animation animation) {\r\n        }\r\n        @Override\r\n        public void onAnimationEnd(Animation animation) {\r\n       }\r\n        @Override\r\n        public void onAnimationRepeat(Animation animation) {\r\n        }\r\n    }\r\n\r\n<\/pre>\n
bounce.xml (Animation Resource File in anim folder)<\/strong><\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<set xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:fillAfter=\"true\"\r\n    android:interpolator=\"@android:anim\/bounce_interpolator\">\r\n    <scale\r\n        android:duration=\"800\"\r\n        android:fromXScale=\"2.0\"\r\n        android:fromYScale=\"0.0\"\r\n        android:toXScale=\"1.0\"\r\n        android:toYScale=\"1.0\" \/>\r\n<\/set>\r\n<\/pre>\n
Step 6.3 – Setting Up Drawable Animation:<\/strong><\/p>\n
\"DrawableDrawable animation loads Drawable resources one after another to create an animation.The AnimationDrawable class is the basis for Drawable animations.<\/p>\n
In the drawable folder add images images1.png, images2.png , images3.png, images4.png.<\/p>\n
fragment_drawable.xml (Create in Layout Folder):<\/strong><\/p>\n
<RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\">\r\n\r\n <TextView\r\n        android:id=\"@+id\/textView2\"\r\n        android:textColor=\"#c008ce\"\r\n        android:textStyle=\"italic\"\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:text=\"@string\/touch_start_animation\"\r\n        android:layout_above=\"@+id\/ball\"\r\n        android:layout_centerHorizontal=\"true\"\r\n        android:layout_marginBottom=\"45dp\" \/>\r\n\r\n    <ImageView\r\n        android:id=\"@+id\/ball\"\r\n        android:layout_width=\"241dp\"\r\n        android:layout_height=\"182dp\"\r\n        android:src=\"@drawable\/ball\"\r\n        android:layout_marginBottom=\"151dp\"\r\n        android:layout_alignParentBottom=\"true\"\r\n        android:layout_centerHorizontal=\"true\" \/>\r\n\r\n<\/RelativeLayout>\r\n\r\n<\/pre>\n
drawableanimationfragment.java (Create in Fragment folder):<\/strong><\/p>\n
package com.example.abhishek.animationexample.fragment;\r\n\r\nimport android.graphics.drawable.AnimationDrawable;\r\nimport android.os.Bundle;\r\nimport android.support.annotation.Nullable;\r\nimport android.support.v4.app.Fragment;\r\nimport android.support.v7.app.ActionBarActivity;\r\nimport android.view.LayoutInflater;\r\nimport android.view.MotionEvent;\r\nimport android.view.View;\r\nimport android.view.ViewGroup;\r\nimport android.widget.ImageView;\r\n\r\nimport com.example.abhishek.animationexample.R;\r\n\r\n\/**\r\n * Created by abhishek on 31\/10\/17.\r\n *\/\r\n\r\npublic class drawableanimationfragment extends Fragment {\r\n     View view;\r\n    @Nullable\r\n    @Override\r\n    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {\r\n        view = inflater.inflate(R.layout.fragment_drawable, container, false);\r\n\r\n        final ImageView ball = (ImageView) view.findViewById(R.id.ball);\r\n        ball.setOnTouchListener(new View.OnTouchListener() {\r\n            @Override\r\n            public boolean onTouch(View v, MotionEvent event) {\r\n                if (event.getAction() == MotionEvent.ACTION_DOWN) {\r\n                    AnimationDrawable animation = (AnimationDrawable) ball.getDrawable();\r\n                    animation.stop();\r\n                    animation.selectDrawable(0);\r\n                    animation.start();\r\n                    return true;\r\n                }\r\n                return false;\r\n            }\r\n        });\r\n        return view;\r\n    }\r\n}\r\n<\/pre>\n
Create ball.xml<\/strong> under drawable(res->drawable->ball.xml<\/strong>)<\/p>\n
The XML file consists of\u00a0 an <animation-list> element . This animation runs for four frames. We have set android:oneshot attribute of the list true, this will cycle just once ,then stop and hold on the last frame.<\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<animation-list xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:oneshot=\"true\">\r\n    <item android:drawable=\"@drawable\/images4\" android:duration=\"400\" \/>\r\n    <item android:drawable=\"@drawable\/images3\" android:duration=\"400\" \/>\r\n    <item android:drawable=\"@drawable\/images2\" android:duration=\"400\" \/>\r\n    <item android:drawable=\"@drawable\/images1\" android:duration=\"400\" \/>\r\n<\/animation-list>\r\n\r\n<\/pre>\n
Step 6.4 – Setting Up Fade Animation:<\/strong><\/p>\n
\"Fade<alpha><\/em>\u00a0<\/strong>tag which defines alpha value is used for fade animation<\/p>\n
alpha<\/strong>\u00a0refers to the opacity of an object. An object with lower alpha values is more transparent, while an object with higher alpha values is less transparent, more opaque.<\/p>\n
Fade in animation<\/strong> is nothing but increasing alpha value from 0 to 1.<\/p>\n
Fade out animation<\/strong>\u00a0refers to decrease the alpha value from 1 to 0.<\/p>\n
Fade out animation is just opposite of fade in animation.<\/p>\n
fragment_fade.xml (Create in Layout Folder):<\/strong><\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    android:gravity=\"center\">\r\n\r\n    <ImageView android:id=\"@+id\/imgfade\"\r\n        android:layout_width=\"222dp\"\r\n        android:layout_height=\"200dp\"\r\n        android:src=\"@drawable\/fade\"\r\n        android:layout_marginTop=\"92dp\"\r\n        android:layout_alignParentTop=\"true\"\r\n        android:layout_alignParentRight=\"true\"\r\n        android:layout_alignParentEnd=\"true\"\r\n        android:layout_marginRight=\"65dp\"\r\n        android:layout_marginEnd=\"65dp\" \/>\r\n\r\n    <Button android:id=\"@+id\/btnfade\"\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:text=\"Start\"\r\n        android:layout_marginBottom=\"40dp\"\r\n        android:layout_marginRight=\"42dp\"\r\n        android:layout_marginEnd=\"42dp\"\r\n        android:layout_alignParentBottom=\"true\"\r\n        android:layout_alignParentRight=\"true\"\r\n        android:layout_alignParentEnd=\"true\" \/>\r\n\r\n<\/RelativeLayout>\r\n\r\n<\/pre>\n
fadefragment.java in fragment folder<\/strong><\/p>\n
package com.example.abhishek.animationexample.fragment;\r\n\r\nimport android.support.v4.app.Fragment;\r\nimport android.os.Bundle;\r\nimport android.support.annotation.Nullable;\r\nimport android.view.LayoutInflater;\r\nimport android.view.View;\r\nimport android.view.ViewGroup;\r\nimport android.view.animation.Animation;\r\nimport android.view.animation.AnimationUtils;\r\nimport android.widget.Button;\r\nimport android.widget.ImageView;\r\n\r\nimport com.example.abhishek.animationexample.R;\r\n\/**\r\n * Created by abhiandroid\r\n *\/\r\n\r\npublic class fadefragment extends Fragment implements Animation.AnimationListener{ @Nullable\r\nImageView imageView;\r\n    Button btnstart;\r\n    View view;\r\n    Animation animFade;\r\n\r\n    @Override\r\n    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {\r\n\r\n        view = inflater.inflate(R.layout.fragment_fade, container, false);\r\n        imageView = (ImageView) view.findViewById(R.id.imgfade);\r\n        btnstart = (Button)view.findViewById(R.id.btnfade);\r\n        animFade = AnimationUtils.loadAnimation(getContext(),\r\n                R.anim.fade );\r\n        animFade.setAnimationListener(this);\r\n\r\n        btnstart.setOnClickListener(new View.OnClickListener() {\r\n            @Override\r\n            public void onClick(View v) {\r\n\r\n                imageView.startAnimation(animFade);\r\n            }\r\n        });\r\n        return view;\r\n    }\r\n\r\n    @Override\r\n    public void onAnimationStart(Animation animation) {\r\n    }\r\n\r\n    @Override\r\n    public void onAnimationEnd(Animation animation) {\r\n    }\r\n\r\n    @Override\r\n    public void onAnimationRepeat(Animation animation) {\r\n    }\r\n}\r\n<\/pre>\n
fade.xml (Animation Resource File in anim folder)<\/strong><\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<set xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:interpolator=\"@android:anim\/accelerate_interpolator\" >\r\n\r\n    <alpha\r\n        android:fromAlpha=\"0\"\r\n        android:toAlpha=\"1\"\r\n        android:duration=\"2000\" >\r\n    <\/alpha>\r\n\r\n    <alpha\r\n        android:startOffset=\"2000\"\r\n        android:fromAlpha=\"1\"\r\n        android:toAlpha=\"0\"\r\n        android:duration=\"2000\" >\r\n    <\/alpha>\r\n<\/set>\r\n<\/pre>\n
Step 6.5 – Setting Up Flip Animation:<\/strong><\/p>\n
\"FlipFlipping Animation makes a nice effect on your game or app. We’ll use two different images\u2014one for the front and one for the back, to create the card flip effect. We will need two animation resources which we will define in XML using objectAnimator.<\/p>\n
ObjectAnimator is the subclass of ValueAniamtor that provides support for animating properties on target objects.<\/p>\n
attributes:<\/strong><\/p>\n
android:propertyName:<\/strong>\u00a0Gets the name of the property that will be animated. For example: you can specify “alpha” or a View object.<\/p>\n
android:valueTo:<\/strong>\u00a0<\/i>The value where the animated property ends.<\/p>\n
android:valueFrom:<\/strong>\u00a0The value where the animated property starts<\/p>\n
android:duration:<\/strong>\u00a0The duration in which animation is completed is referred to as duration attribute. It refers to the ideal duration to show the transition on the screen.<\/p>\n
android:repeatMode: “reverse”<\/strong> (useful when you want the animation to be repeated)<\/p>\n
android:repeatCount: “infinite”<\/strong> (defines the number of repetitions on animation.We have set this value to infinite now animation will repeat infinite times)<\/p>\n
android:startOffset:<\/strong>\u00a0defines the waiting time before an animation starts.<\/p>\n
<objectAnimator xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n\u00a0 \u00a0 android:duration=\"1000\"\r\n\u00a0 \u00a0 android:valueTo=\"200\"\r\n\u00a0 \u00a0 android:valueType=\"floatType\"\r\n\u00a0 \u00a0 android:propertyName=\"y\"\r\n\u00a0 \u00a0 android:repeatCount=\"1\"\r\n\u00a0 \u00a0 android:repeatMode=\"reverse\"\/>\r\n<\/pre>\n
fragment_flip.xml (Create in layout folder):<\/strong><\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<FrameLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    tools:context=\".MainActivity\"\r\n    >\r\n\r\n    <FrameLayout\r\n        android:id=\"@+id\/card_back\"\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"match_parent\">\r\n        <include layout=\"@layout\/card_back\" \/>\r\n    <\/FrameLayout>\r\n\r\n    <FrameLayout\r\n        android:id=\"@+id\/card_front\"\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"match_parent\"\r\n        android:gravity=\"center\">\r\n        <include layout=\"@layout\/card_front\" \/>\r\n    <\/FrameLayout>\r\n<\/FrameLayout>\r\n\r\n<\/pre>\n
card_back.xml(create in res->layout->card_back.xml)<\/strong><\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<FrameLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    android:orientation=\"vertical\">\r\n    <ImageView\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"match_parent\"\r\n        android:tint=\"@color\/cardBack\"\r\n        android:padding=\"16dp\"\r\n        android:src=\"@drawable\/oval\"\/>\r\n    <TextView\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"match_parent\"\r\n        android:text=\"@string\/back\"\r\n        android:textColor=\"#0606ea\"\r\n        style=\"@style\/Base.TextAppearance.AppCompat.Display1\"\r\n        android:gravity=\"center\"\/>\r\n<\/FrameLayout>\r\n\r\n<\/pre>\n
card_front.xml(create in res->layout->card_front.xml):<\/strong><\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<FrameLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    android:orientation=\"vertical\">\r\n  <ImageView\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"match_parent\"\r\n        android:tint=\"@color\/cardFront\"\r\n        android:padding=\"16dp\"\r\n        android:src=\"@drawable\/oval\"\/>\r\n    <TextView\r\n        android:layout_width=\"match_parent\"\r\n        android:layout_height=\"match_parent\"\r\n        android:text=\"@string\/front\"\r\n        android:textColor=\"#b815d9\"\r\n        style=\"@style\/Base.TextAppearance.AppCompat.Display1\"\r\n        android:gravity=\"center\"\/>\r\n<\/FrameLayout>\r\n\r\n<\/pre>\n
flipfragment.java (Create in fragment folder)<\/strong><\/p>\n
package com.example.abhishek.animationexample.fragment;\r\n\r\nimport android.animation.AnimatorInflater;\r\nimport android.animation.AnimatorSet;\r\nimport android.support.v4.app.Fragment;\r\nimport android.os.Bundle;\r\nimport android.support.annotation.Nullable;\r\nimport android.support.v4.app.Fragment;\r\nimport android.support.v7.app.AppCompatActivity;\r\nimport android.view.LayoutInflater;\r\nimport android.view.View;\r\nimport android.view.ViewGroup;\r\nimport android.view.animation.Animation;\r\nimport android.view.animation.AnimationUtils;\r\nimport android.widget.Button;\r\nimport android.widget.ImageView;\r\n\r\nimport com.example.abhishek.animationexample.R;\r\n\r\n\/**\r\n * Created by abhiandroid\r\n *\/\r\n\r\npublic class flipfragment extends Fragment {\r\n    private AnimatorSet mSetRightOut;\r\n    private AnimatorSet mSetLeftIn;\r\n    private boolean mIsBackVisible = false;\r\n    private View mCardFrontLayout;\r\n    private View mCardBackLayout;\r\n    ImageView imageView;\r\n    View view;\r\n\r\n    @Override\r\n    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {\r\n\r\n        view = inflater.inflate(R.layout.fragment_flip, container, false);\r\n        findViews();\r\n        loadAnimations();\r\n        flipCard(view);\r\n      changeCameraDistance();\r\nreturn view;\r\n    }\r\n    private void changeCameraDistance() {\r\n        int distance = 8000;\r\n        float scale = getResources().getDisplayMetrics().density * distance;\r\n        mCardFrontLayout.setCameraDistance(scale);\r\n        mCardBackLayout.setCameraDistance(scale);\r\n    }\r\n\r\n    private void loadAnimations() {\r\n        mSetRightOut = (AnimatorSet) AnimatorInflater.loadAnimator(getContext(), R.anim.out_animation);\r\n        mSetLeftIn = (AnimatorSet) AnimatorInflater.loadAnimator(getContext(), R.anim.in_animation);\r\n    }\r\n\r\n    private void findViews() {\r\n        mCardBackLayout = view.findViewById(R.id.card_back);\r\n        mCardFrontLayout = view.findViewById(R.id.card_front);\r\n    }\r\n\r\n    public void flipCard(View view) {\r\n        if (!mIsBackVisible) {\r\n            mSetRightOut.setTarget(mCardFrontLayout);\r\n            mSetLeftIn.setTarget(mCardBackLayout);\r\n            mSetRightOut.start();\r\n            mSetLeftIn.start();\r\n            mIsBackVisible = true;\r\n        } else {\r\n            mSetRightOut.setTarget(mCardBackLayout);\r\n            mSetLeftIn.setTarget(mCardFrontLayout);\r\n            mSetRightOut.start();\r\n            mSetLeftIn.start();\r\n            mIsBackVisible = false;\r\n        }\r\n    }\r\n}\r\n<\/pre>\n
in_animation.xml(create in res->anim->in_animation.xml)<\/strong><\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<set xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\">\r\n\r\n    <objectAnimator\r\n        android:valueFrom=\"1.0\"\r\n        android:valueTo=\"0.0\"\r\n        android:propertyName=\"alpha\"\r\n        android:duration=\"0\" \/>\r\n\r\n    <objectAnimator\r\n        android:valueFrom=\"-180\"\r\n        android:valueTo=\"0\"\r\n        android:propertyName=\"rotationY\"\r\n        android:repeatMode=\"reverse\"\r\n        android:duration=\"@integer\/anim_length\" \/>\r\n\r\n    <objectAnimator\r\n        android:valueFrom=\"0.0\"\r\n        android:valueTo=\"1.0\"\r\n        android:propertyName=\"alpha\"\r\n        android:startOffset=\"@integer\/anim_length_half\"\r\n        android:duration=\"0\" \/>\r\n<\/set>\r\n<\/pre>\n
out_animation.xml(create in res->anim->out_animation.xml)<\/strong><\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<set xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\">\r\n    <objectAnimator\r\n        android:valueFrom=\"0\"\r\n        android:valueTo=\"180\"\r\n        android:propertyName=\"rotationY\"\r\n        android:duration=\"@integer\/anim_length\" \/>\r\n\r\n    <objectAnimator\r\n        android:valueFrom=\"1.0\"\r\n        android:valueTo=\"0.0\"\r\n        android:propertyName=\"alpha\"\r\n        android:startOffset=\"@integer\/anim_length_half\"\r\n        android:duration=\"0\" \/>\r\n<\/set>\r\n<\/pre>\n
oval.xml(create in res->drawable->oval.xml)<\/strong><\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<shape xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:shape=\"oval\">\r\n    <corners android:radius=\"16dp\"\/>\r\n    <solid android:color=\"#fff\"\/>\r\n    <stroke android:width=\"2dp\" android:color=\"#000\"><\/stroke>\r\n<\/shape>\r\n<\/pre>\n
Step 6.6 – Setting Up Move Animation:<\/strong><\/p>\n
\"Move<translate><\/em><\/strong>\u00a0tag is used in this animation in order to control the position of an object . It has the following parameters:<\/p>\n
fromXDelta:<\/strong>\u00a0refres to change in X coordinate to apply at the start of the animation<\/p>\n
fromYDelta:<\/strong>\u00a0refers to change in Y coordinate to apply at the start of the animation<\/p>\n
toXDelta:<\/strong>\u00a0refers to change in X coordinate to apply at the end of the animation<\/p>\n
toYDelta:\u00a0<\/strong>refers to change in Y coordinate to apply at the end of the animation<\/p>\n
fragment_move.xml (Create in layout folder):<\/strong><\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    android:gravity=\"center\">\r\n\r\n    <ImageView android:id=\"@+id\/imgmove\"\r\n        android:layout_width=\"150dp\"\r\n        android:layout_height=\"100dp\"\r\n        android:src=\"@drawable\/move\"\r\n        android:layout_alignParentTop=\"true\" \/>\r\n\r\n    <Button android:id=\"@+id\/btnmove\"\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:text=\"Start Moving\"\r\n        android:layout_marginRight=\"21dp\"\r\n        android:layout_marginEnd=\"21dp\"\r\n        android:layout_marginBottom=\"39dp\"\r\n        android:layout_alignParentBottom=\"true\"\r\n        android:layout_alignParentRight=\"true\"\r\n        android:layout_alignParentEnd=\"true\" \/>\r\n\r\n<\/RelativeLayout>\r\n<\/pre>\n
movefragment.java(Create in fragment folder):<\/strong><\/p>\n
package com.example.abhishek.animationexample.fragment;\r\n\r\nimport android.support.v4.app.Fragment;\r\nimport android.os.Bundle;\r\nimport android.support.annotation.Nullable;\r\nimport android.view.LayoutInflater;\r\nimport android.view.View;\r\nimport android.view.ViewGroup;\r\nimport android.view.animation.Animation;\r\nimport android.view.animation.AnimationUtils;\r\nimport android.widget.Button;\r\nimport android.widget.ImageView;\r\n\r\nimport com.example.abhishek.animationexample.R;\r\n\r\n\/**\r\n * Created by abhiandroid\r\n *\/\r\npublic class movefragment extends Fragment implements Animation.AnimationListener{ @Nullable\r\n    ImageView imageView;\r\n    Button btnmove;\r\n    View view;\r\n    Animation animMove;\r\n\r\n    @Override\r\n    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {\r\n\r\n        view = inflater.inflate(R.layout.fragment_move, container, false);\r\n        imageView = (ImageView) view.findViewById(R.id.imgmove);\r\n        btnmove = (Button)view.findViewById(R.id.btnmove);\r\n        animMove = AnimationUtils.loadAnimation(getContext(),\r\n                R.anim.move );\r\n        animMove.setAnimationListener(this);\r\n\r\n        btnmove.setOnClickListener(new View.OnClickListener() {\r\n            @Override\r\n            public void onClick(View v) {\r\n\r\n                imageView.startAnimation(animMove);\r\n            }\r\n        });\r\n        return view;\r\n    }\r\n\r\n    @Override\r\n    public void onAnimationStart(Animation animation) {\r\n    }\r\n\r\n    @Override\r\n    public void onAnimationEnd(Animation animation) {\r\n    }\r\n\r\n    @Override\r\n    public void onAnimationRepeat(Animation animation) {\r\n    }\r\n}\r\n<\/pre>\n
move.xml (Create Animation Resource Directory in anim folder):<\/strong><\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<set\r\n    xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:interpolator=\"@android:anim\/linear_interpolator\"\r\n    android:fillAfter=\"true\">\r\n   <translate\r\n        android:fromXDelta=\"0%p\"\r\n        android:toXDelta=\"60%p\"\r\n        android:duration=\"1500\" \/>\r\n<\/set>\r\n<\/pre>\n
Step 6.7 – Setting up rotate animation<\/strong><\/p>\n
\"Rotate<rotate><\/em>\u00a0tag is used to control the rotation of an object in the rotate animation. The\u00a0rotation takes place in the X-Y plane. (0,0) is the default rotation point.<\/p>\n
Attributes that defines rotation angles:<\/strong><\/p>\n
android:fromDegrees:<\/strong>\u00a0It defines the rotation offset to apply at the start of the animation.<\/p>\n
android:toDegrees:<\/strong>\u00a0It defines the rotation offset to apply at the end of the animation.<\/p>\n
Clock wise<\/em><\/strong>\u00a0\u2013 use positive toDegrees value
\nAnti clock wise<\/em><\/strong>\u00a0\u2013 use negative toDegrees value<\/p>\n
Parameters:<\/strong><\/p>\n
pivotX:<\/strong>\u00a0refers to X coordinate of the point about which the object is being rotated<\/p>\n
pivotY:<\/strong>\u00a0refers to Y coordinate of the point about which the object is being rotated<\/p>\n
android:repeatMode: “reverse”(<\/strong>useful when you want the animation to be repeat)<\/p>\n
android:repeatCount: “infinite”(<\/strong>defines the number of repetitions on animation.We have set this value to infinite now animation will repeat infinite times)<\/p>\n
android:interpolator:\u00a0<\/strong>\u00a0this property refers to the rate of change in animation. You can define your own interpolators using the time as the constraint. In this animation we have used an inbuilt interpolator i.e.cycle interpolator<\/p>\n
fragment_rotate.xml (Create in layout folder):<\/strong><\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    android:gravity=\"center\">\r\n    <ImageView android:id=\"@+id\/imgrotate\"\r\n        android:layout_width=\"222dp\"\r\n        android:layout_height=\"200dp\"\r\n        android:src=\"@drawable\/rotate\"\r\n        android:layout_marginTop=\"92dp\"\r\n        android:layout_alignParentTop=\"true\"\r\n        android:layout_alignParentRight=\"true\"\r\n        android:layout_alignParentEnd=\"true\"\r\n        android:layout_marginRight=\"65dp\"\r\n        android:layout_marginEnd=\"65dp\" \/>\r\n    <Button android:id=\"@+id\/btnrotate\"\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:text=\"Start Rotating\"\r\n        android:layout_marginBottom=\"40dp\"\r\n        android:layout_marginRight=\"42dp\"\r\n        android:layout_marginEnd=\"42dp\"\r\n        android:layout_alignParentBottom=\"true\"\r\n        android:layout_alignParentRight=\"true\"\r\n        android:layout_alignParentEnd=\"true\" \/>\r\n<\/RelativeLayout>\r\n\r\n<\/pre>\n
rotatefragment.java: (Create in fragment folder)<\/strong><\/p>\n
package com.example.abhishek.animationexample.fragment;\r\n\r\nimport android.support.v4.app.Fragment;\r\nimport android.os.Bundle;\r\nimport android.support.annotation.Nullable;\r\nimport android.view.LayoutInflater;\r\nimport android.view.View;\r\nimport android.view.ViewGroup;\r\nimport android.view.animation.Animation;\r\nimport android.view.animation.AnimationUtils;\r\nimport android.widget.Button;\r\nimport android.widget.ImageView;\r\n\r\nimport com.example.abhishek.animationexample.R;\r\n\/**\r\n * Created by abhiandroid\r\n *\/\r\n\r\npublic class rotatefragment extends Fragment implements Animation.AnimationListener{ @Nullable\r\nImageView imageView;\r\n    Button btnrotate;\r\n    View view;\r\n    Animation animRotate;\r\n    @Override\r\n    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {\r\n\r\n        view = inflater.inflate(R.layout.fragment_rotate, container, false);\r\n        imageView = (ImageView) view.findViewById(R.id.imgrotate);\r\n        btnrotate = (Button)view.findViewById(R.id.btnrotate);\r\n        animRotate = AnimationUtils.loadAnimation(getContext(),\r\n                R.anim.rotate );\r\n        animRotate.setAnimationListener(this);\r\n\r\n        btnrotate.setOnClickListener(new View.OnClickListener() {\r\n            @Override\r\n            public void onClick(View v) {\r\n\r\n                imageView.startAnimation(animRotate);\r\n            }\r\n        });\r\n        return view;\r\n    }\r\n    @Override\r\n    public void onAnimationStart(Animation animation) {\r\n    }\r\n    @Override\r\n    public void onAnimationEnd(Animation animation) {\r\n    }\r\n    @Override\r\n    public void onAnimationRepeat(Animation animation) {\r\n    }\r\n}<\/pre>\n
rotate.xml(Create in anim folder):<\/strong><\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<set xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\">\r\n    <rotate android:fromDegrees=\"0\"\r\n        android:toDegrees=\"360\"\r\n        android:pivotX=\"70%\"\r\n        android:pivotY=\"70%\"\r\n        android:duration=\"1000\"\r\n        android:repeatMode=\"restart\"\r\n        android:repeatCount=\"infinite\"\r\n        android:interpolator=\"@android:anim\/cycle_interpolator\"\/>\r\n<\/set>\r\n<\/pre>\n
Step 6.8 – Setting Up\u00a0Sequential Animation:\u00a0<\/strong><\/p>\n
\"SequentialIn this animation we have used startOffset to give delay between animations.<\/p>\n
android:startOffset:<\/strong>\u00a0It refers to\u00a0 the waiting time before an animation starts. This property is mainly used to perform multiple animations in a sequential manner<\/p>\n
fragment_sequentialanimation.xml (Create in layout folder):<\/strong><\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:layout_width=\"fill_parent\"\r\n    android:layout_height=\"fill_parent\">\r\n\r\n    <ImageView android:id=\"@+id\/imgsequence\"\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:src=\"@drawable\/sequential\"\r\n        android:layout_marginBottom=\"309dp\"\r\n        android:layout_above=\"@+id\/btnSequence\"\r\n        android:layout_toStartOf=\"@+id\/btnSequence\" \/>\r\n\r\n    <Button android:id=\"@+id\/btnSequence\"\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:text=\"Start Animation\"\r\n        android:layout_marginBottom=\"18dp\"\r\n        android:layout_alignParentBottom=\"true\"\r\n        android:layout_centerHorizontal=\"true\" \/>\r\n\r\n<\/RelativeLayout>\r\n\r\n<\/pre>\n
sequentialanimationfragment.java (Create in fragment folder):<\/strong><\/p>\n
package com.example.abhishek.animationexample.fragment;\r\n\r\nimport android.support.v4.app.Fragment;\r\nimport android.os.Bundle;\r\nimport android.support.annotation.Nullable;\r\nimport android.view.LayoutInflater;\r\nimport android.view.View;\r\nimport android.view.ViewGroup;\r\nimport android.view.animation.Animation;\r\nimport android.view.animation.AnimationUtils;\r\nimport android.widget.Button;\r\nimport android.widget.ImageView;\r\n\r\nimport com.example.abhishek.animationexample.R;\r\n\r\n\/**\r\n * Created by abhishek on 27\/10\/17.\r\n *\/\r\n\r\npublic class sequentialanimationfragment extends Fragment implements     Animation.AnimationListener{ @Nullable\r\n   ImageView imageView;\r\n    Button btnStart;\r\n    View view;\r\n    Animation animSequence;\r\n\r\n    @Override\r\n    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {\r\n\r\n        view = inflater.inflate(R.layout.fragment_sequentialanimation, container, false);\r\n        imageView = (ImageView) view.findViewById(R.id.imgsequence);\r\n        btnStart = (Button)view.findViewById(R.id.btnSequence);\r\n        animSequence = AnimationUtils.loadAnimation(getContext(),\r\n                R.anim.sequential );\r\n        animSequence.setAnimationListener(this);\r\n\r\n        btnStart.setOnClickListener(new View.OnClickListener() {\r\n            @Override\r\n            public void onClick(View v) {\r\n\r\n                imageView.startAnimation(animSequence);\r\n            }\r\n        });\r\n        return view;\r\n    }\r\n    @Override\r\n    public void onAnimationStart(Animation animation) {\r\n    }\r\n    @Override\r\n    public void onAnimationEnd(Animation animation) {\r\n    }\r\n    @Override\r\n    public void onAnimationRepeat(Animation animation) {\r\n    }\r\n}\r\n\r\n<\/pre>\n
sequential.xml (Create in anim folder):<\/strong><\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<set xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:fillAfter=\"true\"\r\n    android:interpolator=\"@android:anim\/linear_interpolator\" >\r\n    <!-- Use startOffset to give delay between animations -->\r\n    <!-- Move -->\r\n    <translate\r\n        android:duration=\"800\"\r\n        android:fillAfter=\"true\"\r\n        android:fromXDelta=\"0%p\"\r\n        android:startOffset=\"300\"\r\n        android:toXDelta=\"75%p\" \/>\r\n    <translate\r\n        android:duration=\"800\"\r\n        android:fillAfter=\"true\"\r\n        android:fromYDelta=\"0%p\"\r\n        android:startOffset=\"1100\"\r\n        android:toYDelta=\"70%p\" \/>\r\n    <translate\r\n        android:duration=\"800\"\r\n        android:fillAfter=\"true\"\r\n        android:fromXDelta=\"0%p\"\r\n        android:startOffset=\"1900\"\r\n        android:toXDelta=\"-75%p\" \/>\r\n    <translate\r\n        android:duration=\"800\"\r\n        android:fillAfter=\"true\"\r\n        android:fromYDelta=\"0%p\"\r\n        android:startOffset=\"2700\"\r\n        android:toYDelta=\"-70%p\" \/>\r\n\r\n    <!-- Rotate 360 degrees -->\r\n    <rotate\r\n        android:duration=\"1000\"\r\n        android:fromDegrees=\"0\"\r\n        android:interpolator=\"@android:anim\/cycle_interpolator\"\r\n        android:pivotX=\"50%\"\r\n        android:pivotY=\"50%\"\r\n        android:startOffset=\"3800\"\r\n        android:repeatCount=\"infinite\"\r\n        android:repeatMode=\"restart\"\r\n        android:toDegrees=\"360\" \/>\r\n<\/set>\r\n\r\n<\/pre>\n
Step 6.9 – Setting Up SlideUp Animation:<\/strong><\/p>\n
\"Slide<translate><\/em><\/strong>\u00a0tag is used in this animation to slide up the ImageView . We have used the following attributes:<\/p>\n
duration:\u00a0<\/strong>The duration in which animation is completed is referred to as duration attribute. It refers to the ideal duration to show the transition on the screen.<\/p>\n
fromYDelta:<\/strong>\u00a0refers to change in Y coordinate to apply at the start of the animation<\/p>\n
toYDelta:<\/strong>\u00a0refers to change in Y coordinate to apply at the end of the animation<\/p>\n
fragment_slideup.xml (Create in layout folder):<\/strong><\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:layout_width=\"fill_parent\"\r\n    android:layout_height=\"fill_parent\" >\r\n\r\n    <ImageView\r\n        android:id=\"@+id\/imgslideup\"\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:layout_centerInParent=\"true\"\r\n        android:src=\"@drawable\/slide\" \/>\r\n\r\n    <Button\r\n        android:id=\"@+id\/btnSlideup\"\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:layout_marginBottom=\"22dp\"\r\n        android:text=\"Start Animation\"\r\n        android:layout_alignParentBottom=\"true\"\r\n        android:layout_alignRight=\"@+id\/imgslideup\"\r\n        android:layout_alignEnd=\"@+id\/imgslideup\" \/>\r\n\r\n<\/RelativeLayout>\r\n\r\n<\/pre>\n
slideupfragment.java (Create in fragment folder):<\/strong><\/p>\n
package com.example.abhishek.animationexample.fragment;\r\n\r\nimport android.support.v4.app.Fragment;\r\nimport android.os.Bundle;\r\nimport android.support.annotation.Nullable;\r\nimport android.view.LayoutInflater;\r\nimport android.view.View;\r\nimport android.view.ViewGroup;\r\nimport android.view.animation.Animation;\r\nimport android.view.animation.AnimationUtils;\r\nimport android.widget.Button;\r\nimport android.widget.ImageView;\r\n\r\nimport com.example.abhishek.animationexample.R;\r\n\r\n\/**\r\n * Created by abhishek on 27\/10\/17.\r\n *\/\r\n\r\npublic class slideupfragment extends Fragment implements Animation.AnimationListener{ @Nullable\r\n   ImageView imageView;\r\n    Button btnStart;\r\n    View view;\r\n    Animation animSlideup;\r\n\r\n    @Override\r\n    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {\r\n\r\n        view = inflater.inflate(R.layout.fragment_slideup, container, false);\r\n        imageView = (ImageView) view.findViewById(R.id.imgslideup);\r\n        btnStart = (Button)view.findViewById(R.id.btnSlideup);\r\n        animSlideup = AnimationUtils.loadAnimation(getContext(),\r\n                R.anim.slide_up);\r\n        animSlideup.setAnimationListener(this);\r\n\r\n        btnStart.setOnClickListener(new View.OnClickListener() {\r\n            @Override\r\n            public void onClick(View v) {\r\n\r\n                imageView.startAnimation(animSlideup);\r\n            }\r\n        });\r\n        return view;\r\n   }\r\n\r\n    @Override\r\n    public void onAnimationStart(Animation animation) {\r\n    }\r\n\r\n    @Override\r\n    public void onAnimationEnd(Animation animation) {\r\n    }\r\n\r\n    @Override\r\n    public void onAnimationRepeat(Animation animation) {\r\n    }\r\n}\r\n<\/pre>\n
slide_up.xml (Create in anim folder):<\/strong><\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<set xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\" >\r\n\r\n    <translate\r\n        android:duration=\"1000\"\r\n        android:fromYDelta=\"100%\"\r\n        android:toYDelta=\"0\" \/>\r\n<\/set>\r\n\r\n<\/pre>\n
Step 6.10 – Setting Up SlideDown Animation:<\/strong><\/p>\n
\"SlideSlide down animation is exactly opposite to slide up animation. You have to\u00a0 interchange\u00a0android:fromYScale<\/strong>\u00a0and\u00a0android:toYScale<\/strong>\u00a0values.<\/p>\n
fragment_slidedown.xml (Create in layout folder):<\/strong><\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:layout_width=\"fill_parent\"\r\n    android:layout_height=\"fill_parent\" >\r\n\r\n    <ImageView\r\n        android:id=\"@+id\/imgSlidedown\"\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:layout_centerInParent=\"true\"\r\n        android:src=\"@drawable\/slide\"\r\n        android:visibility=\"gone\" \/>\r\n\r\n    <Button\r\n        android:id=\"@+id\/btnSlidedown\"\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:text=\"Start Animation\"\r\n        android:layout_marginRight=\"44dp\"\r\n        android:layout_marginEnd=\"44dp\"\r\n        android:layout_marginBottom=\"38dp\"\r\n        android:layout_alignParentBottom=\"true\"\r\n        android:layout_alignParentRight=\"true\"\r\n        android:layout_alignParentEnd=\"true\" \/>\r\n\r\n<\/RelativeLayout>\r\n<\/pre>\n
slidedownfragment.java (Create in fragment folder)<\/strong>:<\/p>\n
package com.example.abhishek.animationexample.fragment;\r\n\r\nimport android.support.v4.app.Fragment;\r\nimport android.os.Bundle;\r\nimport android.support.annotation.Nullable;\r\nimport android.view.LayoutInflater;\r\nimport android.view.View;\r\nimport android.view.ViewGroup;\r\nimport android.view.animation.Animation;\r\nimport android.view.animation.AnimationUtils;\r\nimport android.widget.Button;\r\nimport android.widget.ImageView;\r\n\r\nimport com.example.abhishek.animationexample.R;\r\n\/**\r\n * Created by abhiandroid\r\n *\/\r\npublic class slidedownfragment extends Fragment implements Animation.AnimationListener {\r\n    @Nullable\r\n    ImageView imageView;\r\n    Button btnStart;\r\n    View view;\r\n    Animation animSlidedown;\r\n\r\n    @Override\r\n    public View onCreateView(final LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {\r\n\r\n        view = inflater.inflate(R.layout.fragment_slidedown, container, false);\r\n        imageView = (ImageView) view.findViewById(R.id.imgSlidedown);\r\n        btnStart = (Button) view.findViewById(R.id.btnSlidedown);\r\n        animSlidedown = AnimationUtils.loadAnimation(getContext(),\r\n                R.anim.slide_down);\r\n        animSlidedown.setAnimationListener(this);\r\n\r\n        btnStart.setOnClickListener(new View.OnClickListener() {\r\n            @Override\r\n            public void onClick(View v) {\r\n                 imageView.setVisibility(View.VISIBLE);\r\n                imageView.startAnimation(animSlidedown);\r\n            }\r\n        });\r\n        return view;\r\n    }\r\n\r\n    @Override\r\n    public void onAnimationStart(Animation animation) {\r\n    }\r\n\r\n    @Override\r\n    public void onAnimationEnd(Animation animation) {\r\n    }\r\n\r\n    @Override\r\n    public void onAnimationRepeat(Animation animation) {\r\n    }\r\n}\r\n<\/pre>\n
slide_down.xml(Create animation resource directory in anim folder):<\/strong><\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<set xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\" >\r\n    <translate\r\n        android:duration=\"1000\"\r\n        android:fromYDelta=\"0\"\r\n        android:toYDelta=\"100%\" \/>\r\n<\/set>\r\n\r\n<\/pre>\n
Step 6.11 – Setting Up Swap Animation:<\/strong><\/p>\n
\"SwapThis Animation will create a\u00a03D rotation on the Y axis. The rotation is defined by its start angle and its end angle. Both angles are in degrees. The rotation is performed around a center point on the 2D space, defined by a pair of X and Y coordinates, called centerX and centerY. When the animation starts, a translation on the Z axis (depth) is performed.<\/p>\n
fromDegrees:\u00a0<\/strong>represents\u00a0 the start angle of the 3D rotation
\ntoDegrees:<\/strong>\u00a0represents the end angle of the 3D rotation
\ncenterX:<\/strong>\u00a0represents the X center of the 3D rotation
\ncenterY:<\/strong>\u00a0represents the Y center of the 3D rotation<\/p>\n
fragment_swapanimation.xml(Create in layout folder):<\/strong><\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<FrameLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:id=\"@+id\/container\"\r\n    android:layout_width=\"fill_parent\"\r\n    android:layout_height=\"fill_parent\">\r\n    <ListView\r\n        android:id=\"@android:id\/list\"\r\n        android:persistentDrawingCache=\"animation|scrolling\"\r\n        android:layout_width=\"fill_parent\"\r\n        android:layout_height=\"fill_parent\"\r\n        android:layoutAnimation=\"@anim\/layout_bottom_to_top_slide\" \/>\r\n\r\n    <ImageView\r\n        android:id=\"@+id\/picture\"\r\n        android:scaleType=\"fitCenter\"\r\n        android:layout_width=\"fill_parent\"\r\n        android:layout_height=\"fill_parent\"\r\n        android:visibility=\"gone\" \/>\r\n<\/FrameLayout>\r\n<\/pre>\n
Now create a java class under your main package and name it –<\/p>\n
Rotation.java(Create in fragment folder):<\/strong><\/p>\n
package com.example.abhishek.animationexample;\r\n\r\nimport android.graphics.Camera;\r\nimport android.graphics.Matrix;\r\nimport android.view.animation.Animation;\r\nimport android.view.animation.Transformation;\r\n\r\npublic class Rotation extends Animation {\r\n    private final float mFromDegrees;\r\n    private final float mToDegrees;\r\n    private final float mCenterX;\r\n    private final float mCenterY;\r\n    private final float mDepthZ;\r\n    private final boolean mReverse;\r\n    private Camera mCamera;\r\n\r\n  \r\n    public Rotation(float fromDegrees, float toDegrees,\r\n                    float centerX, float centerY, float depthZ, boolean reverse) {\r\n        mFromDegrees = fromDegrees;\r\n        mToDegrees = toDegrees;\r\n        mCenterX = centerX;\r\n        mCenterY = centerY;\r\n        mDepthZ = depthZ;\r\n        mReverse = reverse;\r\n    }\r\n\r\n    @Override\r\n    public void initialize(int width, int height, int parentWidth, int parentHeight) {\r\n        super.initialize(width, height, parentWidth, parentHeight);\r\n        mCamera = new Camera();\r\n    }\r\n\r\n    @Override\r\n    protected void applyTransformation(float interpolatedTime, Transformation t) {\r\n        final float fromDegrees = mFromDegrees;\r\n        float degrees = fromDegrees + ((mToDegrees - fromDegrees) * interpolatedTime);\r\n\r\n        final float centerX = mCenterX;\r\n        final float centerY = mCenterY;\r\n        final Camera camera = mCamera;\r\n\r\n        final Matrix matrix = t.getMatrix();\r\n\r\n        camera.save();\r\n        if (mReverse) {\r\n            camera.translate(0.0f, 0.0f, mDepthZ * interpolatedTime);\r\n        } else {\r\n            camera.translate(0.0f, 0.0f, mDepthZ * (1.0f - interpolatedTime));\r\n        }\r\n        camera.rotateY(degrees);\r\n        camera.getMatrix(matrix);\r\n        camera.restore();\r\n\r\n        matrix.preTranslate(-centerX, -centerY);\r\n        matrix.postTranslate(centerX, centerY);\r\n    }\r\n}<\/pre>\n
swapanimationfragment.java (Create in fragment folder):<\/strong><\/p>\n
position:<\/strong> represents the item that was clicked to show a picture, or -1 to show the list
\nstart:<\/strong> is the start angle at which the rotation must begin
\nend:<\/strong> is the end angle of the rotation.<\/p>\n
The animation listener is used to trigger the next animation<\/p>\n
package com.example.abhishek.animationexample.fragment;\r\n\r\nimport android.app.Activity;\r\nimport android.os.Bundle;\r\nimport android.support.annotation.Nullable;\r\nimport android.support.v4.app.Fragment;\r\nimport android.view.LayoutInflater;\r\nimport android.view.View;\r\nimport android.view.ViewGroup;\r\nimport android.view.animation.AccelerateInterpolator;\r\nimport android.view.animation.Animation;\r\nimport android.view.animation.DecelerateInterpolator;\r\nimport android.widget.AdapterView;\r\nimport android.widget.ArrayAdapter;\r\nimport android.widget.ImageView;\r\nimport android.widget.ListView;\r\n\r\nimport com.example.abhishek.animationexample.R;\r\nimport com.example.abhishek.animationexample.Rotation;\r\n\r\n\/**\r\n * Created by abhiandroid\r\n *\/\r\n\r\npublic class swapanimationfragment extends Fragment implements\r\n        AdapterView.OnItemClickListener, View.OnClickListener {\r\n    private ListView mPhotosList;\r\n    private ViewGroup mContainer;\r\n    private ImageView mImageView;\r\n    \/\/ Names of the photos we show in the list\r\n    private static final String[] PHOTOS_NAMES = new String[]{\r\n            \"India\",\r\n            \"BanglaDesh\",\r\n            \"Germany\",\r\n            \"Canada\"\r\n    };\r\n\r\n    \/\/ Resource identifiers for the photos we want to display\r\n    private static final int[] PHOTOS_RESOURCES = new int[]{\r\n            R.drawable.india,\r\n            R.drawable.bangladesh,\r\n            R.drawable.germany,\r\n            R.drawable.canada\r\n    };\r\n    View view;\r\n\r\n    @Nullable\r\n    @Override\r\n    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {\r\n        view = inflater.inflate(R.layout.fragment_swapanimation, container, false);\r\n\r\n        mPhotosList = (ListView) view.findViewById(android.R.id.list);\r\n        mImageView = (ImageView) view.findViewById(R.id.picture);\r\n        mContainer = (ViewGroup) view.findViewById(R.id.container);\r\n\r\n        \/\/ Prepare the ListView\r\n        final ArrayAdapter<String> adapter = new ArrayAdapter<String>(getContext(),\r\n                android.R.layout.simple_list_item_1, PHOTOS_NAMES);\r\n\r\n        mPhotosList.setAdapter(adapter);\r\n        mPhotosList.setOnItemClickListener(this);\r\n\r\n        \/\/ Prepare the ImageView\r\n        mImageView.setClickable(true);\r\n        mImageView.setFocusable(true);\r\n        mImageView.setOnClickListener(this);\r\n\r\n    mContainer.setPersistentDrawingCache(ViewGroup.PERSISTENT_ANIMATION_CACHE);\r\n        return view;\r\n    }\r\n\r\n    private void applyRotation(int position, float start, float end) {\r\n        \/\/ Find the center of the container\r\n        final float centerX = mContainer.getWidth() \/ 2.0f;\r\n        final float centerY = mContainer.getHeight() \/ 2.0f;\r\n\r\n        final Rotation rotation =\r\n                new Rotation(start, end, centerX, centerY, 310.0f, true);\r\n        rotation.setDuration(500);\r\n        rotation.setFillAfter(true);\r\n        rotation.setInterpolator(new AccelerateInterpolator());\r\n        rotation.setAnimationListener(new DisplayNextView(position));\r\n\r\n        mContainer.startAnimation(rotation);\r\n    }\r\n\r\n    public void onItemClick(AdapterView parent, View v, int position, long id) {\r\n        \/\/ Pre-load the image then start the animation\r\n        mImageView.setImageResource(PHOTOS_RESOURCES[position]);\r\n        applyRotation(position, 0, 90);\r\n    }\r\n\r\n    public void onClick(View v) {\r\n        applyRotation(-1, 180, 90);\r\n    }\r\n\r\n    \/**\r\n     * This class listens for the end of the first half of the animation.\r\n     * It then posts a new action that effectively swaps the views when  the container is rotated 90 degrees and thus invisible.\r\n     *\/\r\n    private final class DisplayNextView implements Animation.AnimationListener {\r\n        private final int mPosition;\r\n\r\n        private DisplayNextView(int position) {\r\n            mPosition = position;\r\n        }\r\n\r\n        public void onAnimationStart(Animation animation) {\r\n        }\r\n\r\n        public void onAnimationEnd(Animation animation) {\r\n            mContainer.post(new SwapViews(mPosition));\r\n        }\r\n\r\n        public void onAnimationRepeat(Animation animation) {\r\n        }\r\n    }\r\n\r\n    \/**\r\n     * This class is responsible for swapping the views and start the    second half of the animation.\r\n     *\/\r\n    private final class SwapViews implements Runnable {\r\n        private final int mPosition;\r\n\r\n        public SwapViews(int position) {\r\n            mPosition = position;\r\n        }\r\n\r\n        public void run() {\r\n            final float centerX = mContainer.getWidth() \/ 2.0f;\r\n            final float centerY = mContainer.getHeight() \/ 2.0f;\r\n            Rotation rotation;\r\n\r\n            if (mPosition > -1) {\r\n                mPhotosList.setVisibility(View.GONE);\r\n                mImageView.setVisibility(View.VISIBLE);\r\n                mImageView.requestFocus();\r\n\r\n                rotation = new Rotation(90, 180, centerX, centerY, 310.0f, false);\r\n            } else {\r\n                mImageView.setVisibility(View.GONE);\r\n                mPhotosList.setVisibility(View.VISIBLE);\r\n                mPhotosList.requestFocus();\r\n\r\n                rotation = new Rotation(90, 0, centerX, centerY, 310.0f, false);\r\n            }\r\n            rotation.setDuration(5000);\r\n            rotation.setFillAfter(true);\r\n            rotation.setInterpolator(new DecelerateInterpolator());\r\n            mContainer.startAnimation(rotation);\r\n        }\r\n    }\r\n}\r\n\r\n<\/pre>\n
res->anim->layout_bottom_to_top_slide.xml:<\/strong><\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n\r\n<layoutAnimation \r\n       xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n        android:delay=\"30%\"\r\n        android:animationOrder=\"reverse\"\r\n        android:animation=\"@anim\/slide_right\" \/>\r\n\r\n<\/pre>\n
res->anim->slide_right.xml:<\/strong><\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n\r\n<set xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\" \r\n    android:interpolator=\"@android:anim\/accelerate_interpolator\">\r\n    <translate \r\n        android:fromXDelta=\"-100%p\" \r\n        android:toXDelta=\"0\"\r\n        android:duration=\"@android:integer\/config_shortAnimTime\" \/>\r\n<\/set>\r\n\r\n\r\n<\/pre>\n
And in drawable folder download the flags of four countries: India, Bangladesh, Germany, Canada respectively as india.png , bangladesh.png, germany.png,canada.png.<\/p>\n
Step 6.12 – Setting Up Together Animation:<\/strong><\/p>\n
\"TogetherTogether animation refers to the writing all animations one by one without using\u00a0android:startOffset(<\/strong>refers to\u00a0 the waiting time before an animation starts. This property is mainly used to perform multiple animations in a sequential manner)<\/strong><\/p>\n
android:fillAfter:<\/strong>\u00a0this attribute defines whether the view should be visible or not at the end of the animation.We have set\u00a0 its value true in our animation.If it would set to false then element changes comes to its previous state after the animation<\/p>\n
android:interpolator:<\/strong>\u00a0this property refers to the rate of change in animation. You can define your own interpolators using the time as the constraint. In this animation we have used an inbuilt interpolator i.e.\u00a0 linear interpolator<\/p>\n
fragment_togetheranimation.xml (Create in layout folder):<\/strong><\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:layout_width=\"fill_parent\"\r\n    android:layout_height=\"fill_parent\">\r\n\r\n    <ImageView android:id=\"@+id\/imgtogether\"\r\n        android:layout_width=\"200dp\"\r\n        android:layout_height=\"122dp\"\r\n        android:src=\"@drawable\/together\"\r\n        android:layout_marginTop=\"156dp\"\r\n        android:layout_alignParentTop=\"true\"\r\n        android:layout_centerHorizontal=\"true\" \/>\r\n\r\n    <Button android:id=\"@+id\/btntogether\"\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:text=\"Start\"\r\n        android:layout_marginRight=\"56dp\"\r\n        android:layout_marginEnd=\"56dp\"\r\n        android:layout_alignParentBottom=\"true\"\r\n        android:layout_alignParentRight=\"true\"\r\n        android:layout_alignParentEnd=\"true\"\r\n        android:layout_marginBottom=\"24dp\" \/>\r\n\r\n<\/RelativeLayout>\r\n\r\n<\/pre>\n
togetheranimationfragment.java(Create in fragment folder):<\/strong><\/p>\n
package com.example.abhishek.animationexample.fragment;\r\n\r\nimport android.support.v4.app.Fragment;\r\nimport android.os.Bundle;\r\nimport android.support.annotation.Nullable;\r\nimport android.view.LayoutInflater;\r\nimport android.view.View;\r\nimport android.view.ViewGroup;\r\nimport android.view.animation.Animation;\r\nimport android.view.animation.AnimationUtils;\r\nimport android.widget.Button;\r\nimport android.widget.ImageView;\r\n\r\nimport com.example.abhishek.animationexample.R;\r\n\r\n\/**\r\n * Created by abhiandroid\r\n *\/\r\n\r\npublic class togetheranimationfragment extends Fragment implements Animation.AnimationListener{ @Nullable\r\n    ImageView imageView;\r\n    Button btnStart;\r\n    View view;\r\n    Animation animTogether;\r\n\r\n    @Override\r\n    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {\r\n\r\n        view = inflater.inflate(R.layout.fragment_togetheranimation, container, false);\r\n        imageView = (ImageView) view.findViewById(R.id.imgtogether);\r\n        btnStart = (Button)view.findViewById(R.id.btntogether);\r\n        animTogether = AnimationUtils.loadAnimation(getContext(),\r\n                R.anim.together );\r\n        animTogether.setAnimationListener(this);\r\n\r\n        btnStart.setOnClickListener(new View.OnClickListener() {\r\n            @Override\r\n            public void onClick(View v) {\r\n\r\n                imageView.startAnimation(animTogether);\r\n            }\r\n        });\r\n        return view;\r\n\r\n    }\r\n\r\n    @Override\r\n    public void onAnimationStart(Animation animation) {\r\n\r\n    }\r\n\r\n    @Override\r\n    public void onAnimationEnd(Animation animation) {\r\n\r\n    }\r\n\r\n    @Override\r\n    public void onAnimationRepeat(Animation animation) {\r\n\r\n    }\r\n}\r\n\r\n<\/pre>\n
together.xml(Create animation resource directory in anim folder):<\/strong><\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<set xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:fillAfter=\"true\"\r\n    android:interpolator=\"@android:anim\/linear_interpolator\" >\r\n    <!-- Move -->\r\n    <scale\r\n        xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n        android:duration=\"4000\"\r\n        android:fromXScale=\"1\"\r\n        android:fromYScale=\"1\"\r\n        android:pivotX=\"50%\"\r\n        android:pivotY=\"50%\"\r\n        android:toXScale=\"4\"\r\n        android:toYScale=\"4\" >\r\n    <\/scale>\r\n\r\n    <!-- Rotate 180 degrees -->\r\n    <rotate\r\n        android:duration=\"500\"\r\n        android:fromDegrees=\"0\"\r\n        android:pivotX=\"50%\"\r\n        android:pivotY=\"50%\"\r\n        android:repeatCount=\"infinite\"\r\n        android:repeatMode=\"restart\"\r\n        android:toDegrees=\"360\" \/>\r\n<\/set>\r\n\r\n<\/pre>\n
Step 6.13 – Setting Up ZoomIn Animation:<\/strong><\/p>\n
\"ZoominFor Zoom<\/strong> use\u00a0<scale><\/em>\u00a0tag . It defines the scaling of the object.It has the following parameters:<\/p>\n
android:duration:<\/strong> The duration in which animation is completed is referred to as duration attribute. It refers to the ideal duration to show the transition on the screen.<\/p>\n
android:fromXScale<\/strong> : Horizontal scaling factor to apply at the start of the animation.<\/p>\n
android:fromYScale:\u00a0<\/strong>Vertical scaling factor to apply at the start of the animation.<\/p>\n
android:toXScale:\u00a0<\/strong>Horizontal scaling factor to apply at the end of the animation.<\/p>\n
android:toYScale:\u00a0<\/strong>Vertical scaling factor to apply at the end of the animation.<\/p>\n
pivotX and pivotY:\u00a0<\/strong>is the central point of the animation;<\/p>\n
android:pivotX=”50%” and android:pivotY = “50%” means the zoom will be started from the center.<\/p>\n
For zoom in :<\/strong> fromXScale,\u00a0fromYScale\u00a0attributes values must be lesser than\u00a0toXScale,\u00a0toYScale<\/p>\n
fragment_zoomin.xml(Create in layout folder):<\/strong><\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n\r\n    android:gravity=\"center\">\r\n\r\n    <ImageView android:id=\"@+id\/imgzoomin\"\r\n        android:layout_width=\"188dp\"\r\n        android:layout_height=\"150dp\"\r\n        android:src=\"@drawable\/zoom\"\r\n        android:layout_marginLeft=\"68dp\"\r\n        android:layout_marginStart=\"68dp\"\r\n        android:layout_marginTop=\"91dp\"\r\n        android:layout_alignParentTop=\"true\"\r\n        android:layout_alignParentLeft=\"true\"\r\n        android:layout_alignParentStart=\"true\" \/>\r\n\r\n    <Button android:id=\"@+id\/btnzoomin\"\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:text=\"Start ZOOM IN\"\r\n        android:layout_marginBottom=\"19dp\"\r\n        android:layout_alignParentBottom=\"true\"\r\n        android:layout_alignParentRight=\"true\"\r\n        android:layout_alignParentEnd=\"true\"\r\n        android:layout_marginRight=\"36dp\"\r\n        android:layout_marginEnd=\"36dp\" \/>\r\n\r\n<\/RelativeLayout>\r\n\r\n<\/pre>\n
zoominfragment.java(Create in fragment folder):<\/strong><\/p>\n
package com.example.abhishek.animationexample.fragment;\r\n\r\nimport android.support.v4.app.Fragment;\r\nimport android.os.Bundle;\r\nimport android.support.annotation.Nullable;\r\nimport android.view.LayoutInflater;\r\nimport android.view.View;\r\nimport android.view.ViewGroup;\r\nimport android.view.animation.Animation;\r\nimport android.view.animation.AnimationUtils;\r\nimport android.widget.Button;\r\nimport android.widget.ImageView;\r\n\r\nimport com.example.abhishek.animationexample.R;\r\n\r\n\/**\r\n * Created by abhiandroid\r\n *\/\r\n\r\npublic class zoominfragment extends Fragment implements Animation.AnimationListener{ @Nullable\r\n    ImageView imageView;\r\n    Button btnStart;\r\n    View view;\r\n    Animation animZoomin;\r\n\r\n    @Override\r\n    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {\r\n\r\n        view = inflater.inflate(R.layout.fragment_zoomin, container, false);\r\n        imageView = (ImageView) view.findViewById(R.id.imgzoomin);\r\n        btnStart = (Button)view.findViewById(R.id.btnzoomin);\r\n        animZoomin = AnimationUtils.loadAnimation(getContext(),\r\n                R.anim.zoom_in );\r\n        animZoomin.setAnimationListener(this);\r\n\r\n        btnStart.setOnClickListener(new View.OnClickListener() {\r\n            @Override\r\n            public void onClick(View v) {\r\n\r\n                imageView.startAnimation(animZoomin);\r\n            }\r\n        });\r\n        return view;\r\n    }\r\n\r\n    @Override\r\n    public void onAnimationStart(Animation animation) {\r\n    }\r\n\r\n    @Override\r\n    public void onAnimationEnd(Animation animation) {\r\n    }\r\n\r\n    @Override\r\n    public void onAnimationRepeat(Animation animation) {\r\n    }\r\n}\r\n<\/pre>\n
zoom_in.xml(Create in anim folder):<\/strong><\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<set xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:fillAfter=\"true\" >\r\n    <scale\r\n        xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n        android:duration=\"3500\"\r\n        android:fromXScale=\"1.0\"\r\n        android:fromYScale=\"1.0\"\r\n        android:pivotX=\"80%\"\r\n        android:pivotY=\"80%\"\r\n        android:toXScale=\"2.0\"\r\n        android:toYScale=\"2.0\" >\r\n    <\/scale>\r\n<\/set>\r\n\r\n<\/pre>\n
Step 6.14 – Setting Up ZoomOut Animation:<\/strong><\/p>\n
\"ZoomZoom out<\/strong> animation is same as zoom in<\/strong> but\u00a0toXScale,\u00a0toYScale attributes values are lesser than\u00a0fromXScale,\u00a0fromYScale<\/p>\n
fragment_zoomout.xml(Create in layout folder):<\/strong><\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<RelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    android:gravity=\"center\">\r\n    <ImageView android:id=\"@+id\/imgzoomout\"\r\n        android:layout_width=\"188dp\"\r\n        android:layout_height=\"150dp\"\r\n        android:src=\"@drawable\/zoom\"\r\n        android:layout_marginLeft=\"68dp\"\r\n        android:layout_marginStart=\"68dp\"\r\n        android:layout_marginTop=\"91dp\"\r\n        android:layout_alignParentTop=\"true\"\r\n        android:layout_alignParentLeft=\"true\"\r\n        android:layout_alignParentStart=\"true\" \/>\r\n\r\n    <Button android:id=\"@+id\/btnzoomout\"\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:text=\"Start ZOOM OUT\"\r\n        android:layout_marginBottom=\"19dp\"\r\n        android:layout_alignParentBottom=\"true\"\r\n        android:layout_alignParentRight=\"true\"\r\n        android:layout_alignParentEnd=\"true\"\r\n        android:layout_marginRight=\"36dp\"\r\n        android:layout_marginEnd=\"36dp\" \/>\r\n<\/RelativeLayout>\r\n\r\n<\/pre>\n
zoomoutfragment.java(Create in fragment folder):<\/strong><\/p>\n
package com.example.abhishek.animationexample.fragment;\r\n\r\nimport android.support.v4.app.Fragment;\r\nimport android.os.Bundle;\r\nimport android.support.annotation.Nullable;\r\nimport android.view.LayoutInflater;\r\nimport android.view.View;\r\nimport android.view.ViewGroup;\r\nimport android.view.animation.Animation;\r\nimport android.view.animation.AnimationUtils;\r\nimport android.widget.Button;\r\nimport android.widget.ImageView;\r\n\r\nimport com.example.abhishek.animationexample.R;\r\n\/**\r\n * Created by abhiandroid\r\n *\/\r\npublic class zoomoutfragment extends Fragment implements Animation.AnimationListener{ @Nullable\r\n    ImageView imageView;\r\n    Button btnStart;\r\n    View view;\r\n    Animation animZoomout;\r\n\r\n    @Override\r\n    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {\r\n\r\n        view = inflater.inflate(R.layout.fragment_zoomout, container, false);\r\n        imageView = (ImageView) view.findViewById(R.id.imgzoomout);\r\n        btnStart = (Button)view.findViewById(R.id.btnzoomout);\r\n        animZoomout = AnimationUtils.loadAnimation(getContext(),\r\n                R.anim.zoom_out );\r\n        animZoomout.setAnimationListener(this);\r\n\r\n        btnStart.setOnClickListener(new View.OnClickListener() {\r\n            @Override\r\n            public void onClick(View v) {\r\n\r\n                imageView.startAnimation(animZoomout);\r\n            }\r\n        });\r\n        return view;\r\n    }\r\n\r\n    @Override\r\n    public void onAnimationStart(Animation animation) {\r\n    }\r\n\r\n    @Override\r\n    public void onAnimationEnd(Animation animation) {\r\n    }\r\n\r\n    @Override\r\n    public void onAnimationRepeat(Animation animation) {\r\n    }\r\n}\r\n<\/pre>\n
zoom_out.xml(Create in anim folder):<\/strong><\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<set xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:fillAfter=\"true\" >\r\n\r\n    <scale\r\n        xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n        android:duration=\"3500\"\r\n        android:fromXScale=\"1.0\"\r\n        android:fromYScale=\"1.0\"\r\n        android:pivotX=\"50%\"\r\n        android:pivotY=\"80%\"\r\n        android:toXScale=\"0.2\"\r\n        android:toYScale=\"0.2\" >\r\n    <\/scale>\r\n<\/set>\r\n\r\n<\/pre>\n
Output:<\/strong><\/p>\n
Now run the App and open the Navigation Menu. Click on Animation name you want to see to test it.<\/p>\n","protected":false},"excerpt":{"rendered":"
Property Animation API was introduced by Google in Android 3.0 which gives us the flexibility\u00a0to change object properties over a certain time interval. The Animations Framework allows us to create visually attractive animations and transitions in our apps. Using the animations, one can turn their good looking app into an excellent and highly usable app. … Continue reading Animation Tutorial With Example In Android Studio<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"open","template":"home.php","meta":{"footnotes":""},"class_list":["post-600","page","type-page","status-publish","hentry"],"psp_head":"Animation Tutorial With Example In Android Studio [Step by Step] \u2013 Android Material Design Tutorial<\/title>\r\n<meta name=\"description\" content=\"Complete Animation tutorial to teach you how to use Animation in Android Studio for your App. The topics like types of animation, interpolator, attributes and more are also explained.\" \/>\r\n<meta name=\"robots\" content=\"index,follow\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/abhiandroid.com\/materialdesign\/animation\" \/>\r\n","_links":{"self":[{"href":"https:\/\/abhiandroid.com\/materialdesign\/wp-json\/wp\/v2\/pages\/600","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/abhiandroid.com\/materialdesign\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/abhiandroid.com\/materialdesign\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/abhiandroid.com\/materialdesign\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/abhiandroid.com\/materialdesign\/wp-json\/wp\/v2\/comments?post=600"}],"version-history":[{"count":4,"href":"https:\/\/abhiandroid.com\/materialdesign\/wp-json\/wp\/v2\/pages\/600\/revisions"}],"predecessor-version":[{"id":781,"href":"https:\/\/abhiandroid.com\/materialdesign\/wp-json\/wp\/v2\/pages\/600\/revisions\/781"}],"wp:attachment":[{"href":"https:\/\/abhiandroid.com\/materialdesign\/wp-json\/wp\/v2\/media?parent=600"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}