Icon Animations in Android Applications - Complete Course | Stevdza - San | Skillshare

Icon Animations in Android Applications - Complete Course

Stevdza - San, Android Developer & UX/UI Designer

Icon Animations in Android Applications - Complete Course

Stevdza - San, Android Developer & UX/UI Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
37 Lessons (2h 34m)
    • 1. Introduction

    • 2. What is Vector

    • 3. What is Bitmap

    • 4. Understanding PathData

    • 5. Introducing to VectorDrawable

    • 6. Introducing to ObjectAnimator

    • 7. Calculating Pivot Point

    • 8. Introducing to AnimatorSet

    • 9. Introducing to AnimatedVectorDrawable

    • 10. Introducing to Adobe XD

    • 11. Adobe XD Interface

    • 12. Export Vector File from Adobe XD

    • 13. Adobe XD Shortcuts

    • 14. Free Vector Resources Online

    • 15. Introducing to Shapeshifter

    • 16. Animating Group Properties

    • 17. Path Morphing

    • 18. Animating Path Properties - Part 1

    • 19. Animating Path Properties - Part 2

    • 20. Clip Path

    • 21. Save your Project

    • 22. Export your Project

    • 23. #1 Design Checkmark Vector in Adobe Xd

    • 24. #1 Animate Checkmark Vector in Shapeshifter

    • 25. #1 Design Layout for Checkmark Animation

    • 26. #1 Implement Logic for Checkmark Animation

    • 27. #2 Animate Instagram Heart Vector in Shapeshifter - First Icon

    • 28. #2 Animate Instagram Heart Vector in Shapeshifter - Second Icon

    • 29. #2 Design Layout for Heart Animation in Android Studio

    • 30. #2 Implement the Logic for Heart Animation in Android Studio

    • 31. #3 Animate Loading Vector in Shapeshifter

    • 32. #3 Implement the Logic for Loading Animation in Android Studio

    • 33. #4 Design & Animate Dropdown Arrows in Shapeshifter

    • 34. #4 Design Layout for Dropdown Arrows in Android Studio

    • 35. #4 Implement the Logic for Dropdown Arrows in Android Studio

    • 36. #5 Animate Thumbs Up/Down Vector in Shapeshifter

    • 37. #5 Implement the Logic for Thumbs Up/Down Animation in Android Studio

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

Learn to create amazing vector Animations like the ones from Instagram, Facebook and implement them in Android Studio.

This course will teach you how to design and create vector animations for Android applications (Those animations could be used for iOS and Web as well), but we are only going to focus and implement our Animation in Android Studio this time.

I'm going to start this course by explaining you the basics you need to know to be able to undestand how vector animations work. I will introduce you to most important classes like; AnimatedVectorDrawable, VectorDrawable, AnimatorSet, ObjectAnimator.

We are going to avoid writing long boilerplate codes, instead we are going to use an existing web application called Shapeshifter. Then we are going to use that web app to visually create and animate our vectors and then auto-generate all the necessary XML code we need to implement in our Android application.

Meet Your Teacher

Teacher Profile Image

Stevdza - San

