welcome everybody thank you for coming to this session right after lunch I know how difficult that is so I really appreciate that you’re here with me this afternoon my name is Lori Leland I’m a senior consultant and I’ve been in the industry for almost 20 years now a good portion of that has been on the dotnet framework so I’ve been working with C sharp and dotnet for most of my career the last few years I’ve been digging into mobile app development and I absolutely love it I’m Anna’s Amran MVP I’m also a Microsoft MVP in Windows platform development and I’m part of a group called the Western dance for a group of developers what we write blog posts we record podcasts and we speak at events that that are like this well not as cool as this you know this is the biggest conference I’ve spoken at so I’m really excited to be here today you can check out what we do at Western devs comm you can also look at my personal blog on solola dot CA and follow me on Twitter all right so let’s get down to the meat of it now when we start developing mobile apps you know we sit down and we get really excited and we have this anticipation we’re going to develop the next great app and this is the type of response we hope to elicit from our users right we’re sitting there we’re thinking they’re gonna love it well what makes a great app well when we’re sitting down to code that piece of functionality we think the user is gonna need it’s not just about that it’s also about good app design and we don’t just work with the controls that we have at our disposal on the platform that we’re working in because and that would leave like leave us with a very boring app well let me go back sorry there we go that would leave us with a very boring app so oftentimes we find ourselves in situations where we have to override the functionality of the basic controls at our disposal they have to extend the functionality customize the appearance this is something that’s not new to us especially in net developers we’ve done it quite often and we want to start creating our own library of custom components so we’re not just thinking about extending the controls but we’re also thinking how do we encapsulate that behavior so that we can reuse these controls and future apps and really our app development and that’s a really big benefit of doing that and starting starting to think in those terms so in dotnet we all know how to extend controls but now we’re working in different platforms well we’re still on c-sharp but there’s a different component and an Android there are some nuances that you have to understand in order to successfully design and extend the views that are in Android that was a look on my face when I first had to dive into it so I’m hoping this session helps you alleviate a lot of that confusion and you can just get right to it and start banging out your custom views so an Android once my clicker starts working there we go it all begins with a view I’ll come back to the front so now it’s working I don’t have to use my mouse every visual element that you look at when you’re on an Android phone and you’re running an application extends from the view class in some way shape or form it’s either directly or indirectly so there are a handful of controls that you’re used to using textview progress bar there’s also something called the view group these are direct subclasses of view and the in turn they also other controls subclass those those views so a be a good view group is a container layout like it’s a base class for all the container layouts that you’re used to using linear layout relative layout recycler view and so in turn you can also extend functionality either by extending view directly or one of the sub classes that are available I believe Android has over a hundred different views that you can use you’re gonna want to choose the one that gets you most of the way there and then you just add in your customizations and then you’re you’re good as gold so the first thing you wanted you’re going to want to do is create at your own class probably in a custom library I recommend but you can create it in the project as well it all depends that’s up to you and at a bare minimum you must include a constructor that takes a context and an I attribute set now the context gives you information about the current state of the application environment it also gives you access to application level resources and application level operations such as starting activities broadcasting intense receiving intense the attribute said it’s a collection of values that you’ll receive which are which will define how your views appears in the layout went in your XML layout we’ll get to that in a little bit this is not my clicker so I’m not used to it okay so you’ve created your class you have the constructor great the next step is to figure out what customizations you want to expose in order to be able to use it from the

layout and this is pretty simple you just expose a set of properties that are getters and setters readwrite properties make it available and you can customize your view and code from your XML active or from your Android activity when you’re inflating your XML you don’t like this clicker okay they’re so great you’ve affected that you’ve affected change on the appearance based on properties which is awesome but not really so you just set properties but you haven’t done anything with them and so this is where your method overrides on your views come in you can override a series of methods in order to apply those changes to the view as well as affect the appearance or functionality in other ways so generally the most popular override is the ondraw method as well and so that gives you a canvas object which you can affect change on the appearance when it’s being inflated in the layout there’s also on measure which is a popular override where you can customize the width and the height of the view in the layout and even have interaction events like the on touch event which you can wire out so that you can have custom behavior if the user touches your view so once you’ve just figured out how you want to customize it and you’ve included the functionality so that the view is responding to those customizations you now want to add your brand-new commune whatever layout of application that you’re developing so it’s pretty simple you just add in your XML element just as you would any other view you have to reference the the view by the package name and the class name and at a minimum you have to specify a width and a height even if you’re gonna change it and the odd measure method if you want to override those values that’s great but you still have to add the layout width and height as a minimum in your layout or when you try to run and compile or compile and run you’re gonna get an exception so let’s take a quick look at a simple example on how we have done that or how I have done that switch over sorry about that I think I just lost video sorry okay we’re in trouble I lost the video one moment at each one switch it up yay great the first clap of the day and it wasn’t even from me and this is my talk I do not think that’s appropriate all right so first I want to direct your attention to the fact that I have my custom portable class library and it contains a single class my balloon view I’m going to create a custom control that looks like a little conversation balloon and I’m gonna use it in whatever application I see fit but I think it’ll be a neat little control to develop and so I’m gonna define a series of emojis that I want it to render based on token words and in the phrase and a list of phrases I’m gonna have it iterate through when I touch it so here I have my constructor that accepts my content at context in an attribute sense and I’m just initializing a paint object and the reason that I’m doing that is because I’m going to effect change on the canvas by drawing objects on it but the canvas requires you to also specify how those objects are going to be drawn and so in with using a paint object you define style color font various things like that you can pass it in to any of the methods that you’re using when you’re drawing on the canvas so at a minimum you have to initialize a paint object now I have my custom properties I’m gonna allow the user or the layout or the activity to set text text size I did want to see if I want to determine if I want to show emojis or not so I’ll have that turned on or off depending on the user preference and then I have accent color and balloon color so I’m really gonna customize the look and feel I’m gonna eventually create a settings page that the user can set these values on and it’s just additional properties like that so here we are in the override methods I have the override to the ondraw because I am going to draw the balloon when the views inflated and then every time the color has changed in the settings and we come back I want it to apply that color so in the ondraw method I set my paint color based on the color that’s selected and then I do some calculations on

