 So, very good afternoon everyone, welcome to the Android Graphics and Animation session. So, my name is Mihir Gokani and I am going to present on the Graphics and Animation on Android. So, actually me and my colleague Pushpok Burange, we both are going to deliver on this. So, we will be switching for some part I will be explaining and some part he will be explaining. So, the first thing that I want to, first of all I will give you a brief outline of what will be what will be delivering. First of all I will start with a drawing with canvas. So, I will explain a canvas in brief. The second thing will be explained by Pushpok Burange which is a view animation. Then I will be explaining a property animation which is a kind of a main thing in of this session. So, it will span before break I will start and will take some little break and after that I will continue on this. And then again Pushpok will explain about OpenGL ES on Android, he will give a brief intro about this. So, let us start with this the Graphics and Animation in Android. So, before starting I want to give a little tip that will be showing you demos on Akash. So, I will be switching to the Akash view frequently. So, because since this is a graphic session so without so we will get a visual interpretation of what will be what we want to do on the Akash. So, you will be switching to the Akash frequently. So, let us start with the canvas on Android. So, first a little motivation that why we need canvas for Android. First of all canvas allows us to draw 2D drawing on canvas. So, for example, some drawings we want to draw on for example, we want to draw some flow charts or we want to make a game which is a simple 2D game. For example, a chess 2D chess or any 2D games for example, so we can use canvas because it is easy to use easy to learn. The second thing is custom UI. So, custom for example, the default Android controls or views are not suitable for to you. So, you can go for custom UI for example, the Facebook app is developed in this way. So, they have developed their own custom UI on Android. In such a way you can develop your own custom UI. The third is simple games as I said for example, you can make some chess games or any simple 2D games and lastly we can do any 2D graphics and animation. So, on canvas we use canvas because it is very simple to learn. So, in this session I hope I will give you some motivation about how we can use the canvas to develop your apps. So, let us start. So first I will explain in brief there are three steps to use canvas. The first step is get a reference of a canvas. So in Java we usually create a new object. So in canvas also we can create a new object of canvas but in that way we can draw for example, on a bitmap an image and we can create that image and we can show it in the Android. An easier method is to extend existing view for example and we can override its on draw method. So for example, we can draw a custom shapes on that view and the third method is to extend a surface view or open gel surface view which is a more advanced topic and which is which will not be covered in this session. Pushpork will give you some brief idea about the open gel but the open gel view will not be covered in this session. So first step is referencing a canvas. So I will only talk about extending a view which was the second point of one of the three points. So that in this code you can see the small snippets shows that we can override the on draw. So we extend the view and we override its on draw method. So in on draw method we get canvas as a parameter and then we can use this canvas to draw anything we want on this canvas. We can extend the view and we can then override the on draw method which was the method of the view and then inside this we get a reference of canvas. So we can use canvas and draw anything we want. Now the second step is to actually draw. So how we can draw on the canvas? So we have two options. The first is use the draw something method of a canvas. So canvas contains a set of methods for example draw rectangle, draw circle, draw text. So in that way we can draw anything we want. So for example here the code shows here this is the this is what we write inside the on draw method. So here we have written draw circle and we have given some center of the circle given the radius and given the paint. I will explain paint later after a few slides that is what we can use to control how our circle looks actually control its attributes. One thing that I have written is draw rectangle we can set its bounds that is left, right, top and bottom of the rectangle. The third thing is I have written draw text. So I have written that what text actually we want to draw that is a string or resource ID of the string and at which position we want to draw and again in all the methods we can pass the reference to paint which I will explain later. Our second option to draw is to use a drawable. So for example drawable is for example if you want to draw some shapes. So there are there is a class which is called a shape drawable. So for example there is a rectangle drawable there is a oval drawable etcetera. So we can use its draw method and pass the our canvas in it. So it will draw itself on that canvas. So actually which option to use is your choice in simple if you want simply to draw something you can use the first option in which we have written draw something method draw rectangle or something of canvas and in this if you want to use the draw method of a drawable it is a bit more advantageous because we can customize the view or customize the attributes of the shape later I will show a brief demo of it. So I think the demo I will show the demo now. So I will show you with the first demo which was the demo of using a canvas which is done by using a draw circle draw all and draw rectangle methods. So here I have shown you two objects which are drawn on a canvas and the second demo is about drawable to draw. So this is the drawable to draw we have drawn a circle which is our shape drawable on canvas. So here I have not set the paint which was the last attribute last parameter of our method. So I have not set the paint but so it is looking black but in the earlier example I have set the paint so that it was looking blue so that is a use of paint that I explained later. The third step is to redraw so far we have seen the two things that how to draw using canvas but now that is not enough because in some cases for example if you are developing a game in that you want to do some interaction with the canvas for example when you touch it should change some attributes it should move the object somewhere. So we want the canvas to get updated when we touch on that canvas. So we change some attributes of the canvas of some shapes and then we redraw it we cannot directly redraw or we cannot directly call the order method but what we do is we invalidate the canvas so that it says the android that some attributes I have changed so you can now redraw the canvas. So for example here there is invalidation example so I have used I have written this code inside an on touch method so you can see the code later in the examples but the main focus of this thing is that we set the bounds of the our drawable according to the where the user has touched and we can add the drawable into the an array list and then invalidate the canvas. So in our on draw method we have just written that draw everything which is in drawables the array list so when we touch on this canvas for example I have touched here. So if I do not write the invalidate in the last line then the canvas will not get updated and the results will not be shown. So it is a critical thing that we must invalidate it but remember that more you invalidate the more calls will be made to on draw method and if you keep invalidating then it is a bad practice because the more on draw calls will be used and more power will be used of your device so you must think that when exactly you want to invalidate where exactly you want to redraw your canvas. So for example I have just redrawn when I touch the canvas so it gets updated whenever I touch and that circle is drawn on that at that point for example so yes so now I want so now I want to clarify the point that I have made that where exactly to draw. So this is the example how not to draw so remember that it is only a request to android system that now my attributes are changed and I want to redraw it but it is not always guaranteed that android system will redraw on this part so it might reject the request because there are too many other request that it has to handle so it is not actually guaranteed so if you think that you can animate some shape inside on draw method by just looping through a variable and drawing at that variable and then invalidating it so it won't work because this the on draw method completes only after this entire loop has been completed and once the android system can only draw after it after the line of control gets out of the on draw method so this invalidate has no effect other than just putting your request in the invalidation queue. So a better approach is to use this post invalidate method this post invalidate method is used if there is some other thread from which you are making a request to invalidate it so in this example you must create your another thread because as soon as you create another thread your line of control gets out of the on draw method for example this is the same example but inside a new thread so this entire code is actually inside the on draw method so now as soon as this thread is created and we start the thread the line of control goes out of the on draw method and this we can't write invalidate here because it is the another thread so we must write post invalidate which makes a request to the UI thread about the redraw and refreshing the thread there is a small demo of it this is a small demo of it so we can write the now I will explain you about the paint that was the last argument of our discussion earlier of how to draw things so we can set a number of attributes of paint for example we can change the color we can change the style we can change the outline of the outline that is a stroke of our shapes we can change style of our text even the style of our text for example here I have shown we can set the color and we can pass an integer which is a color value so you can get that integer from the color class and there are a set of methods that from ARGB value you can get that integer value of color or you can get a enum values for example color dot black will give you a black color color dot blue will give you a blue color you can even set some flags for example you want to turn on dithering or you want to turn on the anti anti alias then you can use this flags on the paint on the paint object to turn this on or turn this off you can set the text size for example and pass it float value for example you want 32 pixels so you can pass the 32 px 32 float value so 32.0 you can set the alignment which is the part of aligning enums so you can set the text alignment on this and you can pass this paint object as a reference to the large parameter of our draw calls so we have seen we can draw how we can draw on the canvas but and we can extend the view and to get a reference of a canvas so for example here I have shown you the view of a which is placed on the canvas so now I will explain where is the what the coordinate system is used by this canvas so here is the view and this is the coordinate system which is actually used by the canvas so that here the top left corner shows the origin of our canvas so for example and the x axis is on the right hand side and the y axis increases in the bottom so since anything we draw we draw outside the outside of our view is not actually visible so I will just show you this much of grid instead of showing the entire grid entire coordinate system so for example we want to show a point 94 which is 9 pixels in x axis and 4 pixels in y axis so which is actually drawn at this point which is highlighted in red so now a little tips for the users who want to do some work will learn the canvas and this is some advanced tips for example if you want to translate multiple objects so what you normally might think is you can you if for example you want to translate it 2 pixels – 2 pixels on x axis and – 1 pixel on y axis so for example you want to move your object which is at 94 to some point for example now you will calculate the difference now you will calculate the actual position for example you want to move it – 2 pixels on the left so you will subtract – 2 from 9 and you will add 1 into the y coordinate to get our new coordinate so now there is a problem that if you have hundreds of objects and you want to move them simultaneously then you will have to compute for each and every object a new coordinate system and then you will have to set it for each and every object however we can translate our coordinate system for example here I have shown that we have translated our coordinate system – 2 pixels in the x axis and 1 pixel on the y axis so our entire coordinate system has been translated so when we now plot 9.9 in the x axis and 4 in the y axis our object will be drawn translated and all the objects which we draw later will be translated the translation is a little easier so you might think I will calculate the translation for each and every object however for rotation there is a problem that you want to do with trigonometry for each and every object and compute the new coordinates however you can easily rotate the entire canvas and get the new coordinate system on which you can draw so I will show a little sample that for now just keep the lines which are marked at line A and in this canvas dot rotate 0 F means we are rotating 0 degrees so we are not rotating our canvas and we are drawing our balls at 50 in the x axis and all of the balls are drawn on the y axis as 0 so and we are drawing 3 balls blue, red and green now we want to rotate only blue and red balls so what we can do is we can say canvas dot rotate and some degrees the angle in degrees so here we can pass for example 15 degrees 15 F so it will be rotated 15 F however all 3 balls will be rotated since they are drawn on the same canvas so for this we are using canvas dot save which is and canvas dot restore which are marked as line A so now the state of the canvas before this save call will be saved for example here there was no rotation so it will be saved that there is no rotation and once we restore it that saved state will be restored again so there is no rotation at this ball so now when we say canvas dot rotate 15 F so only the balls which are drawn between the save and restore calls will be rotated and any call to the drawing of the ball which is after the restore call will not be rotated because we have just restored our canvas so the green ball stays at the same position now adjust a small tip that you can also define your drawables inside the XML file so all the drawables are will be taken as gradient drawable so I have talked about shape drawable which is rectangles or circles but there are also something called gradient drawables which are for example we can define the gradient on the drawable, gradient colors in the drawable so whatever we define in our XML will be treated as a gradient drawable so you can define your XML in a drawable folder inside the resources folder you can name your anything you want dot XML and you can recall it later the ID will be given as r dot drawable dot file dot anything that you have named earlier and how you can use that again later if you want to use it again in the XML for example in a some view for example text view you want to set the background of that text view or background of a button then you can simply write android background and then give a reference to that gradient however if you want if you want to get a reference inside a Java then you will write you will get a reference to resources of current activity and then you can call a get drawable method passing the idea of that drawable and then you can do whatever you want to do with that drawable for example here I have set the background of that drawable so it actually simplifies how you can use the drawables inside your canvas so now I have covered a canvas I have covered a basics of canvas now the animation part will be explained from now on so Pushpa will explain you about the view animation and then we will continue with the property animation and open share okay thank you hello and welcome to this tutorial on view animation my name is Pushpa Burange and I am a student here in the department of computer science at IIT Bombay so in this tutorial we will be covering view animation so before going on to view animation let me let me quickly talk about what is animation first of all so if you look up the definition of animation in Wikipedia it animation is a rapid display of a sequence of images to create an illusion of movement so when we see a sequence of images one after the other our brain perceives it as movement so that is the basic principle of animation so what are the examples of animation games cartoons I am sure all of you have played Angry Birds and watched various cartoons while growing up we all have so they are the examples of animation and thirdly what one would like to know is why would we want to study animation see a lot of educational applications can be built by using animation say animating science experiments or animating computer algorithms and many such things so there is a lot of work that goes in IIT Bombay in the field of animation for education so what are the kinds of animations of Android so there are basically four kinds of animations Android they are view animation property animation which will be covered by Mihir Gokhani after this session then there is a canvas and drawable and the final one is OpenGL of these methods OpenGL is the most generic and also the toughest method of animation and you can really develop superb applications using OpenGL and real life like animations using OpenGL but it is very tough to do and it requires knowledge of linear algebra and matrix theory so in order for you to become proficient in OpenGL we will be talking about OpenGL very briefly in this session but I do not think we can cover the maths of OpenGL because it is mostly the out of the scope of this syllabus so we will only be talking about view animation in this session and property animation afterwards so first of all what is a view in Android anything like a text view or image view is a view basically so in view animation in this session we will look at animating a text view what we will do is that we will take a text view and we will just translate a little bit and that is that is going to be our illustration in today's session so what are the kinds of effects that you can do in view animation well you can rotate the text you can translate you can change its color you can shrink it you can enlarge it and those kinds of things so anyways these are very basic effects so after after learning the basics I encourage you to learn more on your own because like there are a lot of things to learn which we can't cover in this session together okay so getting started first of all the animation that you want to do is defined in a ANIM directory inside the resources folder of your android project the ANIM folder might not be there initially you have to create it so after creating the ANIM folder inside the resources directory you have to place your XML which defines the translation we will look at it inside that here I am directing so let me quickly go to the IDE to show you the code we are seeing the XML here this is the XML that defines our animation so if I have to animate a view I have to use this XML for that so here we see a field from x delta and to x delta which means that which this indicates the initial and the final position of our view so this with this XML will translate our view 100 pixels towards its right if I want to translate towards its left I simply change this with a minus sign similarly if I want to translate it around the y axis I use the from y delta and to y delta another parameter here is the android duration which is the duration of the animation it's mentioned in milliseconds and here it's 2000 milliseconds which is equal to two seconds so this is the XML in which we define our animation and if you notice it's inside the ANIM directory in my resources folder so for performing animations we need to use the object of a class known as the animation class so if you what basically the animation class just loads the animation from the XML into the memory that is the function of the animation class so we'll look at how how to use a animation class the object of animation class so this is a standard API for defining an animation object we have to pass the context and the XML as a argument to the animation object and this will load the animation into the memory from the XML for you and then later you can use this animation object to create animations so once again we'll go to the ID and have a look at the code so this is the code here this is our text view our text which are which we are going to translate this is the animation object that we have defined using the API that I just showed to you this is the API for creating the object of the class animation and next we are going to use this object to create a translating effect so for any view like let's say a text view there's a method which is called start animation which is used to complete the animation effect so in this method we are going to pass the object of the class animation that we just created and so as you can see our translate text is our text view and we've called start animation on that translate text to complete our animation effect so we'll go to the ID yeah so here we have called the start animation method on our text view and that happens every time we click on the screen so that gives us the animation effect so I'll take you to the demo now on the tab so this is the text in the left hand corner just above my finger this is the text and I as I touch it it's getting translated by 100 pixels towards its right in about two seconds I'll do it once again as I touch it it gets translated right yeah so that is the effect that was produced by using an object of an animation class and using an xml triggering multiple animations so on an object of a class animation you can set an animation listener which gives three methods with it which are animation start animation repeat and animation end and these methods are basically callbacks that get called whenever the animation starts whenever the animation is repeated and whenever an animation ends so you can it is possible to trigger multiple animations on a single click if you call start animation inside on animation end because it's a callback that gets called when an animation ends and if you call start animation at the end inside on animation end it will trigger multiple animations so finally I'd just like to give a quick summary of what we did how to do view animation it's very simple first we create a xml that has the animation inform information inside it then we load that information into an animation object and then finally we call we pass that animation object to a view to complete our animation that is how view animation is done thank you