Android Developer & UX/UI Designer


Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Introduction: Hello there and welcome to my course. In this course, I'm going to teach you how to design, animate and implement different kinds off vector animations in Enjoy studio. You don't need to write longer boilerplate coats in order to make beautiful, clean and smooth animations. In Android studio, I'm going to teacher The easiest way to create animations using a Web application called The Shapeshifter, in which we're going toe visually, design our animations and, with one click, generate all the necessary coats we need for our animations toe work in Android Studio. You see, I don't want you to just auto generate the animation quote from the Web application because the later when you open that fire, you wouldn't understand anything and that that's why in the first couple of videos on this course, I will introduce you the most important classes in Android as decay for working with the Vector animations like animated director draw, Herbal Vectored, Roble, Animator Set and the Object Animator. Also, I'm going to explain with some of the most important properties off vector object like a path data and everything you need to know so you can learn how to create amazing animations and actually understand how they work at the low level. After this course, I'm sure you will have the necessary knowledge toe. Start designing and creating amazing animations on your own. And remember, your own imagination is the limit. So what are you waiting for and rolling discourse now and start learning and improving your skills right away? 2. What is Vector: Ah, hello there. In this video, we're going to talk about vectors. If you ever had an experience designing with Adobe illustrator Adobe X'd, quarrel, draw or escape and maybe some other tools of vector tools, then you are already familiar with the concept off vector graphics. And if you can't, don't worry. I will explain everything you need to know about it, and it's not hard to remember. I'm sure you heard things or two about it already. So ah, vector graphics are computer graphics that are defined in terms off 30 points, that which are connected by lines and the curves to form polygons and other shapes. Each of these points his ah definite position on the X and Y axis off the canvas and determines the direction of the pet objects in a vector image might consist off lines, curves and shapes with creditable attributes. Those attributes, ah, does not affect the object itself. You can't really change any number off object attributes without destroying the basic object. Those attributes does not affect the object itself. You can freely change any number off object attributes without destroying this basic object . Some of those objects attributes are color UH, height with, uh, capacity radius, and many more vector graphics are commonly found today in the SPG ES PDF or AI graphic file formats. Most logos are vector files. Also, fonts are one type of vector object because they are scalable. Vector based images are a resolution independent. You can increase and decrease the size off vector images to any degree, and your lines will remain crisp and sharp, both on screen and in print. Another advantage off vector images is that they are not restricted toe a rectangular shaped like big maps, Um vector objects can be placed over other objects and the object below with a show. True vector Circle and the bit map circle appear to be exactly the same when seen on a white background. But when you place the bit map circle over another caller, it has a rectangular box around it, from the white pixels in the image. Ah, vector images have many advantages, but the primary disadvantage is that they are unsuitable for producing photo realistic images. Vector images are usually made up off solid areas off cholera or radiance, but they cannot present the continuous subtitle tones off photograph. And that's why most off vector images you see 10 toe have, ah, cartoon like appearance. Even so, vector graphics are continually becoming more advanced. Today's Sir Vector tools allow you to apply bit mapped textures, two objects giving them a photo realistic appearance, and you can now create a soft blends, transparency and shading that once that once was a difficult to achieving a vector drawing programs. 3. What is Bitmap: Hello there. In this video, I'm going to talk about bit maps. Britain Map and Victor are two types of images you might find available online or is a supported image type in many graphic Softwares like Adobe Illustrator Photo Shop. That'll be eggs, the sketch and many more for our vector animations. We don't actually need that big naps, but I want to make sure that you understand both of them. So we're going toe. Make a comparison to learn cross and cons for each one of them. In most cases, when you want to import simple icon in your project, you might want to choose the vector because they can scale up and down without losing quality. Which is important when you are working on application, which will be used on different screen sizes. And the, on the other hand, using the big maps is recommended when you need to add some background images. But then you would need to create a couple off those background images. Different screen sizes and the debt could lead to a bigger size off our application, and it could influence on our application performance because bit maps are resolution independent. It is impossible to increase their size without sacrificing the degree off image quality. Scaling a bit map image toe A smaller size doesn't have any effect in effect. When you would do this, you're effectively increasing the PP I or a pixels per inch off the image s so that it will print print Clearer. This happens because it still has the same number of pixels, but in smaller areas, bit nip images in general do not inherently supports transparency. A couple of specific specific form. It's like a dry F or ah, PNG supports transparency. Common Big Mac formats include the G, I, F, J, P, G, P and G. Uh, the I, f F and the PSD. Converting between bit map format is generally as simple as opening the image in an image editor and then choosing ah, new formats from the program and just exporting that. So that would be all for big naps. Now you understand the main differences between the vectors and the big nips and which one is better in each situation 4. Understanding PathData: Ah, shallow there in this video, I'm going to explain you the path data attribute off Vector file The pain later Attributes is the most powerful element in a vector file. You can use it to create the lines curves, arcs in many more. Let me just start by saying that no matter how much you study path data commands, unless you're genius, there will be a limit to what you can understand. Ah, vector graphic programs don't exactly have clean, and the human readable code is a high priority. Um, after Victor, graphic files like S P G's are piped through Android studio. Victor drove or generator. They become a lot cleaner and easier to read. But I will try to explain you the basics. Okay, So before I explain your little details about the victor Path data, now it's first the download or create one stg file off a simple polygon vector object. Then we're going to use that file and converted toe XML representation off that victor so we can see and compare the actual data that this rector has inside it. For that matter, we're going to use the web application named the shape shifter. Remember There is also way off for converting s Pedrito XML using enjoyed studio record Robo generator as well. But since ah, now we're not going to run injuries studio just for this one simple task. Instead, we're going to use this convenient web application named their shapeshifter. Okay, so now we're going toe, create our own vector object. I'm going to use a tool named the Adobe X'd, but you can use any other vector to, like tools like Adobe Illustrator Sketch Escape and many more. So now I'm going to use a pen tool to create a simple polygon. So basically, I'm just going to draw three lines and I'm going toe change those lines color to black and ah, those of strokes or ah, lines with should be around 10 or 15. We will see. Okay. And now, when we have created our our object or polygon, we're going to export death toe svg performance. And now we're going to open our web application. Name the shapeshifter. I'm going to explain your details, this application in the some of my next videos. But for now, let's just import our SVG file here, and then we're going to export immediately toe vectored robo format, which is basically an XML file format, which we're going to. It was in Ah, injury studio. Okay. And now when we export that, let's ah, open it. And as you can see, we see two tanks here. The root is a vector, and the path tag is inside the vector. So it starts from the vector first. The first line of code, uh, is basically, um, for declaring name space. Second is ah. Name off our vector file. 3rd 1 and 4th 1 within height basically declares the the size off our vector. And below that, we have a view port with in view port height. And those values are the same as the with height. Well, Vieux port width and height are basically the size off our canvas on which we are growing our shapes. Okay. And the next week of our path, take here inside whatever name, which is the name of our path. There could be many more paths and not just one. Okay, um, so now let's see. Next one is Beth Data. So you see here bunch off numbers with dots like a coordinates, and you see some letters like M. C L and Zed or Zee, I don't worry. I will explain what those letters in those numbers actually means. But for now, let's check it out. What's Ah? What attributes more we can see here. Next one is a stroke color and it's black color. As we set in our software or Adobe's Day later or before two minutes ago. We have stroke with on That's in the same value as we wanted. So it's pretty precise, as you can see. And okay, this is I wanted to show you what's inside our vector file and you saw in the beautiful XML representation. Okay, so, uh, now I want toe talk about those letters in past data which you saw earlier So basically, uh, Beth commands are comprised off alphabet filed by one or more numbers. Those numbers are often separated by dot or comma, but they don't have to be Thea off. A bet can be upper or lower. Case uppercase means absolute position, and lower case means the relative position. So let's start with the command. It means moved toe. So basically we're moving cursor toe opposition. Um, move. Talk commands are followed by X and Y coordinates. There could be more than one set off coordinates following in M Command. Next one is Ah, the line l command L, which is a line to basically draws a line from the current position to the position specified by X on. Why? Um okay, so you can have more than one set of coordinates following lying command as well. Um, if you want to specify more than one set of coordinates, it means that you are creating a police line or a shape consistent off multiplies string lines. The next one is ah h command age. It means a horizontal line to it draws a horizontal line from the current position toe the position specified by an ex. So basically, we're drawing a line horizontal line on our X s excess. Um, and the next one is V command V it it means a vertical line. And basically, we're drawing a line vertically line on our when I was a why Access. Um, Okay. Next one is set command or Z. It basically draws a line from the current position of the cursor toe. The start position of the path The secret is usually used at the end off our palette later to close the path. The next one, Let's wait, have various off letters like C. S, u V. And those are used toe draw various busier and elliptic curves. For example. Que is quadratic busier. And that was it for those Beth data commands. Eso it was maybe too much information for you. But don't worry, you will not need to write those potatoes by yourself. There are better and easier way with visually create director image instead, a woman was tools for it, for that matter. However, it is important for you to understand that those stuff, because if you don't know how it works and you some somehow running toe a problem, you don't you wouldn't be able to figure out the code because you wouldn't know the actual how it actually works and what it actually means. So knowing the basics is always appreciated 5. Introducing to VectorDrawable: Ah, vectored Roble Vectored Roble is used to create vector objects based on XML Coat in the previous sir video where I talked about the path data you already saw. Ah code example for vectored Roble The route tech or element inside the record Roble XML file is Victor. The trial element is ah vector is a path and if there are more than one pass bets, we can create a parent called the group and place our path elements inside it. Of course, that's optional. Ah, vectored Roble is basically a aesthetic vector object with no animations whatsoever. If we want to apply animations, we would need to add the object Animator animated the vectored Roble and the optional animator set classes. I will introduce you those classes in the following readers. Um but for now let's focus on a vector trouble. So here I'm going to show you an example off one Victor Global XML file in the explaining some of the most used attributes off vector group in the past elements. So ah, there are specific attributes which can be used on Lee on path element and the sand off the attributes can be only used on a group element. So, for example, on ah group element we can apply. Ah, the following attributes like quotation scale, X scale. Why people tax people Why translate X and translate? Why on the path we can use the following attributes like a detonator feel caller feel Alfa Stroke color stroke Alfa stroke with ah trim pet start trim pet And in the trim pet All set Ah, I will explain those attributes Ah in details in the following readers when we start creating our animations But for now you should just know that they exist. Okay, Eso ah as you can see here on the right side which have ah visually Ah, we can usually see Ah our vector object. And on the left side we can see Ah, an actual XML representation off our vector object. So, as you can see, the root element is the vector child element is group and ah inside group We share two paths, so ah, as you can see, Vector has Ah a couple off attributes which I mentioned already. As you can see this first line of code Ah xml ah s basically declares Ah, the name space Second, the name is the name of our director within height. Ah, the with invited the size of our director and the view port within view Port height are basically ah size off our canvas on which we are drawing our vector object next week of group eso basically on the right side, you can see maybe you can see just one vector. But actually there are two ah paths inside our inside our vector object. So the first path is ah, little circle inside. And the 2nd 1 is the rest of the director object. So as you can see the first, Beth Ah, the both of those paths here is pretty much the same attributes with just the different path data. So Ah, this path data is a shortened because ah, I share deleted the two lines off code for the past data. But there will be time when you can see multiply lines off path data code. But in this case, I just wrote three dots eso this court can be ah seen. Ah, clearly. Um okay, we will discuss Ah more about the selector draw bar code in the following videos. When we create the actual animation and I really explain all those ah attributes which we ah, which I mentioned earlier eso next is a performance. So when we are talking about the vector animations, how do they affect our application performance? You need to keep in mind that the best performance can be achieved if the vector animation is not bigger than 200 GP in width and height. Of course you can create the bigger vectors, but then you will need to sacrifice your application performance keeping that in mind. In the most cases, vector animations are commonly used for animating icons, buttons and other smaller Y elements. Another useful tip. If a vector draw a ball is used in different sizes. It is more efficient to create the multiple vectored robles one for each size. For example, you care one vector global XML with the size off 24 dp and you want to re use that same excellent file in another activity, but in bigger size. For example, 100 dp. Then the best practice would be creating another identical vectored robo XML file with just the different size for within height. Um, OK, so for now, that's ah, all you should know about the vector drove or class? Um, in the next week, you will learn more about object animator class. So all those classes Ah which you will hear about can be was inside the Java class. But ah, I thought Ah, I could show you. Ah, the XML code instead off job because it's more easier to remember. And it's more organized for me. Just a personal opinion. So thanks for watching this video and see in the next one. 6. Introducing to ObjectAnimator: object Animator So Object animator provides support for animating properties on a target objects Even though we can use a Java code to write our animations, we're going to stick with XML because it's a lot easier. We're going to use Java only when implementing already made animations. So in the previous video where I talked about vectored global, I showed you apart off external cold off vector objects. And now we're going to spend that same quote in orderto any make one property off our vector using the object animator class. So was it conceived here? Um, we have two parts off the code and the first part is a familiar to you because ah, I showed you in the last video and the 2nd 1 is actually the object animator. So as you can see, the root element off this second part of the code is a target. So basically we are targeting our group element from above and the if you're asking why we're targeting group instead off the pets. So it's because we're using in this space rotation property. That's where we want toe enemy rotation for our rec project. And we want to animate both both of those paths and the easier way is to just target the group in the group could things both of those path elements. So next Ah, Belo targets Whichever a PT attributes. I will talk about this attributes later in the videos, the following videos. But for now, let's keep that. And ah, finally we share our object animator So the first attribute is property name Ah, the our object animator contains the fourth property names like rotations scale Extell Why translate X translate y and so on on duration off Our animation is 1 1000 milliseconds which is actually one second attribute value from zero and the value to is 360. So basically we are rotating our we are a rotating our director object from 0 to 360 degree Below that we have a very type so those values are type of float for type and below that whichever interpolated in this case is which was the fast out slow in? Basically, interpreters declare speed in the movements off some sort for our vector object. We have various off interpreters like fast out fast in winner out linger in ah accelerate accelerate Anticipate over short and grounds. You can use a different interpreters for a different kind of animations. Eso When we are talking about properties which can be animated, I will mention a few of them. For now, eso translate x in transit, while so these properties control where the view is located on the cannibals based on the coordinates. Next, we have a rotation. You already saw the example court of that. It basically controls the A rotation property. Ah, around the people point eso What does it means that people point? Well, I'm going to show you an actual animation here. So this is how it should the our animation work when our people were people. Point is, ah, on the center. So it's just the regular rotation around that your point. And this is how it should work when the people point is, for example, on the top. All right, so you see the difference, right? Also, the people point can be located basically anywhere left, right, top, and bottom and center. Of course, next one is scale, X and scale. Why? So these properties control the scaring off our director object around its spirit point. So again, you can set their people point wherever we want. So this is how it looks. Looks like when we set the people point on the center when we are scaring our rector object . And now we're going to set the people point on the top and let me show you how that works. All right, so you kind of get it. How it works with those period points. Also, whichever Alfa so basically offer represents the transparency off our vector objects. Um, the default value is one which means ah, full of visibility off our object and zero means full transparent. So the Alfa Value could vary it from 0 to 1. For example, 0.1 point 2345 678 and nine. And the one, of course, which is full visibility. And those are just a few off properties which we can animate. I will talk about more off other properties, the following readers. But for now, I just wanted toe show you a few of them Eso Those are some of the properties which we can animate using the object animator and the following videos. When we stop creating our own animations using your shapeshifter uh, we're going to see all of those enemy properties. Ah, in action. So be patient. There are a couple of things which needs to be explained before we can start with the actual animations. Because I want to teach you everything you need to know. So we can be ableto animate everything you could basically imagine using vectors. Of course. So? Well, thanks for watching guys and, uh, seeing the next video. 7. Calculating Pivot Point: Okay. So in the previous video, I showed you how a simple rotation animation looks like, and I showed you the actual XML file off that vector animation. Also, I have explained the use of people points for scaring and rotating, but I haven't explained how to calculate the people points. So here it is. First, let's calculate people points for ah, center off director object. Let's take our vector from previous video for an example. So our director size is afforded DP both in with height and if we want toe calculate people points for both X and why we would just divide with by two and height by through as well. So 40 divided by two is 20 and our X and Y people points should have value off 20. That's so simple. And what about calculating people? Points on the top or bottom? Well, that's easy to If we imagine our vector placed on canvas, we would also imagine X and y axis and the placing our people points Ah, on the top off our rector object would mean setting our people Why to zero and our people x 2 20 eso ah zero is the default value for both X and Y, and it's located in a top left corner off the canvas. I assume that you already know that X is a horizontal. And why is a vertical line now for, Ah, calculating bottom people points? Why would be 40 and X would be 20 now? Ah, I will let you calculate X and y people points for left and right. That's your homework for practicing. And now you should have the knowledge to calculate that by yourself. Thanks for watching and seeing the next video. 8. Introducing to AnimatorSet: Ah Animator set Ah animator set place set off animator objects in a specified order Ah, animations can be set up to play together in sequence or after a specified delay. So we're going to do is the same animation from object animated video In the video where I talked about Director Global you saw an XML code off a simple static vector object And in the video where I talked about corporate animator you saw that we added to reward points to x and y off a group object And we also added the rotation animation where our vector object rotated from 0 to 360 degree in adoration off 1000 milliseconds or one second And now we're going to add one more animation or technically, two more animations to our original vector object And also we're going toe was animator set toe play all those animations in the specified order as we want So, uh here you see the complete code Some of those lines, of course, are already familiar for you because you're you already saw that thing that previous videos So here we have our vector element. Basically we're drawing drawing here our vector object. We have also people points set toe 20 and basically we're setting our people points in the center down below You have a target. You already saw that as well. And the new things here are ah set element here. And two more object animators So set is basically an emitter set class and ah, it means that we're placing our animations in the specified order as we want. So the first animation is a familiar. It's basically a rotation and the other two are scale, X and scale. Why so basically ah, this our animation off hours plays to animations in sequence or in the same time. So ah, on the other object animator, we should ever start offset attribute set to 500 So basically it means delay. So our two less to animations are starting from the half off our animation time, which is 500 milliseconds and we are a scaling down our vector object from 100% from a 100% to 50%. And don't get confused by this value off in duration. So here Ah, you see ah duration off one second and down below you see adoration off health second on the other two animations. Well, it's because we are starting our other two animations from 500 milliseconds and with moderation off for 500 milliseconds, it's Ah, basically one second. So those ah three an emissions will and at the same time that's the most important thing here. And basically that's it. For now, that will be everything you need to know about Animator set for now. And then the next video. We're going to learn more about the one important class for a vector animations, and that class is called animator Vectored Global. In this class on the this class is important because it serves as a glue for our vectored Roble object animator and animator set classes and after I introduce you toe that class, you're going to be familiar with everything and you'll be ready toe actually create the rial animation by yourself. So thanks for watching and see next video 9. Introducing to AnimatedVectorDrawable: animated director Trouble. This class animates properties off vector trouble with animations defined using object, animator or any other set. This class is important because it serves is a glue for our vectored Roble computer animator and any meat of set classes Any make Director Global was introduced with android FBI level 21. However starting from FBI 25 animated vectored Roble runs on the render threat and supposed to you I threat for earlier AP eyes This means animations seen animated vectored Roble can remain small and even when they there is a heavy workload on you I threat I mentioned already some of the properties which we can animate using animated vectored rubble But I will repeat them once more. So basically there are rotation people tax people Why scale X scale? Why translate X translate Why? Beth Data feel quality Quill Alfa Stroke caller stroke with and stroke off. Okay, uh there are two ways off organizing our vector animations. First, we can organize our rectory nations in one XML file which contains the entire structure and the second approach is creating three or four separate XML files for ah vectored Roble Object Animator animator set and the animated vectored robe. The previous videos We have organized our animation in the one next file. By using that approach, you can merge the related XML files in tow. A single XML file through the XML bundle form it. The A eight PT element, which you always have seen, is used only when we are using the first. The first approach off organizing our structure in one excellent file, the A P T Tech creates separate resource is and reference them in the animated vector A p T stands for enemy for Android asset packaging tool. Okay, And now I'm going to show you the forecourt off our animation with all classes like Victor Draw well object animator, animator set and the animated Victor drop ball. So, as you can see here, it's ah, all the code that a familiar court which you already seen before, but now a Zaken see the root element here is animated vector, so that's basically animated vector global class and the you can see here a PT tag which was surrounds the vector here and the you can see the one attribute, though it says enjoyed the name name enjoyed global so Basically, it's ah tells that its trial, which is director in this case, is a draw. Herbal in the A P. T. Tech basically creates a separate the resource file and reference that file here inside, so down below, we should have Ah, another a PT tag which, uh here, which has the one attribute with value off Android animation. Basically, it has our application that the trial inside is an animation. So it creates in the background the separate file and the reference that file here inside. And of course I remember a pity take is used only when we are creating our animation in one XML file like this explicitly, of course. And now I'm going to show the second approach where we will create the three different text files for our animations. So the first file is ah vectored Wrobel XML. As you can see here, it's just our aesthetic vector object with the vector group and path elements inside the second different separated. The excellent file is animated Victor Global, and this, while just contains one trial which is target. There could be more than one target here. Target elements here, but for our animation, we just need one for now. And there are two attributes here. Enjoyed name and enjoyed animation. The first android name attribute basically tells that will toe enemy our group element, which is inside our vectored Roble. And as you can see, that's the same name off our group from the previous Vector Draw by Smell file. And the second attribute, animation, basically tells which animation was. We should play on this on this subject of Global, and that's animation with the name off rotation scale XML. And that's where we are heading over to rotation scale XML file. Just butter the XML file. Inside this file we have, ah, enemy of Set and our object animator with the three animations. So basically we can create separate the meter set and object animator class. But this is one another approach where we can merge them into one like this. Eso That's it. Now you learned about animated director Global as well. You saw two different ways off organizing our animations. This course will use the first approach by the finding our animation in one XML file, and it's because it it's easier and plus our Web application shapeshifter is going to generate all our animations in one excellent fire. So that's it for this video. Thanks for watching. And the next video I'm going toe introduce you toe shapeshifter. 10. Introducing to Adobe XD: hell there. So basically, ah, Adobe's D is a powerful tool for ah creating a vector graphics and ah, it is mostly was for ah ux and new I design. But you can also create many beautiful and ah clean ah, icons for your product. And this course we're going to use Adobe a city to create a different icons for our animation, so other basically is free to download. So don't worry about that. And the you can download and install this tool and then the next video and want to show you a simple adobe's, the interface and all the tools which you can use to create beautiful icons. 11. Adobe XD Interface: Helder and welcome back. So in this video, I want to show you Adobe X'd interface. So this is what you will see when you first time open a open adobe X day. So here you controls the different templates for ah, iPhone, iPad and the Web. Or you controls the custom size. And here you have, ah, cloud documents. Eso That means you can upload your project on the cloud. So this time we're going to select this web template. And when you open up a door begs D, you will see a simple interface so you can zoom in and zoom out by holding control and moving your mouse wheel. So this is the art board, and this is the layer section on the right side. When the left side you you also hear the different tools. So, for example, I chose rectangle tool and now its select lips stool. You can hold shift and all toe drag a perfect circle. And here we have a polygon tool. Next week. Caroline Toll. Just the whole shift. When you drag this line to draw a straight line and the next week have a pento, it's ah, already well known a tour for a vector programs. So next week have also a text tool. We can write a text here as well, and we can We can convert this text tow path if you want. So just right clicking this site. This bet and convert towpath. So now we will get the victor off our text. Okay, so next that we have our board tools so we can create a new art board like this one. But we won't do that now. And a song toe. So the most important shortcut for zooming in and zooming out is control and moving yours. Your mouse wheel. So on the right side, when you select one element, you care about within height so you can change those those values. All right. So also, you can rotate your element here by typing degree. Or you can do that manually by holding shifted runt. So here reach of a flip horizontally and fleet per vertically, so we can do that on our element as well. Down below we have ah radius. So we can apply radius toe are elements as well. And we can add the border caller and feel cooler as well as you can see you can change or at the specific hex code collar if you want. Uh, we can also move those angles. Change those angles, uh, as well, so we can increase the size off our strope. And as you can see, you can apply some modifications to it and we can add also shadow to our element here, as you can see and we can change the X Y and boldness off our shadow as well. So let's copy those circles by quoting often shift and the dragon, those two. So when you just like those, you can click subject and you can get the new shape. Or you can click here intersect and to get the new shape here as well or click control Z toe, go back or undo. And you can also merge those two. And this one is also I used, but not that commonly as the rest of them. So, uh, as you can see the big city, he has, ah, very simple interface, which is not very hard to get used to, that the most important thing when you were working with Adobe's is using the shortcuts. Shortcuts are most important because it will save your time a lot when you're working with some projects and the in the next video. Of course, I'm going to show you a document about ah, short gets keyboard shortcuts which you can use and apply into your work. Okay. And here, when our line, which we created with the pen tool, we can also increase the size and that there is option toe set, the dash and the gap between those those lines. As you can see, you can create something like that here as well. So keep practicing inside Adobe's Day. It's not very hard to get used to it, and that will be all for this video. 12. Export Vector File from Adobe XD: Hello there and welcome back. So in this video, I just want to show you how you can export vector from your ah, Adobe's d So just create simple circle here. So we're going to use elects to hold old and shift to drag a perfect circle. And it's pain this into a black color. So hold hold and shift to drag another one like those two by holding, shift and click this intersect or now subject. So we're going to create this shape with which is a similar to moon. So let's rename this to moan and hit control E and from the format just select the SVG. You have also bunch off options here. But what? These course We're only going to need this svg inform it. So just select it and click export And then we can use this vector file later in these scores 13. Adobe XD Shortcuts: Hello there and welcome back. So in this video, I just want to show you the official document for adobe eggs keyboard shortcuts. Here you can find the most use the shortcuts. For example, those are the main shortcuts for the tools. For example, select tool rectangle, Ellipse line, pento text art board, zoom and I for ah, color picker. So down below we have also many shortcuts. For example, For file menu, we have ah control and to create a new document control as to say the document If you want to export the existing victory, you can use ah command e for importing project. You can use control shift and I for grouping Ah few elements you can use control DRI toe under worry Do controls that or control shift that and so on. So be sure to check this document. It has a very useful shortcuts here, which you can use in your project 14. Free Vector Resources Online: Hello there and welcome back. So in this video, I want to show you four different websites where you can doll Oh, the victor icons for free. So the first website is called the I went icons. Okay, so here you can find them many different icons in two different styles. So as you can see, we have a material style and I west style So you can choose one of those and you can click on Ah, this cycle, for example and you will say down below in this pop up those two on just like this SVG I can hear and you will download the vector file for your project. All right. Next one is called the Non Project. So here you have a beautiful and simple icons toe Donald as well. So in the search bar you can type any word you want and you can just click this and click next. And just like this SPG and it will automatically prompts you to down on the this selective file. All right, so the next website is called the icon monster. So here you have a two different styles field, teen or bold. So, for example, it's true is bold. And hearing the search bar weaken, type some words. For example, it's type home. And as you can see, we have ah many icons here and we can choose here this from this option. Okay. And we can get only the thing icons. And the final one is called the Flat Icons. Here we can now on the I can't support free. But there is also premium version. So you have to pay toe, get some premium microns. As you can see there some colorful icons as well. But if you want, you can also download icon packs. So, for example, I typed in the search bar education and here Aiken dollar the whole pack off icons for ah, for the project if you want, and that's pretty much it. So those four websites are my favorite. And whenever I need some icon and I am so tired to design by himself, I just go here and download. It was in my animations 15. Introducing to Shapeshifter: Hello there and welcome back. So in this video, I want to introduce it to a shapeshifter. Shapeshifter is a web application for creating vector animations. So I'm going to introduce you with its interface a little bit. So in the left bottom corner, you have few options. When you click file, you can create a new project, open an existing one or even save project to your computer and you give a damn about. I will talk about that in the later radios, so don't below you have a layer layer of sector. And now when you click import, you can import the SPD or erected Robo and you can exporting s redirected Roble animated directed Roble which is important for us and estrogen spy trade for our web. So this this is a time line and here we will see ah, how long our animations are and so on. So when you click here, we can increase or decrease separation for our animation and we can change the name for our animation file. All right, so let me import one stg file will try share here in my computer. This SVG file is 40 pixels in width and height. So as you can see, it's consist off two paths and the you can check this vector path data on the right side and you can modify its properties like feel off, feel caller stroke off a stroke with, and they're so on. So as you can see, you can increase or decrease the opacity. All right, you can increase a stroke with, but we cannot see right now because everything is black. All right, so the other path is the little circle inside, as you can see. And now here we can create new past clip path and the group player. For now, we're going to create a group group A layer, and we're going to place those to pass inside. So I have already told that Ah, some animations can be applied only to group elements, and some off the animations can be applied only towpath elements. So when you click this animate this layer icon, you will cease like rotation scale people too, and translate. So those are the animations which can be applied only to group elements and the for the path elements you can see you can use for, like, feel cooler. Feel out for a stroll, caller stroke off dream path and so on. So if you want to be with some animations which are available in the group elements but for pass, then you need to place your pets inside the group. Its simple Is that so? When you will select this group on the right side, you can modify its the full properties. For example, scale accents care why we can scale down this the director. And if we want to place this in the center, we need toe calculate the people points. So I have already talked about how to calculate your points. So I will set people texting. People try to 20 because this this victory is ah, for the 40 pixels in height and with and placing it on the center will mean toe choose a people toe 20. All right, so, uh, let's ah, you with some animations here, for example, Rotation. Ah, and time will be 500 two. Very well. Set toe 360 and weaken truth some random interpolated here as well. So when when you click play button, it will rotate. As you can see, we could even click this slow motion option and the CEO Animation in Slow mo. All right, so it works good. Okay. And this address an example. We're going to create more complex animations later in the course. But for now, you can also take this repeat button, and it will repeat the animation every time he tends. Okay, so in the top, right corner, we have options. We controls the dark team, which want and we have ah, switch to beta option here. So when you say like that, it will open up a new window. And Ah, this is a beta version. So we have a to a bar when the left side would give us electoral rotation toe, we have pento. Ah, oval tool, rectangle, tool and zoom. So in this beta version were Frito create. Ah, um to create shapes here on the cannabis by ourselves. We don't have to import any svg from our computer. We can do that all here. And in some cases, we're going through with this better version because ah, for beginners, it might be more easier. All right, so that's it for now. 16. Animating Group Properties: hello there and welcome back. So in this video, I want to show you how to create more than one group animation and combined them into one beautiful animation. So here I'm going to import. The same file is before, and I'm going to create one group and place those two paths inside his room. So here we're going to select the rotation animation from this group. But before that, I'm going to scale down this element to 0.5, which is a 50% and I will set. People take some People try to 20 because we want our element to be on the center of the cameras. So let's add this rotation animation and let's change the animation duration toe one second or 1000 milliseconds, okay? And for the rotation, we're going to set end time toe one second and the value to 360. So there you go. Let's slow motion this. We can also use slow motion toe, see our animation, but next we're going to translate X and the start time will be zero and in time will be 502 value will be 10 because we want to move our element on the right side. And if we want to move element on the left side, winning toe use minus 10 for example. Okay, so this is how it works in a slow motion. Okay? And we're going to come by a few more animations here, so you'll see. Okay. So you can customize Interpol later as you want. All right. So next we can add the translate. Why? So basically translate X is moving element on the left and right and translate. Why is moving element the up and down, so combining translate X and transit. Why? We're going to get the corner position, something like that. As you can see, it will move on the right on the top, right corner. Okay, So I'm going to remove Translate why, Sosa, like this transit wife from the time right and just relate. And now we're going to add the scale, X and scale. Why? So we're going toe decrease further our vector. So in time for our scale, X will be 500 from value 0.5 and two very to 0.2. So basically, we're going to decrease the size from 0.5 to 0.2. Okay. And now we can add one more scale X and one more scale. Why? Just like this plus icon. And we're going to set this time start timeto 500 end timeto one second and from value to 0.2 and to value from 0.5, which is the opposite from the first scale. Accents Care. Why? So this is our how our animation we look like. So let's play that in a slow motion, okay? And it will increase again. Okay, that looks nice. So I will add one more translate, X. So, basically, I'm going toe, move back. This element from the right side toe its original position. So start time for the second translate X will be 500 then timeto want out 1000 milliseconds from value 10 to value zero. So it will be It will be going back from the right toe, its original position. So as you can see right there. All right, it looks nice. So, uh, this is just an example off one information, so we can also delete those translate x animations. And let's see, How will that look? Okay, so just the group's next size, rotating and increasing your sides to its Becker to its original dimensions. All right, And that's it for, ah, animating those group elements. I won't be showing. You got 20 people. Take spirit. Why? Because in most cases, we're going to use our people point our people Point will be located in the center off our rector, so that would be it for this video. I showed you how to animate the summer group properties, and as you saw in this video, it's not that hard. It's very easy. 17. Path Morphing: hello there and welcome back. So in this video, I I'm going to teach you how to create the morphing animations. So here, when When you click Demo, let's like this morphing animals and click play in slow motion. So this is our more fig animation looks like So it's basically morphing from one shape toe the other, and now I'm going to show you how to do that. So first switch to beta version of shapeshifter. Click this rectangle full shift while you create this this square and change the color to black position this directing on center. Now let's like this over tool and hold shift and old to create the perfect circle. And let's, uh, let's copy this best date off the circle because we're going to lose that pay the better data toe more our information. So just copy that, control, See? And now we can remove this circle Beth and select this rectangle. We can change the name to rectangle. Okay, And now let's at the Beth Data Animation here. Just click that and on the right side where it says to value removed that and based the path data from the circle. Okay, it will say that the best are incompatible. So we're going toe. Fix that. But before that, let's increase the end time for our path on morphing path animation for one second. And just like this auto fix, and it will automatically add or make those shapes compatible. So as you can see, this is how morphing animation will look like something like that. Okay, but we can customize this morphing animation by ourselves. So in the top right corner you can sack this icon where it says Edit Beth morphing animation and you will get the screen So it's concede this red circle. This represents a path, and it was automatically added by shapeshifter. So if I delete this this little path, it will says that those two elements are not compatible, so we need to add one more path on the rectangle in a row to make them compatible. So we can do that by pressing this plus icon, and we can place this bet toe wherever we we want. And now let's play this movie animation, okay? And as you can see, it morphs a different way, and it's not looks. It doesn't look so good. So, uh, we cannot delay this. Just select this sectoral and press this Beth and justly distillate. And now we can add one more Beth. But this time on the left side. And now let's play this animation and now it looks way better. So there are two ways toe create morphing animations. We can use auto fix, or we can add those baths by ourselves. All right, so there is one more tour which I need to show you, which is a split tour. And basically, we can spit one shape in tow, tour shapes or sub pets so you can use those blue dots toe cut the shape. And when you click, play toe, play the animation, you will get something like like cutting, uh, or you will see so well, it's yours or topics, and it will add automatically those two points. We could move those points where we want, but as you can see, we get the new morphing animation because those this shape was split into two parts and I just wanted to show you how you can use thieves. Strip shifted to create more donations you can create by yourself, but you're going to need some time to practice by yourself in the sport. It's not that hard, but you need to still sometimes toe death and the little bit for this video. In the next video, we're going toe continue and the exploring further those path animations. 18. Animating Path Properties - Part 1: Hello there and welcome back. So in this video, we're going to continue by creating other animations for our Beth elements. So here, in our shapeshifter beta version, we're going to create simple circle called the Golden Shift to create a perfect circle and then place it on the center. All right, so now select it and we're going toe had a field color. So now you'll see that the new line popped up on our time line so we can select that and we can increase in timeto one second. And we can change the value toe a black color. So now let me play this in slow motion. As you can see, it changes the color to black in a duration for one second. All right, so it's tricky out without slow motion. As you can see, it looks very nice. Okay, so let's daily that and let's set some other Beth property animation. So now we're going to use a feel out for so basically feel out for we're going to set the value toe zero. So any time toe one second. Okay, So it's going to see this caller feel color will disappear. Okay, let's conceal its played in a slow motion, and it's slowly disappears in duration for one second. Okay, so next we can add some or an emissions to our properties. And the first let me change this to value toe 0.2. As you can see now, this color will not disappear. Totally. Okay, so let's delete things from timeline and let's add a stroke color so we can change a stroke collar toe, maybe summer. Let's see red color in adoration off one second. So from start time zero OK, and now let's play the slow motion. As you can see, it will change the color from this great toe red in the Russian off one second. Okay. And now we can even increase that the fourth value for our element. So the foot value for stroke with 0.1 and now we're going to set that to one. So as you can see, our stroke is now a lot larger, and we can see more clearly our animation. Okay, it looks nice. Ah, so next, uh, we can add another property. So here, changer stroke with the fourth value back to 0.1 or 0.5 Maybe it looks better. So let's delete this. And the let's see was a stroke offer. So basically, this will the this means that our stroke will disappear over time. So we set the value to zero. So it will start, is your Joe and it will disappear, as you can see. Okay, Now, without slow motion, and we can remove this as well, let's add the, for example, stroke with. So we can set the value to 0.2, so it will shrink from 0.5 to 0.1. Okay, so let's change the start time toe 20 select from a timeline and select stuff like zero so we can use slow motion as well has continued. This Stroker with is a shrieking down from 0.1 from 0.5 to 0.1 and it works fine. All right, so this was it for this video in the next year, we're going to continue by exploring summer dream Beth properties in shape shifter 19. Animating Path Properties - Part 2: Ah, hello there, and welcome back. So in this video, we're going to continue by exploring the further some path Uh, animations. So now I'm going to strike the mental and just create check Mark Vector so it will look something like this. Okay, so now select directo and we can remove this feel car. We don't need that. We just need their line. So let's increase the stroke with toe 0.5 and color to a black. Okay, Now it's place this on the center, and now I'm going to show you co. Uh, he was a tree, Beth. Start and then offset. So it started with a dream path start, and it's increased duration for our animation toe. One second, select treatment start and set in time for one second from value zero in two, very one. So it starts. Okay. As you can see, it is a starting from its start point, which is the right side and the ending on the left side. Okay. So we can reverse those values we could even set from value toe one and two very toe zero. So it will go in opposite way. You can see this This one looks nice. All right, so we can combine Trim, pet, start with, for example, Dream path. And and now you'll see. How will that look? So it's at tree Beth end, and, uh, we're going to set the start time for cheap Bethan toe 500 milliseconds and the end time toe One second. Okay. And for trim pet start, we're going to set the end time toe 500 milliseconds. So when trim path start finishes the trip, Beth and will start. So now you'll see. How will that look? All right. So it's changed between Beth and the values. So trump, it start is 10 from very oneto value zero and the tree Beth, and will be from 120 Okay, as well. So let's start this animation. As you can see, it looks very nice. Okay? You can even play. You can play with those values by yourself. You can increase duration. You can change Interpol. Laters for those animations. Eso Now it's reverse those values from 0 to 1. Okay, this one does not look that good like the last one. But you know you're going to learn how to use that by practicing. So let's remove drink, Beth. And and it's increasing treat. Best start and timeto one second. And now Okay, we can't that animation. So it's ah, change from value to zero and to value toe from toe one and two. Very 20 Okay. And now we're going to add a trip path offset. Okay, so now let's see how those two combined together. Dream pet offset. Start time will be zero and from value zero and two, very one. So let's play those stories. You can see nothing happens. So we need to change to value to, for example, 0.5. Just a little lower. And as you can see, how that animation works from both sides is starting. Okay, We can even play with those values in the and see how would that work in the combination? Okay, now, let's remove that, and, uh, we can set the dream path and, uh, here as well. So, as you can see, this one looks nice coming from both sides as well, so it can change. We can play with those values as much as we want. So as you can see, this one looks nice toe. So uh, playing with those values. Ah, can be Ah, very interesting when you're working with your animations and basically you can discover some new animations by doing that. So I recommend you toe practice by yourself, and that will be all for this video. I showed you how you can combine trim Pasto, create beautiful animations with just strokes. And in the next video, I'm going to show you how to use a clip path, which is another great future in a shapeshifter. 20. Clip Path: Ah, hello there, and welcome back. So in this video, I'm going to show you how to. It was a clip path inside shapeshifter. So we're going toe switched a beta version. And here I'm going to show you how toe create a new clip bath and how to create vector mask for your animations. So first will be to start by selecting this mental, and basically we're going to draw a simple cup. So this would be vector file off a cup. So just drag somewhere here and now in the left side. So you don't have to draw a vector here. You can draw inside the Adobe X'd or some other vector tools, but this is just for example, purpose. Okay, so now it's increased the height a little bit. Okay? And weaken center our vector on the center of the canvas. So we can also add the field color or stroke color as well. So, first we're going toe, remove feel car color and add the stroke caller. Of course, we can increase the stroke with 20.5, for example. Okay. And now let's rename this vector toe cup and let's ah, change duration to 600 milliseconds. All right, so before we create the new clip, Beth, we want to create another vector. So basically, this vector will represent Ah, something like a wave off water or any other liquid. So just the drag here, and let's create something different. I will curve here, Amy. And here outside this cup. Okay, Now it's zoom tool so we can take it out. So it's not perfect, but you can modify this. Ah, this Beth line you can change. Of course, the values for stroke caller if you want us. Well, so, uh, we can modify this this line a little bit. You only need to double click on this line and, uh, select the this point so you can ah, modified that. So I'm having a hard time toe. Just click on this line, you know, because it's toe tiny. But once you succeed, then you need to click on this line. So me to select toe you was selected again, and now it's OK. Click this and we can modify our wave a little bit. So once we are satisfied with our of a bath, we can ah click on that. Beth now weaken center that on the screen. Okay. And we can continue drawing our wave. So just drag here with the pen tool and ah, outside this cup and let let's ah, connect those tow paths. OK? And now let's say the field car. Okay, so, uh, now let's increase. Ah, a little bit height. So it covers all the cup. Okay, so basically what we're going to do, we're going toe enemy translate. Why on our water bath? Okay, so now that we have those two vectors already, we can proceed with our animation. So click here, nuclear path. And before that, we're going to create a new group because our water vector needs to be in a group and the only that we can apply Translate Why? Animation. So we need to copy this path data off our cup. Remember that? And paste that based data inside our clip nous okay. And you will see something like that. And the next thing on our group, we're going to apply. Translate why? Animation And they were going to experiment a little bit so well, it's set in time to 600 milliseconds and to a very toe minus 15. So I think we should increase to value a little bit so our cup can feel on the top completely. Okay. As you can see, it's not filled up completely. So we need to increase or decrease because it is minus. So I think minus 21 is the perfect value for our current the animation. And as you could see in slow motion, it looks like that. So a clip Beth is a very powerful tool. And ah, you can create the many interesting stuff for with that just yours, your imagination. 21. Save your Project: Ah, hello there. And they're welcome back. So this will be a short video. Just want to show you how you can save your existing project from a shapeshifter. So, just like this file and then save, and it will ah, save your fire with the extension off shapeshifter, Just like okay. And whenever you want, toe import an existing product, you just ah, click this file and then open. Locate your file and ah, just open it. So in this file of everything will be fine. So if you apply the any animations in the timeline there ah, they will be visible and basically everything you saved. 22. Export your Project: Okay, So in this video, I just want to show you how you can ah, export your animation from shapeshifter. All right, so I'm just going to create the simple um um, animation. As you can see, it fades out so that this is a feel Alfa animation. So you just click this export and click animated vectored Roble. So this is very important to choose because ah, this is simply an XML file, which later we're going to was inside our android studio. And of course, I'm going to show you all the contents which this ah file contains 23. #1 Design Checkmark Vector in Adobe Xd: Hello there and welcome back. So in this video, we're going to design our own A check Mark Vector flyer inside Adobe X'd. So first select a lip store and draw a perfect circle by holding old and shift. So the dimensions off our circle will be 1 52 in width and height. And let's change the with or size off our stroke. Four. All right, and now we're going to create the two lines, or we can use line, tool or rectangle tool as you want. We need to align those two lines with our circle horizontally and vertically aligned like that. And let's select those two elements by quoting shift controlled Reto. Group them and let's lock this Slayer. All right, so those two lines will serve as a guy lines for creating a check mark. So you will see Now select a mental and we're going to start by creating a curve. So we can, uh, create our check mark here. So you will see now so we can start somewhere here and let's create this curve. You can hold shift so you can draw a strike line down below. Okay, now let's increase this size of this lyinto four and the color to black. So it's first or just this a little bit. Okay, let's increase the size before the same with Stoke with is our circle. And now we can play a little bit toe aligned this discover with our, uh, circle. So it was like it will take some time toe, um, to adapt to it perfectly. But don't worry, it's not that hard. So just move those baths a little bit and you can align that. So for now, I think it's good we will modify that in the next we do when we start working in a shapeshifter. So now he was a pen tool and draw this strike line on the bottom by calling shift and one more on the left side. Okay, so basically, we share our our check mark here and our circle so we can remove those guidelines. So I lock and remove and there it is. We can change the color of this circle to black so they can match, and we can trace the the names for our check mark in the circle. So let's do that. This one will be named Circle and the this first path will be named Check mark. Okay. And that's it. We have successfully created our first vector file in Adobe Thursday, And then the next video we're going toe animate that in the shape shifter. 24. #1 Animate Checkmark Vector in Shapeshifter: hell there and the welcome back. So in previous video, we have created this check Mark vector, and now we're going to export those toe files. So control e and just export those two paths is s victory. So now I never get toe beta version off a shapeshifter. And now it's import those two paths with which we exported earlier. Okay, so click import svg and select this strike mark and check marking a circle click open. And as you can see, our check Mark has a little bigger stroke with. So our original stroke with is a four, so we need to decrease that. So it's ah, select our check mark in the changes stroke with before and now it looks very nice. So now hold the shift and the decrease the size of this track mark a little bit. Okay? And now we need toe increase. Just a little bit on the left. Okay. I think it looks perfect. And now it's Zoom in and we need toe a line on this check mark with the circle. So let's select our check. Mark best and let's change the color toe red so we can distinguish those two elements because they were the same car. And let's move this check mark on the top of the layer, okay? And now selected strict Mark. And let's move that a little bit left right there on the top so we can align this with our circle from behind. So it will take some time until you don't get used to it. But it's not that hard. Okay, so we're going toe ally in this strike mark with the circle behind, so our animation will not look like it was made out off two paths. Okay, so you will see we're going toe Combine those two pets in a great animation and the I think , uh, this is the place where we should leave our check, mark. So let's zoom out, hold both and press on the camps. Let's change back toe, black color. And I think it looks perfect. All right, so let's create the new group player and inside the group player we're going to set were going toe add this circle. Okay, because we it was a rotation for our circle. And let's change the name so we can distinguish those two pets. And this Beth will be named the check mark. All right, let's add the duration toe one second. Okay. All right. So, uh, now we can start in first. We're goingto select. Ah, our stroke off for our track, Mark. And we're going to set it to zero. So our animation will start with the circle, and we don't want our check. Mark Tobey shown Next's like this group player and the at the rotation toe. 45 degree Onda, Of course, we in our circle Toby in the center. So we need to calculate the Pierpoint, As you can see within height are 1 52 So just divide that by two and you will get 76 for people and for people. Texan people. Why? And now we have our a circle in the center of the camps. All right, that's fine. Eso next. We're going to start by adding a shrimp. Beth, start torching Pathan. Let's first see, how will that look? So any time will be 500 which is a health of a second, because our animation lasts for one second. And this circle animation, should we just 1/2 off that duration? Okay. I think we will remove this dream past. Starting there, we're going to add a trim pest and both off our check mark and circle pets. So let's remove that, Then let's at the dream, Beth. And okay, so the start time will be zero, and time will be 500. Okay. From value. Uh, let's see. Okay. From very one and two. Value zero. And our mission will start like debt. And let's at the trim Beth. Or first, let's increases throw cough one so we can actually see our track marks. So as you can see, this circle does not finish lying to our check marks s. So we need to increase rotational little bit. So let's play animation. Still, we need to increase rotation to, let's say, 47. Ah, Antic 48 will be perfect. Let's start again. All right. Now, those two pets are perfectly aligned. Okay, So, rotation 48th in this case. And now we need toe set our field alfa uh, property animation on our check mark. So let's let's do that. But first it's at the stream path and the animation for our check mark. So from very busy zero to very one, and let's see how that works. Okay, I forgot toe to set the start time toe. 500. So change that. And now we could start our generation. As you can see, we have this blink distortion. But don't worry. We're going to change that. So we're going to change that by adding a feel, uh, stroke offer. Okay, so select check. Mark set stroke offer 20 to the fourth value, and let's add a stroke off, uh, property animation here. So the start and end time will be the same, which is 500 and we want this to be executed immediately. Okay. As you can see, there is no more that bling distortion on our animation, and that's great. Okay, See, it looks very nice. So there is one more thing which should be removed here, and that's it. And that is the disc Herb on the top right corner. So in order to fix that, we're going toe at the drink. Beth Stout combined with Treat Beth. And so you will see now. So it said the train passed. Start You. Okay, let's set the start. Time toe. 500. From very zero to value. Uh, 0.11 And as you consider school is gone. Okay? And now we can play this animation from the beginning. Toe check how that will look like. Okay, so it's us rectal. And let's play this animation from the beginning. All right? And now it looks nice. Okay, so let's ah, turn off this slow motion. And as you can see, our animation is too fast. It it is so fat. So I think we should increase the overall duration for our animation toe three seconds instead off one second. So let's do that. And after we increase the overall adoration for our animation, we're goingto increased duration for each of those animating properties. So drink Beth and okay and treat Beth I'll for here as well. So 1.5 2nd starting the end time treat Beth and the Katrin bets start 1/2 2nd So I will spit up this video a little bit so I can modified those values. But you're just increase liberation. It's not a big deal. Okay, so it's a stroke off trim pet. Start not 15,000 but help in second. Okay. Trip estar en timeto three seconds. Start time. Second half. All right, and now it was right s o. That would be it for this video. And in the next videos, we're going to start by implementing this exact animation inside our enjoys to the application. Okay, so now let's change the name for our animation and click export toe animated vectored Roble . And now we're going to export our animation. And the next video we're going through is that same file. 25. #1 Design Layout for Checkmark Animation: Hello there. And welcome back. So in this video I have created already projecting Android studio. And now we're going to copy this file which were generated from a shapeshifter, and we're going toe pace this file into trouble director here. So just right. Click and click based. Just like Okay on. Okay. And now you can see the whole code, which was generated by a shapeshifter. So each of those the lines here inside our XML file are already familiar to you because I have introduced you in the first videos off this course. So, as you can see, there is an A P T tag vector. Take Beth group down below, which have a target elements. So we're targeting our circle best as you can see. And Don Bill, we have another targets. What? It were targeting our check Mark Beth and which have object animator here inside our our, uh, set you can see down below. We had three enemy three object animators as well. Okay. And you also see those warnings for our interpreters. So don't worry about that. We're going to fix that with one line of code. Basically, it says that we need toe those lines require FBI levels 21. So, as you can see, it says that the record FBI level 20 while and here when our route element animated. Victor, we're going toe. Add this Stargate FBI lollipop, and basically this one will disappear from each and every line. And now he's fine. So it's closed this and inside our activity mainly out. We're going to have one image view and select this check mark animation, which we just imported into our product. Well, it's going those constraints Stop left and right. Okay. Talk constraints would be, uh, 1 50 maybe. Okay. And we've been toward one more button here on the bottom, so connect bottom left and right. Constraint. Okay. Bottom constraints should be 24 for example. And here we're going to leave those ideas simple as immediately when the button and we're going to change a button text toe, go. All right. And we went with the play out with toe. Met the parents, so let's check it out. And we've been 12. The petting on our route constraint layout. So betting 24 dp. Okay, let's check it out. How that works. Okay, It's fine. For now. this was just for the purpose of this tutorial. So now we're going toe open our application inside the android emulator to see how that looks. And it looks fine that there is just one more thing we should modify. And that is this image of you visibility. So just at the visibility elements here, okay. And set to gone. So when we open our application, we don't want to see this immediately. We want to show this animation only when we press our go button and we're going toe implement the logic for this animation inside the in the next video. 26. #1 Implement Logic for Checkmark Animation: held there and the welcome back. So in the previous video, we have designed the layout for our application, and now we're going to implement the logic for starting our check mark animation. So first, never get domain activity and we're going toe create the image you and button off its. So we're going to find the idea of those two elements inside on create method, and we're going to add the on click listener for our button. So when we click our button, we want to show this animation. And after the animation is finished, we want toe redirect the user toe second activity so we can give some context to this application off hours. So in this conflict, listener, we're going toe set visibility for our image view. So because our image Rio is here and we want to make it visible. So let's start checking. This works perfectly, just like this button. And there we go. We can see now our image. You all right? So now that we have checked that, we can continue by implementing a logic So next created Wrobel object here, and we're going to store this Drobot from our image. We went inside our drove object. And let's add two objects for animated director global and animated director Global Competition. So this animation will be compatible with both older and your versions off. Enjoy the U. S. So next inside and quickly center. Let's said the if block. So if Drogba is instance off animated vectored Roble we went through this same it directed Roble object and we're going to store a robo inside that. But before that, we're going to cast to animate directed Robo. Okay, so we share a warning here saying that it is required to have a pee a little 21. So just at this, require FBI imitation here on top off our own quick listener. All right. And now we're going toe use the start method from our enemy to Director Global to start the animation And in else, if book women toe was a global instance off and this time animated vector job or comp it. Okay, so if else if user is using some older device, then we're going to play animation as well. So just repeat this step from above. But this time we're using a different object. Remember, Animated vector Global competition Okay, So I think we could We could start our application to check it out, how it works and to check if everything works. Fine. So but surround application. Okay, so now click. Go button. And as you can see, our animation works perfectly fine. Okay, that's nice. So the next thing what we're going to do, we're going to create a new method called called the Weight. Few Seconds. And we want toe make a function. So when our any mission of finish eso when our animation is completed, we want toe redirected. Was there to a second activity. So we're going to was a underclass, and it's metal post delayed. So we went toe weight of four seconds because our animation lasts for three seconds and the after four seconds were went to great intent and basically redirect our user to second activity. Okay, does create simple intent and start the second activity, and we're going toe call this. Wait a few seconds method inside if And else if blocked as well. So just copy this name based here below start method, okay? And called the Smith once more in the book. All right, so now it starts application and see how our animation works, as can see our nation is completed and now the user is redirected in the second activity and that, and that's basically it. For this video. Use your imagination to create beautiful and custom animations for your project and the next videos. We're going to create some amazing animations as well. 27. #2 Animate Instagram Heart Vector in Shapeshifter - First Icon: Hello there, and welcome back. So in this video, we're going to start by any meeting Heart icon. So this animation off hours will be similar toe instagram alike or Harker Animation. So I have prepared to tow vectors. So the 1st 1 is instagram outline, and the 2nd 1 is incident field. So we're going to animate those two vectors is a separate animations. You will see. So, uh, first we're going through with this instagram outline. So remember, the width and height are 46 by 42. And knowing those values, eyes important for calculating a pure point. All right, so open up a shape shifter in your browser and let's get started. So I went to import this outline, outline heart. All right, and then we're going toe change some values. So first, let's change the name off our path. Toe Easter M outline. Maybe. Okay. And next, let's change duration for our animation toe. 800 milliseconds. And, of course, the name off our animation toe. Easter Room one. Okay, now that we have ah, or that it's create a new group and we're going to put our eastern outline path inside that group, so just drag and drop there. Okay? And the next thing you need to select this group and change the default scale Exit scale, white toe 0.9, which is the 90%. And we're going to calculate the people points eso our Pierpoint should be located in the center, so just divided within hide by two. And, uh 46 divided by two is 23. And the people why is 21? All right. So the reason why I am decreasing the initial scale X and scale, why is because our animation will grow and you will see? Okay, so let's drink. Let's add a scale, X and scale. Why in our group element and the list changer and time toe 300 the two value to 0.5. So we're going to do that the same for our scale. Lie as well. Okay, don't worry about this. That is stalk with it will not shrink once we add a few more animations here. So select this eastern outline path and we're going toe add a stroke off. So basically, we're goingto decrease this stroke capacity from 1 to 0 in the end time off. 100 milliseconds, so as you can see so it will disappear over time. Okay, So we're going to add now feel color and the front white collar toe this red color. So basically, our heart will get the field color. As you can see, it looks nice. Okay. Okay. So I'm going to add one more scale, X and scale, like, just like this plus icon. And then I'm going toe set the end time toe eight. Ah, 800. And starting to 300 interpolated will be overshot from value 0.5 to value 0.9. So know that the same for scale lie as well from 0.5 to 0.9, and basically it will grow back in tow. Original size. As you can see, it looks nice. Okay, so let's check it out without slow motion. All right? It looks nice. So this will. This is how our animation we look like when we step on our outside heart, it's well, feel up. And the next video we're going toe design One more information. When user wants toe, uh, this light or remove like so let's export. This is animated vectored rubble, and the next we do, we're going to start by emitting Thea other icon 28. #2 Animate Instagram Heart Vector in Shapeshifter - Second Icon: Ah, hello there and welcome back. So in the previous video, we have already designed our first animation. Ah, which is Ah, this outline the heart and that you consumed It is how it looks in a slow motion. And let's play it once more in a normal spill. All right? It looks very nice. I muscle myth and now we're going to create another animation. But this time we're going to start by feel hearted. Ah, icon. So, uh, now we're going to create the new project in the shape shifter, so that's click file and then click new. Okay, just click, OK? Because we have already exported our first animation and now it's import our SVG this time insert feel all right. So it's changed the name for our path toe instagram too, Or are sorry Instagram Field and the name off Our animation file will be, ah instagram to and duration 800 milliseconds. Okay, enough that it's at the new group and let's place this path inside. So select group group and we're going toe changed Initial values of scale, X and scale. Why? To 0.9, the same as we did in the previous video and people points, of course, 23 21 so we can center our director. So next add scale X and scale White, where a group of element on time will be 300 milliseconds and the value to 0.5. Okay, so it's a play to see how it should enemy. OK, it's fine for now. Next, we're going to select our path and we're going toe. Add the Let's see what we had some stroke animation. So we want toe change stroke from red to black. So stroke color said the first value from black or sorry from red. This is a checks called for our caller and to value just black or six zeros all right, and the and time will be 100 milliseconds, and this is a slow motion, So basically it changes the stroke color from rental black. So next tournament to add the feel Alfa and we're going to set to value to zero and time. Of course, 100 milliseconds and this is colored should look like all right, so we need to add one Maura scale accents. Care Why? So just click this plus icon on the right Let's select those two on the timeline start time will be 300 milliseconds on timeto 800 milliseconds. Sorry, Yes, 800 milliseconds and start. I'm 300 milliseconds. Interpreter overshot. And from value to 0.5 from value 0.5 and to value 0.9. Okay, so now let's play our animation. It looks very nice. Eso uh This is how our animation will look like when we want toe dislike or remove our like , Okay. And that will be all for this video. In the next video, we're going to design a layout for our animation and, of course, implement the logic. So remember to save this file and that's it. 29. #2 Design Layout for Heart Animation in Android Studio: Ah, hello there and welcome back. So in the previous two widows which have designed our to animations and, of course, exported those two as animated vectored Roble. So now we're going to copy those two excellent files and the paste them inside our draw about director here. Just based and click. Ok, okay. And now we are going to get some warning its warning that we need toe at the this target FBI attribute. Okay, so just add that on the top element and on the second file as well. Just like this. All right. And then now we can proceed and create our layout for our animations. So basically, we're going to add just one image view. I said, like this first instagram one animation click. OK, we're going to center our cart on the screen and we might want to increase the width and height off our heart a little bit, but not too much. This is just for me, for example, purposes basically, um and this is a vector file so you can increase the waiting height. Ah, much as you want. And you want Loayza image quality because this is a vector and not in Ah, BNG o J pic image. So that's it. The next week, there were going to start by implementing a logic toe play our animation. 30. #2 Implement the Logic for Heart Animation in Android Studio: hello there. And the welcome back. So in the previous video with have designed this simple layout for our instagram heart animation. So let's play this inside our android emulators so we can see how that look. Okay, So basically, you can decrease and increase the size off our imagery because this is a vector file and it won't lose the image quality. So don't worry about that s so basically, we're going to add the on click listener for our image. You So you will see how the logic will work. So first in the side main activity, we're going to create even Rio object. And just below that, we're going to add animated vectored Roble and enemy to director job or compact object as well. And below that, just a simple integer named switch number and its initial value will be zero. So let's first find the find the idea of our image really inside on create method. Okay. And we're going to add the on click listener for our image. You as well. So setting click listener. Okay. And then we would wear the, um if block so if switch number is equal to zero and else if switch number equal to one. So in this first of block, we're going to set the switch number plus plus and in else block, we're going to say switch number minus minus. So basically, this will work something similar, like on and off switch. So whenever this, if block is executed at the value changes and else if block will change back the value zero So in this if block, we're going to start by, Ah, setting our ah ah, or getting our So let's see, human view. So set the image rubble and we're going to get the resource. So get the draw, herbal and just find our used to room one. Okay, Next we're going to create a drop ball object and we're going toe pass our image, you draw a ball. So just he wasn't getting trouble. Okay, And now we're going to add if blocks. So if our trouble is instance off animated vectored Roble, then we're going toe execute some cold. It can see it shows us a warning. So we need to add to this. Ah, require FBI. Ah, annotation. Okay. And here we're going to use our AIVD or animated director Global object we just created earlier. And we're going toe pass our draw a ball here. But of course, we need to add willing to cast our global toe animate directed robot. And we're going to use ah, start method to start animation. Okay. And the in else if Brooke we're going to add Ah, of course, pretty much the same. So if draw above all else if global his instance off Animated vector global comp it So basically, we went toe our animation run on both older and your versions off Android. So that's why we're adding those if blocks and of course, now start this second animated victor drove Ah, compact object. So basically, we need to repeat the this code. Ah, this whole called inside our else switch. Um else if so, uh, we want just copy and paste this code instead, we're going to create a new method address below our own create method, and we're going to cut this code and paste there. So just below that on great method, create new public void and its name or just simple is play animations okay and just pays this code. So here we get the warning. So we need to add the require FBI. Ah, annotation here as well. Okay, just press that and it will automatically at this code. And they were going toe Call this metal inside our if and else if block. Okay, so let's call this one more time here. Okay? So ah, let's around our application on android emulator and let's see Harold Network. So, um, let's start. That's and is considered looks nice, But when we press again, it starts the same animation, which is instagram one. But we need the incident to to play. So in orderto figures that what we're going to do, we're going to add the an argument here inside our play animation method, this argument will be introduced and basically, we want toe Bess Auer draw global instagram resource. So just name this animated Victor Robles I d. And instead this Ah ah Instead, I'm one just based this Ah, in future And here is a parameter in Ah, If block, we're going to pass Instant one. And in else, if block, we're going to pass the instrument to So basically now both of those animations will play. And now let's around application toe check it out. Okay, so click one more and once again. And as you can see, both of those animations are playing. And this an emissions on those animations, so looks very nice. So that would be for this video next video. We're going to start by creating another animation, and this time we're going to create the loading animation so you'll see. 31. #3 Animate Loading Vector in Shapeshifter: Ah, hello there and welcome back. So in this video, we're going to start by creating a loading animation this time. So in the previous video, we have created this beautiful instagram heart animation and the in the in the same file. We're going to create the loading vector so our loading animation will be basically three circles. So let's paint those in the black and it's copy one more. Just hold old and shift and drag that on the right side and once more. Okay, so basically, we have ellipse want ellipse to and ellipse Tree. So just select those three elements by holding shift click Control e and we're going to export those in the SPG form it or K click export. And now open up shapeshifter. This time we went to was a beta version. So because we need to move those elements around, you will see And now it's important those three circles okay, click open. And as you can see, you just see one. But actually there are three circles skill. So you need to select this sir vector and change the width and height off our canvas toe 100 pixels. Okay, so something like that. And now we're going toe. Place those circles on the center. But first, let's change the names of those paths. So this path will be named pat to and the 3rd 1 Towpath three. Okay, so now it's Ah, drag this Beth one here. Ah, horizontally centered in this one on the center. And this one on the right side. Okay, so, uh, the space between those circles will be 10. So, as you can see, when you move this circle, you will see this number. So we, Toby Perfect. Ah, in orderto said those ah values to 10. So if you cannot do that, just use the zoom tool and zoom again. And now move those circles so you can align them perfectly. And there it is Then. So now we're going to create the simple rectangle so it can be a measure o r indicator for our space. Between those two elements, you will see. So now you can zoom in again, and basically our ah, a rectangle will cover with off 10 of course. So let's place that here, and it's increased with just a little bit more. And now zoom out and drag this directing on the right side so we can align the third Ah ah , circle here as well. So dressed. Zoom in and holds based more on the campus and the selectable And just drag this the murder circle here. Okay, so now we have our circles perfectly aligned, and we can start with animations. So the next thing we're going to create the three groups and place each of those ellipse inside that group. So I'm going to speed up this process a little bit, okay? And change the name of those groups if you want to Group one, Group two and Group three. And there it is. So let's change the name of our animation toe loading and aeration toe 1400 milliseconds. So each of our group will have ah, translate wire animations and the two off those animations. So start time for the first group will be zero and an time 500 interpreter accelerate decelerate and the value to minor study. Okay, so let's play that. As you can see, it moves on the top, okay? And we need to add one more. Translate. Why? So just click this plus button you will see, just plus button on the right side, and it will automatically had one more Translate. Why? So we need to find that on the our timeline. Okay, it's here. So like that and the ads starting toe 500 the end timeto 1000 milliseconds. So interpreter will be, Ah, celery decelerate. It will be the same for all of our transit y animations. And this time we're going to set from value minus 30 and to value to zero. So let's play to see how it looks like. As you can see, it goes top and it gets back to its original position. So we're going toe. Add that the same to our second group. Only we're going to change the start and end time. So this time start time will be 200 milliseconds and an times 700 milliseconds. Interpreter accelerate decelerate from value 02 Valium. Minor story. Okay, and now it said one more, translate. Why here? So just click this plus button. It's fine. It's on the canvas on the timeline. Okay, it's here. And just change a start time. Um, so we'll see how? Okay, start time will be 700 time 1200 from value. Minor story to value zero. Okay, so let's play to see how it looks now, Okay. As consider looks nice. So we had one more. Translate. Why? Animation To our group Three or technically, to animations. So we we forgot toe said this interpreter toe accelerate, accelerate. So don't forget to do that. Otherwise, if you have ah, different the interpreters, your animation will not look the same. So in the group three add the translate Why as well. So this time and time will be 1400 start time Will be, um Oh, sorry. No. And time will be 900 starting 400 milliseconds. Interpreter The same from value. Ah, minus 30 to value zero. And that said one more translate. Why? Okay, just find on timeline and ah, this time and time will be 1400 start time 900 Interpreter asserted, accelerate from value minus story value zero. And now it's ah, place. Ah, let's let's play our animation to see, okay, we keep some air on our third circle. So I think our translate why the first translate why is not properly configured, So uh oh, Okay. I see willing to change this from value to zero and the two value to minor study. Okay, I forgot to do that. So now it looked It will look perfect. So let's play our animation once again, okay? Everything else looks fine. Okay? And this is how will our animation loading in a mission will look like? It's very nice. So, uh, in the next week, they were going to implement ah logic for ah, this animation in Android studio. And don't forget toe export this file as animated director Global. 32. #3 Implement the Logic for Loading Animation in Android Studio: Ah, hello there. And the welcome back. So in this video, we're going to implement the logic for our loading animation. So basically, just copy this. Ah, animated vectored robo. We just exported in the previous video and pays that inside our global directory. Okay, here, we just need toe Ah, at the simple, targeted P I code. So we don't have a warning, As you can see that all this cold should be already familiar to you because ah, I have already explained all those elements in the first videos of this course. Okay, so let's close that. And ah, our layout will have just one image view and one button. So for image, you were going to select our maybe the loading file. Okay, just connect all those constraints so we can have our imagery a constraint on the center. And after that, we went to had one button just below that on the bottom. And thats going this left right and bottom constraint. Okay. Bottom person should be 24 and the layout with for our buttons should be expanded to measure the parent. Okay, so our parents already shares up petting 24 dp and now we're going to change the text for our button toe show. Okay, that's nice. And we need to set the visibility for our image. You. So the fault was visibility for our imagery will be gone or invisible. So, uh, here, let's first add the image of you and button objects. And of course, ah Animated director draw herbal. But this time we will not use the enemy to Director Roble comp it because ah, we need to a low power loading any measure and the in order to do that, we can only and that only can be done by using animated vectored Roble on. And it cannot be done with the animated director Global comp it because it is a required you to Kiev. Ah, minimum a pay level 23 You will see. So let's Ah, first at this visibility to our image really gone. Okay. And here on our button one click. Listen, we're going toe set our image. You are visibility too visible. Okay. And next year we're going to create the draw herbal object and ah store our image of global inside it. Okay, so this s o. This code is already familiar, but There will be some changes you will see. So if hearing it blocks, say if job is instance off Enemy Director Global. Sorry, Not the robot, competent. Just the enemy to director trouble. Okay, then we're going toe. Basically, Um, he was our AIVD object and stored robe inside that Okay, And of course, cast this adorable toe intimate directed Roble. Ah, we also need to add Ah, I require FBI annotation because this code requires a pair level 21. Okay, lollipops here and now it's ah, it's run application to see how that look. But, you know, our loading animation will not group. It will just play once more only the first time is conceived and we need to click again so it can play back again and that's not good. So we're going to fix that by adding ah, call back. So let's see, was this adorable object and it was a register animation called back. And here we're going toe pass enemy edible, too new inimitable tool. And basically we toe override method. So this time we're going toe all right. This own animation and mattered just like Okay. And, uh, you can see we have a warning here, and basically we This court requires a minimum FBI level 23. So we need to train. This requires FBI from lollipop toe am because this is a 23 a p i. And now that warning she has disappeared. So, um, now here inside our own animation and all right and method, we just need to It was start method to start our animation director robo once again. So it will basically play in a loop. So you will see Now we're going to run our application in. I enjoyed emulator. Okay. As you can see, it is playing in the loop and it looks very nice. It is a smooth any measure. So you can also decrease the size of this animation toe. For example, 60 dp will say now. Okay, 60 Dippin within height. And although the animation should be smaller because that weight will look even better, So as you can see, it looks very nice and smooth. So that would be it for this animation And the next video we're going to create the new one 33. #4 Design & Animate Dropdown Arrows in Shapeshifter: Ah, Helder and the welcome back. So in this video, we're going to start by designing n animating. Ah, our drop down arrow vector. So here in Adobe's they were going to is a pento and just the drag This here, this whole shift to dragging the perfect angle and the drugs and rig up there. Okay, so now we have our herro vector so we can change the color. Of course. We went through the fourth quarter color for ah, it will be black. And with off our stroke will be three so called the shift and old and the drag this on the right side so we can duplicate our drop down. I ah, arrow. And they were going toe district this so we can have our drop down arrow pointing up and the the other pointing down. All right, so we can announce like those two by holding shift click Control e and we're going to export those vectors when our PC So the next thing we're going to open up a shapeshifter and we're going toe import those two arrows, so just opened that. Okay. And now, um, as you can see, when you select one of them. You will see this blue line indicator, so Ah, first they're working to change the name off those two paths. This one will be everyone in the second to so we want to copy the test data off our aero to which is pointing up. So just copy this path data, and we can remove this arrow now. So now let's select this one. And let's apply a path data animation to it. So in this to value input field, just based on the path that they were just copied. All right, so now we can increase end timeto 300. Okay. All right, so now it's start. Let's play our animation. As you can see, this is an actually morphing intonation. So it's it morphs from one vector toe the other. Okay, it looks very nice. All right. So you can also change the interpreter here as well. All right. You can increase duration for this animation if you want, and now we will export. This animation is animated vectored Roble. So let's first change the name Toe era one, alright. And just the export. This is animated evicted rubble. Okay, So for our project, we're going to need the two ah, animation. So we all right? We already created one. So now we're going to create a new project, and, ah, we're going to repeat the step by importing those two arrows again. But this time we're going to copy Ah, the past data off the first area, which is pointing down. And they were going to use its A path later inside our second arrow. So just the select this era one which is pointing down. Not this but era one. Okay. And now copy this Beth Data and let's remove this Erawan. Ah, okay. Just like the late and the damn. Here we went. He was a past data morphing animation and we're going toe paste our path later inside to value input field. Okay, we can also change the interplay later and the end time as well. And of course, our animation name. So it started this animation to see how that loss it's basically morphing from one vector toe, the other all right, It looks very nice. So we're going to export this again, and we're going to have our to expel files already for our enjoyed the application, So ah, in our android application. I'm going to add a few more elements. Eso this drop down arrow will have some context. You'll see, and that's it. In the next year, we're going to design layout and start implementing the logic. 34. #4 Design Layout for Dropdown Arrows in Android Studio: Ah, hello there. And welcome back. So in the previous video, we have exported those to drop down arrows, animations from shapeshifter. And now we're going to copy them and paste them inside our global directory. Okay. Just like okay. And okay, so here, we're going to get the warning. Already familiar. So basically, it requires an A P I level 21. So we're just going toe. And he was this tools. Ah, target a p I. Okay, so we can close that now. And the so for our layout, we're going through the image, you and text to you. So you will see for the imagery was like this first arrow which is pointing down and let's connect constraints. So the first stop constraints will be connected to a parent and right toe apparent here as well. So, 1st 1 up top concern should be around 1 50 just just for an example. Okay. And now going to read the text view. So the text view talk constraints should be connected to a bottom constraint off our arrow and left constrained to apparent. So Ah, this is constraint layout, and it is already added the petting. So we have a 24 petting on our constraint layout and that this text you top constraints will be around the 10. So something like that, and ah, let's ah, change the text the size here. So let's set to 16 SP and we're going to change the text as well. So I'm just going toe copy this alarm ipsum random text from this website. Okay. And instead of basing this inside our main activity out, I'm going toe pace that inside the string sex male. So I'm going to create a new string here, and I'm just going to name this lower him and paste this text here. Okay? It looks better. And now it's get back to our main activity layout, and here I am just going toe call this Lauren string. Okay. All right. So, uh, basically, this is how our layout will look like We just need to add one more thing and we need toe set visibility for our text field toe, invisible or gone. And then the next video, we're going to implement a logic for our toe Drop down arrows, animations 35. #4 Implement the Logic for Dropdown Arrows in Android Studio: Hello there and welcome back. So now we're going to continue from the previous video where we have designed the layout for our drop down a row Center nations. So as you can see our text for you, here's a visibility set gone. So let's proceed to our main activity. And let's add the image view and the text. You are elements here. Okay? And let's create the animated vectored Roble on the animated vectored Roble compact objects and the here I'm going to create the new new object for animation. So basically, in this innovation, we're going to have a fading and fadeout effects. So you will see. And of course, below that does the switch number simple integer which will hold a value of zero. So in our own create method, let's find unity of those two elements and we're going to add the on click listener for our image. Really? All right, set up Click Listener and the inside our own click Listener. We went with the If and L C block. So basically, if our switch number is zero and the first, which number is one, so in the first case, we're going to increase the number to one, and in the second book, we're going to decrease the number one as well. So basically it will act as on and off switch. Thescore is already familiar from previous every does. If you watched so there is nothing new here. Let's create a new method. Just below that, we're going to name that play animation and let's best one parameter, which is ah, integer. It will act as a resource I d for our animations. So it's yours image view and its method set image durable. In here, we're going to get resource and get Roble and hearing Topaz this resource idea from the parameter. Next, let's create the draw herbal object and let's best the image you draw rubble So next inside . If look, we're going to say if Drogba is instance off animate directed Roble and if a global Eastern , so for animated director trouble competence. So eso this code is, ah, familiar to you as well. We already road discord in the previous videos, so it's ah, it was admitted that the global object and let's see at this require a P I annotation here as well. And let's start, of course, in L C block. We're going to repeat the this step just instead. Often imitated Roble. We're going to use a competition here. Okay, so now that that is done, we're going to call this plan immersion method inside the this if and the l C Block. But the first book, we're going to pass our first animation, which is Erawan. And in the second a block, we're going to pass our ever toe. So this requires to have, ah, this require FBI annotation here as well. And just below just above that, we're goingto not image you but the text view. So we want to set our text you visibility toe visible before we play this animation on the arrow. So let's use ah, set the visibility method and sell it so visible and the NLC block We're going to set this visibility toe invisible or gone. So let's copy that and based here. Okay, Just trained, visible, gone and it's okay now. So before we continue adding fading and fadeout animations So let's start the application to see if everything works fine. So click that as you can see, our aero is more finger properly and the text video is showing and hiding as we wanted. So the next thing we're going to create this animal resource directory. So if you don't have this animal here on the right and show you how to create it, just click correctly calling the Resource Directory. Inside this android resource directory, Click this anime and click OK, so inside it's and they're actually we're going to create animation file. So it's name that the Fed in and there's consider Root element is set, and inside this we're going to hear a translate and Alfa Elements. So first, this animation will basically fit in our text you and the move with just a little bit. So we're going to set the front. Why Delta Minus stan Percent two y delta 0% And the rations can be 500 milliseconds. Or you can use the 300 milliseconds, which is the same duration for your drop down arrows animations. So you can I encourage you toe to play with those values by yourself. So next tournament with Alfa from 0 to 1 and with the duration of 500 milliseconds, which is the same as our translator from a ball. Okay, so now Let's get back to our main activity. And here we have already created the fading and fade out animation objects. So we're going to create two methods for each of those so below play animation, we're going to create the new method named the Fading. And here we're going to load our animation in 12 our animation object. So animation you tills not low the nation and just the best Security is first parameter as , and there's a second parameter just passed this file are fading the animation. So let's set this animation or text for you, all right, and we can call this fading on the nation inside our if book and here, just below this play animation method. So it's at the comments here. Okay, so before we add a fade out international, let's check it out to see if everything works fine. So played a seaman view, and as you can see, our text is slowly fading in and moving from the top. So it's exactly as we wanted. So it's great. Another resource file inside our and in folder, and we can copy this code translate and Alfa, but we're going toe modify change a few Well, so from why Delta this time will be zero and two y Delta will be minus 10%. And for Alfa from Alpha will be one, and the two alpha will be zero. So basically, we're fading out our text you this time. So it's a great the new method for fadeout animation. And we're going to repeat basically everything we did inside our faith in method above So just the load our animation side, our fade out the animation. Okay, main activity. And the 2nd 1 is our fate out the animation and just set on animation on our text. You okay? And now we're going to call this spit out animation inside our own click listener. Okay, just below this play animation methods you so we can have a comment here, just toe. Ah, to see that. Okay. And let's run application to see how it will work. Okay, fades in and fades out. So it looks very nice and smooth, and basically, that will be all 36. #5 Animate Thumbs Up/Down Vector in Shapeshifter: Hello there and welcome back. So in this video, we're going to start by animating Time's up and turns down icons. So I have already prepared those svg is here in adobe Thursday and now we're going to export those three files as SPD. So that's like that and click export. Okay. And then now let's open up a shapeshifter. So we went there was this Ah, regular version and just important, this empty vector. Okay, A So we can see here, our dimensions are 38 by 36. So let's calculate the people points. So by dividing those two numbers by two, okay. And here we can increase the canvas size in width and height as well, so we can see our vector file hear more clearly. And now, as you can see, it didn't import as well. So we need to change, like, ever added the stroke color and remove the field color. So let's change the animation name here as well. So it's called this empty and, uh okay, So basically, we're going to create a three different animations this time. And let's add the field color and no, sorry, no feel out there. But stroke color. Okay, so what we're gonna do, we want toe. We want to animate from this empty state to our green thumbs up. So we need to change a stroke color and feel color. Okay, so just at this, for example, white color. OK? And as you can see, it will slowly turning toe green collar in a duration off 300 milliseconds. So at that as well, let's signees in slow motion and it looks very nice. So this will be our first animation. And let's just export. This is animated Director Roble, okay? And the next we can remove those properties from a timeline and we can set our stroke color toe green and feel color toe green as well, so we don't need to import. Then any more refugees, we can work for the second animation like this. So let's said the hero scale. Why? So basically we want to scale from very one to minus one. So let's see, how would that work? Okay, so it will basically turn from Time's up, time's down and we need to add the field color on our path element. So end up off course stroke are so let's at the start time toe 100 for those two. And let's copy this. Ah, red car. And let's basis the red color here in the value input field. Okay, so this animation will, uh, change color from red to green, and it will turn a scale. Why? As you can see, it looks very nice. So let's export this second. The animation is ah is animated Director Drogba's well, and, uh okay. And the third animation will be basically from this thumbs down toe original empty state. So you will see it. Let's just change this initial color stroke, colorant feel color to red. And of course, we need to set the scale. Why? Okay, So before we add the scale, why here? We need to set the initial scale. Why? For our group to minus one. Okay. And now we will apply a scale. Why? Animation of the timeline from okay for value minus 1 to 1 and of course, starting to zero. So let's take a network. It will go back toe times up, and we need to add the stroke color and feel car tow black so it will change the state toe its original vector. So it's Ah. Okay. We can have the field color instead. Off. Um, I feel off instead of feel quality, but that's totally okay. And start timeto 100. Of course. So let's see how that works. All right? It looks nice. So let's export this last one. And the next video, we're going to start by importing those three animations inside our android application. 37. #5 Implement the Logic for Thumbs Up/Down Animation in Android Studio: Ah, hello there and welcome back. So in the previous video, we have created those three animations and now we're going toe copy them and import inside our android studio project. So just copy and paste them inside our job or directory here, as we did in the previous videos. And of course, we need to remove this warning by adding this tools a p I cold here in each off those three xml files. So just at that okay, and next we're going toe. Add the simple image real here inside our activity, mainly out. So let's connect those constraints here, and our image views should be located in the center and also even increase the width and height so we can see this animation more easily. So let's change the width and height to 150 dp okay, and we can get back toe main activity and start by implementing the logic. So let's import this image view object and, of course, animated vector job and the animated right. Honorable, competent and the simple integer switch number with initial value of zero. So in on create method, we're going toe, of course, find the idea of those items and the add on click listener. So we want to create this time we're going to great three blocks. So if switch number zero if switch number one and if switch number equals to to So in the first block, we're going to increase our switch number by one. So plus plus, in the second block the same any the 1st 1 we're going to set the Inter +20 which is initial value. All right, so the next thing we're going to create the new method so down below our own creek metal, let's create a public void. This will be named just a play animation and here we're going to pass. A simple integer is a resource idea for our animation files. And let's use the image you method set image resource s So let's get resource and get the drop ball. And here we're going to pass the resource idea. Sorry, we have Ah, I mistyped. Ah, this method I think so. Instead, setting and resource we need to use a different method. Set emitted draw bar instead. Okay, so let's create a Drobot object here and let's store our image. Draw ball inside this the draw Herbal object. So let's great if block So if global is instance off animated director Global and ah, this court is already familiar for you. We already done this in the previous videos. So, uh and let's call this a play animation inside those switch blocks or Sarif box and the best in the 1st 1 passed this aivd empty. And of course, at the require a p I on the second past this every day like and in the 3rd 1 every day this like Okay, so we can run our application for ticket out. OK, now click as conceit turns green and now it will turn red and ah, it will rotate, okay? And it works like a charm, so that would be all for this video.