Android Image Fading Animation Tutorial - Part 1

In this tutorial we will use the designer to create the layout. The layout includes an ImageView and Buttons. The user needs to have five buttons for FadeIn, FadeOut, FadeOutIn, FadeInOut, InfinityFade. The user presses on the button to interact with the Image. I name my 5 buttons as b1, b2, b3, b4, b5, correspondingly. When the user presses the button b1, the ImageView will fade in automatically with respect to the number of milliseconds coded by the user. The same goes for b2 for FadeOut Image, b3 for FadeOutIn for the Image to Fade Out first and then Fade In with the corresponding time, b4 for FadeInOut for the Image to Fade In first and then Fade Out with the corresponding time, and b5 for the image to continuously fade in and fade out. Here's the designer view of the application: The visual component, as it names suggests, displays the layout. It also allows you to move and resize the views (controls). Changing the layout in the visual component will also change the values stored in the control panel. Note that all the data is stored in the control panel component. Therefore nothing bad will happen if the emulator crashes or is turned off.You can connect to it again and the layout will appear. The first step is to connect to the device. Press Tools - Connect. This step takes several seconds. Note that the IDE will stay connected until the IDE closes. Closing the designer will not disconnect the connection. Use the Add View menu to add a Button and ImageView. Change the views Button property and position with the ImageView to save your own picture them similar to this: Tip: When working with a small monitor you may find it convenient to check the "Top Most" option (in the upper right corner). It will cause the control panel to stay on top and not be hidden by the emulator. Save your layout, name it Main. An important concept about layouts is that there is a complete separation between your code and the layouts. The layout is saved as a file, with ".bal" extension. Each project can have any number of such files and unless you explicitly load a layout file, it will not have any effect on your application. Once you have saved a layout, it is automatically added to the "File manager". You can see it under the "Files" tab in the IDE right pane.We want to catch the button's click event.Each view has an EventName value. It is a property in the Designer, and a parameter passed to the Initialize method when adding views programmatically. In order to catch an event you should write a Sub with the following structure (it is simpler than it sounds): Sub _ (event parameters). I In the designer, the EventName property is set by default to the view's name. If we want to catch the Click event of a button with EventName value of Button1 as b1 weshould write the following sub signature:

1. Sub b1_Click

So here is the complete code:

1. Sub Process_Globals
2. End Sub
3.  
4. Sub Globals
5.         Dim a As ICOSFadeAnimation
6.         Dim i1 As ImageView
7. End Sub
8. Sub Activity_Create(FirstTime As Boolean)
9.         Activity.LoadLayout("Main")
10.         Activity.Title="ImageFadeAnimation - Copyright Lyndon R.Bermoy"
11.         'Contact me @ my mobile 09126450702
12.         'Or in my email [email protected]
13. End Sub
14. Sub Activity_Resume
15. End Sub
16. Sub b1_Click
17.         a.FadeIn("a",2000)
18.         a.StartAnim(i1)
19. End Sub
20. Sub b2_Click
21.         a.FadeOut("a",2000)
22.         a.StartAnim(i1)
23. End Sub
24.  
25. Sub b3_Click
26.         a.FadeOutIn("a",2000)
27.         a.StartAnim(i1)
28. End Sub
29. Sub b4_Click
30.         a.FadeInOut("a",2000)
31.         a.StartAnim(i1)
32. End Sub
33. Sub b5_Click
34.         a.InfinityFade("a",2000)
35.         a.StartAnim(i1)
36. End Sub

Note: ICOSFadeAnimation - is a package image fade library i created to integrate image fade in Basic4Android. I attach the library of image fading, copy and paste it to the library folder of your Basic4Android software. a.FadeIn("a",2000) - is a syntax where "a" is the IcosFadeAnimation variable for "Image Fading In" connected by a dot "." and the 2000 here is the time in milliseconds for fading in as. a.StartAnim(i1) - is a syntax where the IcosFadeAnimation Variable "a" where the code start to animate because of "StartAnim" and the a1 here is the image view we initizialized at the top. The same goes for a.FadeOut for Fading Out Images, a.FadeOutIn for Fading Out first before fading in the image, a. FadeInOut for Fading In first and then Fading Out the Image, lastly the a.InfinityFade for Button b5 for infinite Fade In and Fade Out. Best regards, Engr. Lyndon R. Bermoy IT Instructor/Software Developer/Mobile Developer STI College - Surigao City 09126450702 [email protected] Visit my page on Facebook at: https://www.facebook.com/BermzISware