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

hi and welcome today i will discuss about android custom view in this tutorial i will create a custom beer with different shapes like rectangles squares circles images and custom attributes so let's begin as you can see i have a complete new android project and the very first step is to create a new package and let's call it views okay so within this package you can define your own custom views but in this tutorial we will create only one and let's do it by creating a new Java class and let's call it custom you okay so this class will extend view but if you wish you can also extend text view or image view for any other type of functionality but in this tutorial we will extend the raw Android view so we need to include the four constructors and we also will define a init method this will be our initialization method which takes a nullable attribute set so this method must be called from all the constructors as you can see i am passing your attribute set and here now because we don't have it so why is this necessary well it's necessary because if we are creating a new instance of this class let's say from our main activity custom view custom view equals with new custom view which takes a context then the very first constructor will be called which also calls the init method but if our custom view is included into a layout file and at layout inflation the other constructors will be called which also calls the init method so for code optimization we don't need appliquéd codes so that's the point okay and now let's include the custom view into our layout file it's very simple custom view okay we need to specify the width and the height that's a match parent with 150 DP okay so every time when we are making changes into our custom view we need to rebuild the whole project okay so here is our custom view we can see the bounds but currently our custom views transparent so let's change the background color this step is very important because we are overriding the ondraw method which gives us a canvas so the canvas is the thing where we will make all the drawings for all shapes to change the background color for our canvas we need to call the draw color which takes an integer value but we have already have some defined color values in the color class okay and let's say red so this red value is an integer [Music] value okay so let's see if those changes were applied again we need to rebuild the project because we have we have made modifications in our custom view okay here it is if we change the height of the view hot save 350 DP then we can see that our canvas size also changed okay let's remove the debug line and let's create a shape on the cache so to draw a shape on the canvas we need to call the draw rect method from the canvas class which takes a rectangle and the paint object so first let's create the rect object new rect rect object will be used to the set up position and the size for our square meanwhile the paint object will be used to describe the color and styling for our square so we need to define four values the first two values to define is the top left and the ending value will be the bottom right for our square so to do that we need to write those values a rect left equal sweet let's say 10 ragtop equals with 10 correct right equals sweet rect left plus 10 and rect bottom equals retract top plus 10 okay so these are pixel positions this one will represent the position and the size and let's create the paint object and let's define a color for our square with to our ease we need to call the set color method and we need to pass the color let's say let's use red green okay that will be wrecked and paint so let's see if those changes we are applied again we need to rebuild the project so here is our square it's tiny and it's barely visible right there so let me explain to you what we have just made on the canvas okay so let's imagine the yellowish layer it's our canvas here the red X represents top left of our canvas on the X and the y-axis which is zero zero and what we have done on the canvas we defined it the top left and the bottom right points the top left value is 10 pixel position on the x-axis and 10 position on the y-axis so this is our first point and the second point equals with top left so that will be left plus 10 pixels on the x-axis and another 10 pixels on the y-axis so here is our second point and Android automatically computes the other positions so that will be the top right and the bottom left values so let's change the size of the square because it's currently is a tiny Square and it's barely visible so let's convert these values into a constant value and let's call it square size with square size of there's typo square okay and all the constants in Android and actually in Java we defined in the top of the class so private static final int square size let's say 100 pixels okay so let's see if those changes were applied again we build the project okay so here is our square okay so this is wrong it's wrong because we are creating new objects in the ondraw method Android studio also answers that we should avoid object allocations during draw layout operations so what does that mean well at layout inflation or layout size change or screen orientation let's say from portrait to landscape or the view must be redrawn then the ondraw method can be called several times so while the cycle runs and if we are creating new objects then we might cause lag Girish effect or in the worst case we might block or face the whole UI so we don't want that to happen so let's remove the object allocation from the ondraw method and let's declare them as members of the class private rect and rect Square and private paint and paint square so let's create the objects in the init method new direct and I'll paint equals with new paint okay let's remove the object allocation and let's change the old objects with the new ones okay if you're having trouble with the position or the size of your square you might want to use the rect F class instead of rect so direct F class can hold decimal values float values instead of integer values okay and the second thing is that we want to enable anti-aliasing on this on the paint object and to do that we need to pass a flag to the paint's constructor so what does these flags makes well let me explain to you here we can see the difference between analyzed and the lane Tierra is technique so look at the difference between the left and right font and here between the lines and circles as you can see the left one is much more pixelated so the right font and shapes are much more user-friendly than the left one so you make sure you pass the anti-choice flag into your paint object okay so let's check if this app works so if you have an emulator or Android device boot it up and run the application okay so the app works on a genymotion emulator now let's add some functionality and some changes for our square let's change the top-left value the starting point of the square let's change the size of the square and let's add a button to the layout and if we are pressing that button let's change the square scholar actually let's add a swept method so if we are pressing the button and the square size is green then it should be red but if it's red and it should be green okay to do that first of all let's change the squares position in size so the top left value should be 50 with 50 and the square size let's say 200 okay and remove the set color from the ondraw method and move it in the init method okay now let's add the button okay create an ID for the coastal view let's say a custom view okay and add a button to the layout with rap content web content a text swap color I don't know okay and an ID for our button let's say ID button swap color okay and we need to move the button below the customer and if when we are using relative layout cell that should be be loud below custom view okay let's build a project okay the square size and position position has changed now let's add some reference to the button and for the custom view remove the new missile ization of the custom view and let's declare a new member of the class custom view and custom view okay and this custom view must be referenced by fine view by ID and the ID of the class which is custom view right here okay now let's add a onclicklistener for the button so fine view by ID our ID between a swap set on click listener a new interface new view that on click listener we need to override the on click method ok let's create a new method in the custom view let's call it swap color ok which will change the color of the square so how we can do that we need to change the paint of the paint squares object color so to do that set color we need to call the set color and if our paint square get color equals with color green then the call new color should be red otherwise it should be green ok so this method must be called from the onclick so on custom view swap color ok hit run and let's see if this was applied okay so here result layout with the square and the button and if I press this button the square color should change well I'm pressing the button but it's not working so why is this it's because the ondraw method doesn't get called and why is this well the ondraw method can be called several times during layout inflation or any other modifications in the class but here we are just setting the color for our paint object so we cannot call the ondraw method like this I don't know to create a bitmap kesha or create a new canvas instead of this we have two possibilities we have the invalidate method and we have the post invalidate method so the difference between those methods is that invalidate runs synchronously and that means if after calling the invalidate method right after that the ondraw method gets called but if we are calling the post invalidate method we are notifying the custom view that it should redraw itself when it can so this one might block the why if you're having a very complex UI this one won't block your UI so the recommended way is to call the post invalidate instead of invalidate okay now let's run the app and let's see if this works okay so here's layout let's check it out yep it's working all right guys this is the ending of part 1 of series Android custom view you can now run the whole project you can find links in the description if you encountered problems in your code please let me know write in comment this is my very first uploads to youtube so if you have some suggestions or new ideas please let me know that as well by leaving a comment thanks for watching [Music]

Channel: Coderz Geek

Views: 113,165

Rating: 4.92518 out of 5

Keywords: android, custom views, rectangle, image, attributes, programming, tutorial

Id: sb9OEl4k9Dk

Length: 18min 10sec (1090 seconds)

Published: Sun Jan 22 2017