Implementing View Animation

0
1153

Hello friends !!! In this tutorial we are going to implement ViewAnimation.

  • All we will do in this tutorial is, on clicking the button the text will be animated and will move according to the coordinates given by you .
  • So follow the Steps :
    1. Create a new project and for example name it as ViewAnimation.
    2. Your MainActivity and activity_main files will be generated respectively.
    3. Now go to your activity_main.xml file and in your graphical Layout drag and drop the button on the layout .
    4. So now your activity_main.xml file graphical layout will look as shown below :
    5. 1

    6. Now go to the activity_main.xml file and in the button code set the text of the button as Animate as shown in the graphical layout.
    7. [code language=”xml”]android : text = “Animate”
      [/code]

    8. Also set the onClick property for the button ->
    9. [code language=”xml”]android : onClick=”animate”
      [/code]

    10. Therefore the activity_main.xml code is given below :
    11. [code language=”xml”]<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:tools="http://schemas.android.com/tools"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:paddingBottom="@dimen/activity_vertical_margin"
      android:paddingLeft="@dimen/activity_horizontal_margin"
      android:paddingRight="@dimen/activity_horizontal_margin"
      android:paddingTop="@dimen/activity_vertical_margin"
      tools:context=".MainActivity" >

      <TextView
      android:id="@+id/textView1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentLeft="true"
      android:layout_alignParentTop="true"
      android:layout_marginLeft="86dp"
      android:layout_marginTop="160dp"
      android:text="@string/hello_world"
      />

      <Button
      android:id="@+id/button1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignRight="@+id/textView1"
      android:layout_centerVertical="true"
      android:text="Animate"
      android:onClick="animate"/>

      </RelativeLayout>

      [/code]

    12. Your activity_main.xml window will look as shown below :
    13. 2

    14. Now go to res folder as shown :
    15. 3

    16. N. Now create a new folder in res folder and name it “ anim ” and rightClick on the anim folder and select New ->Android XML File and select set and name your file for example as “animation” and click Finish.
    17. Now you will have the Android XML window so write the translate code in it as shown below :
    18. [code language=”xml”]<translate
      android:duration="500"
      android:fromXDelta="0"
      android:fromYDelta="0"
      android:toXDelta="0"
      android:toYDelta="-100"/>

      [/code]

    19. So your window will look as shown below :
    20. 4

    21. Now go to the MainActivity.Java file and write the code for the button which on click will animate the text .
    22. The code is given below (Write this code after the onCreate( ) method:
    23. [code language=”java”]public void animate(View v)
      {
      TextView tv = (TextView)findViewById(R.id.textView1);
      Animation an = AnimationUtils.loadAnimation(this,R.anim.animation);
      tv.startAnimation(an);
      }

      [/code]

    24. Your window will look as shown below :
    25. 5

    26. Now run your app and you will get the following output :
    27. 6

    28. Now click on the Animate button and you will se your text performing animation .
    29. 7

    30. Thus we have Implemented ViewAnimation Successfully .