Android Custom View Tutorial - Shapes, Images and Custom Attributes - part 2

hi and welcome to part 2 of Android custom video tutorial if you haven't seen the part 1 then make sure you watch it otherwise you won't understand anything so let's continue where we left off on part 1 we have a square object draw on the canvas and in this tutorial we will create a new resource file of for custom attributes so let's create it under the values folder create new resource file let's call it at the Teresa from attributes okay and we need to use the declare style level we need to add a name it's called custom view and we need to define the attribute name so we will use a color and size lower square so that would be square color with format of color okay then attribute with square size format dimension okay as you can see you can define multiple values under this in all colored measure and balance in am Flags float fractions etiquette so for the size we will use imagine okay I'm sorry so the next step is to pause and obtain those values from the from the attribute set so we can have a malleable attribute that's all we need to make sure that our attribute set isn't now otherwise you might get a null pointer exception so we don't want to crash our app and second step is to opting a type array by calling get context obtain attribute set and we need to pass the attribute set and the name of the style label style okay from Causton do make sure you call the recycle on the type array so we don't mess up with the garbage collector and also the recycle must be called after obtaining the values from the attribute set so to obtain the color value from our custom attribute we need to create a new primitive integer and call type array of get int or get all of surrogate color and we need to pass the name of the attribute and the default value so that will be our star level custom view square color and the default value of green okay let's create this as a member of the class so that would be private int and square color because we need to get the color from outside of this init method we need to add this square color here in the slot color method so that would be replace the green and the green in the sub color method okay so and next step is to obtain the size of the square square sighs okay tibe do I get the measure pixel size our spy level custom view square size and the default value let's refactor this constant electrical it's crushed ice depth and pass it as the second parameter for the get DiMaggio pixel size method and let you place the square size constant value in the unrelated okay I think that's it let's go to our layout file okay let's build the project okay now let's use the custom attributes from our attribute file so we have a square color and we have a square sighs okay let's define some colors in the color free source file let's name it color name square color you can see I'm using here camel case now let's copy the hex value from here okay and let's define some diversion as well so demon name name equals with square size and let's say 100 TP oh there's a typo okay now go back to the layout class and let's write those values so that will be color square color and d-man square size and it's not working it's not working because we don't set the color value for our paint objects remove this line and let's call it after obtaining the square color so that will be M square color let's see if those changes we applied it yep that work also we don't need to define dimension in the dimension resources or colors as well we can pass values directly into the layout so let's say 200 GB or 150 DB or 1 DB anyway let's use the defined square size okay so this is how we can pass custom attributes directly into our custom view now let's go forward to our next stage and let's create a circle on the canvas but first of all let me explain to you how we can do that the yellowish layer is our canvas in the left is our square and we want to draw a circle on the right onto canvas and to do that we need to specify the position of the circle the radius and a paint so the position of the circle consists of two values a center X and the center Y value on the radius will be the size of the circle to draw a circle on the canvas we need to call the draw circle method which takes Center is a center why the radius and an on note paint object okay so first of all let's calculate the circles position so that would be float Center X Center Y and we also need the radius and let's say 100 float we want to place the circle in the right of the canvas so that would be centered X get with the get width will return an integer value the total width of the cost and view actually the size of the canvas - radius and we also want to add an extra right padding so our circle won't be right in the edge of the screen so minus 50 float okay and the center Y let's place the circle on the same line as the squared center is so that would be my X square top plus MX square height divided by two okay and we need to define and create a new instance of our paint object so let's declare it as a member of the class and paint and create a new instance of this class in the init method and paint and we also want to enable anti-aliasing so scent and aliasing - true and let's define a color for our square let me pick the color picker so this is the hex value of dollar circle and to parse this x value or to convert it into an integer value we can call the color parce color utility method which takes a string a color string okay so let's see if we can see the circle in the layout again we need to build the project yay so our circle is in the right of the canvas so if I change the height of the circular squares the circles Y value is relative to the center of the square let's see 450 dB oops sorry we need to change the square size so the current size is 100 DB let's add more 20 DB okay and another 10 and another for another 10 6 so as you can see the circles Center is relative to the circles Center great ok now let's have some fun with our circle let's add a drag and drop functionality so if I press the circle I can drag it and drop it anywhere on the canvas so let's go back to our custom year and let's move this we don't need it anymore and we need to detect touches on the canvas so we need to override the on touch event and the very first step is to save this ball value and return it because we want to detect only two types of motion event two actions the first one is motion event that action down and which returns true and the second one is motion event that action move which also returns true so we need to we need to detect and catch the action down action otherwise the action move won't be called okay now we need to set some values for our circle position and let's change this into global values and circle X and M Circle Y and let's make the radius also global so M circle radius so let's declare them in the top of the class private float M circle X and M so called Y and private float and circle radius which equals with 100 float okay hmm we need some default values so if our and circle x equals with zero float or M circle y equals with zero float then let's position the circle in the center of the cameras so M circle x equals with the width of the canvas divided by 2 and M circle y equals it gets height of the canvas / - okay so this is how we position a circle to the sex the cameras we have defined the radius and now let's detect Dom the touch event on the circle we have an X and the y value from the event object which is the position of the touch the x and y and to detect if this touch is inside our circle we need to calculate a delta x value which equals its net power x minus [Music] the center of the circle to the power of 2 and a doubt the Y value which equals with net power Y minus M so called y to the power of 2 so if our Delta X plus Delta Y is less than net power arm to the circle radius raised to the power of 2 then this is a touch event so our circle was touched so in this case let's remove this actually let's move it and return the default value so return true because our circle was touched and we need to set the touch position to the circle's position 4m circle x equals with X and M circle y equals it Y and because we have made changes in our custom you we need to call the post invalidate okay let's see if our circle is in the center of the canvas yep is right there now let's run the app okay now check it out yeah is working the flat color works yep this one too great let's continue having fun ah let's add another functionality our to our square so if I'm pressing the square let's increase the circ the radius of the circle so we will need the touch position and we need to check if this point is within our square bounds so M Square + X square sorry left is less than the X and M rect square right is greater than X okay on the x axis and on the y axis MX square top is less than Y and M rect square bottom is greater than Y okay and now we need to add M circle radius let's add another stand value for our square radius and again we need to call both in validate so let's see if those changes were applied let's run the ad okay so here is our circle and if I press the square the size of the circle also increases black color also working great well we could add a collision detection but not in this tutorial okay so that was it alright guys this is the ending of party after with Android custom view you can download the whole project from my blog or you can find the link in the description if you're having trouble or you have any questions or please write comments and also if you enjoyed the video make sure you like and subscribe thanks for watching [Music]

Channel: Coderz Geek

Views: 43,629

Rating: 4.9352751 out of 5

Keywords: android, custom view, tutorial, circle, drag and drop, canvas

Id: cfwO0Yui43g

Length: 20min 38sec (1238 seconds)

Published: Sun Jan 22 2017