sizing and actually drawing the shape and on the canvas object I I draw that object and I add in the text I’m just extending a basic view so I need to do these things so that’s great in the on measure method I just decided to do a simple override I’m just going to affect the width the change on the width of the balloon I don’t want it to always take up the maximum width of the page because that’s gonna look kind of silly if the phrase is really short so the only thing I’m gonna do is make sure that the balloon size is down just enough to show the text that it needs to and that’s it that’s all I’m doing notice that the last line that I’m calling is set measured dimension on measure does not return a value so the only way you can communicate the results of your custom width and height is by calling the set measured dimension method and passing that in at the end of your own measure override if you fail to include this call you will receive a runtime exception last but not least I decided to override the ontouchevent so now when the user touches the balloon it’s gonna load up a num or it’s gonna change the color and I’m also going to load up a different phrase it’s just it’s just a random phrase for now so a based on that set series of phrases I showed you earlier so let’s give this a quick run and see how it looks are there any questions while it’s loading and deploying to my phone cuz it’ll probably take a minute how many people here have already extended use an Android using examine oh so this material is not new to you that’s awesome how many of you have done this in dotnet but not in Android specifically Oh awesome great ok so now my application is loading up Oh runtime exception because it just feels like it I’ll rebuild and then I’ll deploy again and we’ll be getting this has happened before sometimes if it’s – if it’s giving you an exception for no reason clean solution rebuild and you’re good especially if you know it’s worked in the past when you’ve made no changes which trust me this has worked I’ve done this like ten times over since I’ve been here so now it’s building and we’ll get it to deploy I’m going to use my Jedi Mind Tricks go faster sweet application of mine so anyone have any questions at this time yes Sean pardon I don’t know it’s just I’ve had it there for a while I don’t I might have docked it intentionally I don’t remember my memories not that great but I have that’s read it yeah I don’t remember I think I docked it intentionally before and but it’s been a while I’ve kind of left the configure late configuration alone so I haven’t haven’t touched it in a while I’ll give this a run it’s deploying it’s super slow today just because we’re on camera for everyone out there it just loves to do this yes howyou intestines what um you could write a UI test so if you’ve worked with Sam and test clown you can write your UI tests determine if the elements appeared on the screen and then write your interaction events okay so here we go it’s deployed and there’s my monkey app so this is my little pet monkey and he’s gonna give me a new phrase every time I touch the balloon cloud so there we go switched up the phrase if I hold up long enough oh you won’t see it but you can kind of see it if I hold it long enough you can try and see the accent color so it kind of changes color to give a little bit of that something’s happening what I’m doing when I’m touching it yeah so we go through the different phrases and that’s awesome so now I can use this if I’m developing children’s apps and I want to create a storybook if I’m just developing a chat app this is a reusable control but I have created in a matter of like 15 minutes and now it can have

many uses so let’s take a look at the activity that I’m using it in as you can see in the oncreate method i’m just initializing the balloon view and setting the properties in the code-behind not ideal but you know it works and within my layout you can see that I have my custom view defined with them there so as developers we often cringe when we see a lot of code behind we don’t like that it’s not ideal we prefer a cleaner way of doing things we prefer to set those properties right within the XML layout so you can do this by defining custom attributes in order to do that in your alot custom library you need to add an XML file you can name it whatever you want the convention is usually attrs XML and you need to include a declare style able element and within that you have to define your attributes you declare style element ideally should have the name of your view and I’ll explain why in a few minutes for each property that you’ve created in the class you need to create an attribute element attr element include the name and then the datatype of your your property there are 10 supportive attribute types and although that seems very limiting it really isn’t these are the most common data types that you’ll define and you notice the last one is called reference so if you have an image control use reference because you’re gonna be referencing images that’s kind of goes annonay and/or if you’re gonna reference a color you can define it as a color along with the reference okay now to use those attributes now you have to go back into your custom view and remember that attribute collection that I was telling you about earlier this is where you’re going to retrieve those values and then apply them into your view in order to easily read the value is coming from that collection you must call obtain style attributes off the context object you must identify the view or the style of all elements that you want to pull in that’s going to be the name of the declare sellable element in your attributes xml file and an android every time you define a resource and you build and kamyelle you get access to a unique ID which points to that and that’s what you’re going to pass in there that returns you a typed array which then makes it easier for you to obtain those values pull them out and use them in your code so now you have access from the typed array to a series of gap methods get boolean get string whatever your data type is that you’re pulling up and you pass in the name of the property again that’s a unique ID that’s generated by the Android system based on the name of your view as well as well the name of your styler bool elements and the properties last but not least do not forget to call the recycle method off the type terrain collection just clean up your resources in memory don’t leave that hanging around once you apply your your attribute values to the properties in your class if any of those affect the appearance of your view you want to make sure you invalidate the layout and you want to request that it be redrawn so you have to call invalidate and request layout for those properties that affect the appearance every time they’re changed in order to make use of those attributes you defined in your custom view within any application that you’re using it in in your layout file you have to declare the namespace if the view is within your current project you simply append your package name if it’s in a separate library it’s easier than that you don’t have to include the name you just have to include that namespace and you’re fine now you can make use of your custom attributes as you would any other element in your in your layout file so as you can see I’m setting you know the text size which uses a dimension value

I’m setting some color properties and a boolean property now let’s take a look at how that turns out I don’t know don’t know which one that goes to technical tactical guy I forget which button this relates to moment please must be thank you perfect okay we’re back in business so in my custom library here’s my attributes file I’m defining that I want that view to have a list of style resources attributes and I’ve included them within that resource element within the class back in the constructor you can see that I’m obtaining that typed array collection by calling obtained styled attributes and passing in the attribute collection I receive through that constructor and I’m identifying the set of attributes that I that it relates to at this point I’m just retrieving those methods from the type terrain it’s very simple some methods allow you to set a default value so that if no value is specified in the layout you can identify you can define a default that will apply in the absence of the value and then I’m calling that recycle method so that’s really the only code change that I’ve needed to make I’m already set my properties to invalidate and redraw every time they’re changed because they only look back to the appearance so that invalidate and redraw just in call calls that the invalidate and request layout methods now let’s take a look at how this changes the main project and the code within it so remember in the activity how we had all that code that initialized the balloon view and I actually had to get a handle to that balloon view by calling find view by ID I don’t need to do that anymore so my activity is nice and clean it’s got nothing in it all of the configuration is now in the XML file so I’ll get that running and we can see how that looks but don’t be prepared to you know don’t prepare yourself for anything different because it’s gonna look exactly the same and it’s going to behave exactly the same now I’m going to open with a designer because I wanted to point out or actually I think I already have it I already have it here one thing I want to show you is the designer for two reasons remember how I mentioned that you have to specify or it’s a good idea to specify the name of your view as your declare style element there’s a reason for that notice something’s missing from this view right now what’s missing does anybody want to answer me my custom view okay it’s missing why is it missing well it kind of it’s kind of there right now I can actually click on it it appears as a mock of you so right now in the stable channel that I’m using I can’t really see it it’s not drawn in the designer the properties are not available in the designer at all but from what I was told by an awesome conversation hall or I had in the hallway with Jeremy if anyone knows who Jeremy LaValle is oh he’s here yes because of the conversation I had with him I discovered that if you download the alphabets your custom view will appear it will work so this is corrected in the latest build so if you

download those alphabets to create your custom view you will see it in the designer you’ll be able to affect change on the properties okay now one thing another thing I wanted to mention when I was talking about that paint object that you have to pass into the canvas make sure that you initialize it outside of the ondraw method simply because every time anything happens that affects change in the appearance there’s going to be multiple passes of that on draw method called so initializing the paint object is an expensive operation so if you can keep the initialization of it outside of the ondraw method that’s ideal I did that I initialize it in the beginning and I’m only changing the color because that’s the only thing that’s changing in the appearance of it so just keep that in mind as a performance optimization when you’re working with it Oh with that are there any other questions a little bit early today which is surprising considering the technical difficulties we’ve had no questions okay well with that you thank you for coming definitely reach out to me on Twitter through my blog through the western dev site definitely be happy to hear from you if you have any questions or if you want to share anything with me about your achievements with Sam run Android development or as a man in general I’d be happy to connect with you thanks for coming everyone enjoy the rest of the conference