New Xamarin.Android Editor + Designer Features

>> Welcome back everyone to The Xamarin Show I’m your host, James Montemagno Today, I’m really excited to have my good friend, Jeremie Laval, all the way from Boston and Ireland before that, and France, I don’t know, where are you from exactly, Jeremie? Where are you from world traveler? >> Yeah. France originally But then I travel in out that I have a mixed bag of different English accents that nobody even know where I’m from in the end >> You work specifically on our Android, Designer, and everything around that, is that correct? >> Yeah, that’s correct. I basically handle everything, that’s like Android Tooling for both VS Mac and VS Windows and all >> All right >> That’s including Designer >> Got it. You may know Jeremie, because Jeremie and I presented both Xamarin Evolves back to back on Material Design Jeremie and I are the biggest Android fanboys I think at Microsoft I don’t know, it’s hard to say who’s more >> I guess we’re extending. We’re like the biggest fanboys of Xamarin Are we still the biggest fanboys at the scale of Microsoft? I don’t know >> I don’t know. We’ll see We’ll resort to maybe put out some polls and see who’s number one. But yeah So, we’ve been doing a lot So, maybe tell a little bit about your past, what you do now on the product and everything, a little bit about yourself >> I guess the question is, how far do you want me to go? Personally, I’ve been involved in modal for a very very long time I joined Xamarin very early on Very early, I was working on the Designers The first Designer that I actually worked on funnily enough was the IoT Designer So, when we civilized that work a little bit, that was a few years ago, I took ownership of the Android side of the house So, now we have a small team essentially working on it So, I’m adding them as part of my day job >> Got it. Beautiful So, you are working on the Designers focused on Android? We just had a big release of 15.8, that sound correct? >> Yeah, that is correct >> There’s a whole bunch of new stuff I’ve demoed a lot of our Android stuff in the past, here and there As an Android fanboy building all the Android apps, I’m really pleased with all the amazing new stuff that came out I think the release notes, those had split Android Designer and that was it But there seems like there’s a lot more in this Release and that’s why I wanted to have you come on > Yeah. It’s definitely, if I had to like nickname this release, it’s definitely the Visual Studio Windows nerve release We really devoted a lot of time polishing the experience, specifically for VS Windows [inaudible] feature, some of the longest standing features that people have been asking for So, I finally delivered, at least for the first version in that release >> Very cool. Well, do you want to give it a spin and show us all what’s new? >> Sure, yeah >> So, let’s see. I have the power to switch over to your other machine here There we go. So, what I see over here is “Awesome Login” >> Yeah, excellent. So, this is the Designer inside Visual Studio Windows So, even though I said here it was a Visual Studio Windows love release, Visual Studio for Mac also has some of those improvements as well This split view specifically is not yet auto VS Mac We are actually working on this We just are syncing up with the VS Mac team themselves, so that they can provide us that support in the IDE But once that’s done, we expect to have the same feature also on VS Mac >> Okay. Got it >> But on VS Windows, this will show very familiar to someone who has already used the XAML Designer for WPF or WP app We’re basically going to be using the same sort of shell that you do, when you now start, when you open a layout style, you’re basically presented with this split view So, you can customize exactly the way it looks If you, for instance, don’t like to use the “Source”, you can just collapse it and just get back to the design surface, like it used to be in the past You can go the other way around and for instance, swap the pane and decide that you don’t want to have any previews, so that you only focus on the text It’s up to you, and it’s made to essentially be seamless depending no matter which version of the pane you want to be using You can actually set up, in the “Preferences”, we have a new set of preference where you can actually say what style you prefer So, if you want to change the default, you can decide for instance, that you just want to use the source or the design, stay on the split or, even if you have the split, if you are more like a vertical or horizontal type of person, depending on the size of your screen, all that can be set up there >> That’s nice. So, if you have one of those monitors that if you switched over into vertical mode So, it’s huge You could actually just make the Designer go top to bottom >> Exactly. That’s exactly So, a lot of the work that we actually spend in our release to be able to support essentially this split view feature went inside the core So, now that we have done

all those big big far and wide ranging changes, basically what we have now is that we can actually have complete bidirectional editing between the two modes So, you can see here that I am changing some text and the text is right away updated on the other side So, that’s something that we couldn’t really do before We only supported the one mode at a time, but not both at the same time So, now thanks to all those changes, we essentially support being able to edit from both sides So, it’s tailored to whoever’s preference If you are more a design person and you want to use the Designer’s surface, that’s fine, you can continue doing this If you’re more a text person and you don’t actually want to see any visual until you run your app, you’ll also have fun using just the text editor experience, or even if you only use the Designer surface as a preview form, for instance, what concentrating on a text, you can also do that >> Very cool. Yeah, it’s nice I mean, that’s one thing I want to forever, is a nice split view, so when I’m working I can see it, and everything’s nice and pretty I like that. It’s, as soon as you type, you don’t have to worry about flipping back and forth >> Yeah, precisely So, as part of recognizing the fact that a lot of people like to use the Source Editor for different reasons, we also spent a lot of time in that release, revamping the source experience, IntelliSense experience that we have in that pane So, we have things like better syntax highlighting We are now properly recognizing things like resources, that are shown in a slightly different color We also support the formatting that is typical of Android applications where attributes are on their own lines We also support things like quick info So, if you have, for instance, in that layout, I have a couple of different places where there’s colors So, if you actually hover your mouse over such color, we’re able to recognize that it is mapping to a color, and will show you actually how the resolving of that color goes, including showing you what the final color looks like So for instance, here, I’m hovering over this button here, and so you can see that the background being blue here I can also see there- >> That one’s actually an attribute So, that’s actually an Android specific attribute mapping to your color, mapping to an actual Hex value? >> That’s exactly it. Same for, this is a default framework resource that maps to just the plain color white So, same thing we can show it there as well >> Very nice >> So, the idea is that everything is also seamless So, you can also edit on the other side So, one change that we did compared to previous Releases is that we’re now much more fine-grain in the way that we are going to update tweaks in all the views the Designer surface So, in the past, if you were to use the Designer surface, we basically would overwrite everything that you had in your source with everything that was showing in the VisualTree. Not anymore So, for instance, you could decide to have So, if you follow up, you have very specific changes that you have in there, for instance, if I decide that for some reason I want that edit text to not be indented, now if I go to edit something that is completely unrelated like that button, that I go select here in the Designer surface So, I can get access to the “Property” panel If I decide to change the text at that stage, so change it for instance, from log in to, let’s say, logout, you’ll see the text actually changed here and the little markers show you that basically the only place that we updated is this So, we retained the custom changes or the user changes that you have potentially there or anywhere else in the document and only changed the part that actually needed to be changed >> Very cool. Yeah. So, it’s not completely overwriting, it’s just setting the property That’s nice, since it’s using the Editor, you get those nice Diffing tools, basically That’s why there’s little yellow things I’m assuming is, that you changed something there and the Git history is different >> Exactly. So, will be resistant to changes So, you can be sure that if you change something in the Designer surface, you won’t lose any more, anything that you might have done specifically inside your source, that is not what you change inside the Designer surface >> Oh, very cool I like that a lot >> Yeah >> Then, is there a lot, is there anything new as far as, we have a lot of attributes here, but one mystery to me has always been finding the attributes, discovering the attributes, or so many attributes has always been really tricky >> Yeah. So, as part of also those changes, we also improved drastically the IntelliSense experience that we have So, for instance, what I want to show you is that same text there Instead of editing inside the “Property” panel, what I could have done instead is just directly go here So, instead of trying to remember, as you said, what resources, for instance, I might have inside my project, so that I can put in into that text, we have now directed to completion When you type for instance, the @ symbol, we can now show you everything that’s inside both the project and the framework So, this dialogue has been revamped from the ground up It’s also much faster and more precise than it used to be in the past You can actually filter down if you want by “Framework Resources”,

“Project Resources”, and so since here we want to have a string, if I start typing string and I know that I put something as my login, I see that I have my “Login” button So, a nice string that we’ll show you, for instance now, is that we actually can show you what the text actually behind that So, for instance, I add two resources here; one for my edit text and one for my button and I wasn’t sure which one corresponded to which Well, now since I can actually see what the text is, I can actually select the right one >> It’s super nice. Yeah, it’s super nice to be able to go in and actually see That’s the one thing I notice immediately I was like, “Wow. I don’t have to guess anymore I can navigate to that file,” because it tells me right there, which is nice >> Exactly >> So, there’s more So, obviously like, that those changes like a far arranging, we also complete like everything else But, yeah, this is the start We have much more in the works to improve here including things that would come with the next version of Visual Studio But, this is definitely an area of focus for us where we will try to improve that text experience I guess, you could see as much as possible >> Very cool. You showed the property pane a little bit and that looked very different than the property panel that I’ve been used to Is that in revamped too? >> That has been revamped So, they didn’t come inside of 15.8 release, that actually came into 15.7 release But, essentially and we were implementing also from the ground, but a completely new property panel that’s very reminiscent again for people that I’ve used these some old the PPF and WP designer It’s made to look very close to what people are expecting from Visual Studio, but it supports essentially the same thing that we would having inside our other property panel You can actually now search for specific properties, we have some better editors, for instance, for background, for colors or things like that Like a brush system, so that you can also look up if you wanted to measure resources, as well the same way that you can do to NVS back, those kinds of things >> That’s super nifty because just specifying X values, the font, I’m actually seeing it there and are specifying if I know my color palette of my material palette, they may be able to select it that was like super beneficial and super helpful It’s the first thing I did when I saw the new property panels like, oh, let me just see like, oh, it is there because that is part of the theming, but I know we have in the Designer Aspect tools they all that theming stuff that we did a while ago and that all seems to still be there, correct? >> Yeah. It is too >> Very cool. So, new and as faster I assume, it’s more resilient like has there been a lot of presentations there? >> Resilient, generally we’re saying [inaudible] is more resilient You name it >> Very cooI. Go ahead >> No. Yeah. So, that’s like part of it We also like did some, more improvement or designing, in general, that is like one specific one feature that I’m really excited about that I wanted to show A certain feature is called Sample Data It’s something that also Android Studio has, that we also implemented that outside So, to explain like Sample Data is for, let me open up another Layout So, that Layout is a Recycler view, that is part of the super library >> Okay >> See it loading here. So, my Layout is very simple, it’s simply a Frame Layouts, containing the Recycler view, which if you don’t know is essentially a replacement or like a more powerful version of List view, a landry that supports tons of different features, different type of layouts, different types of animations as well and things like that So, by default inside the designer But, I mean the main problem essentially of those type of layouts is that they require usually at run time some sort of data source, usually something maybe you would fetch for like a service, or Database, or some Web resource to fill up the data that’s showing So, when you are in design what you usually don’t have access and silly to that real data that you would have inside your App when you’re running on your phone So, by default we cannot try to give you a little sense of what things may look like, and so we do a best guess of putting essentially a few of those like text item variables But, what you can actually do or what you could do in the past, is that you can, first of all, customize, for instance, a number of elements you could potentially have in there So, for instance, I had studied with like six elements, but now I decided to inference is just that nine So, those are using the specific namespace called Tools, which is defines up there, and so that it lets you access more design type functionality Those items will not add up inside your final application They are only for design time They will be removed before they go into your final APK >> Oh cool >> So, one thing that we support is also you are able to specify, which sub layout,

I suppose, you can use as the cell view of like what do we actually show instead of those text views that we have by default So, if I open that layout as well that I have here This is one of such cell view, I suppose So, if you’re wagering, for instance, I could contacts, application you might have an avatar picture of a dog, for instance, if you have dogs in your contacts, the name and like maybe the city where they are from So, what’s actually interesting here is that, this is like a very simple standard layouts here Well, what’s interesting is that this picture here that you see, this name that you see here, and the city here, it’s not actually me, who put them in, instead what I’m using is that I’m using another one of those tool’s attribute It’s inside of it instead of feeding actual data, I’m finding these very special tools a sample namespace, and you can see the like I have different things for like the picture I’m using this avatar name thing for the name I’m using this full name item and forward CDM using these cities So, what this actually maps to is that behind the scenes we have actually curated right now a bunch of different sources corresponding to a very common data type So, as I said like names, cities, different type of avatar pictures, and things like that So, you can actually use these data to feel in, again, it’s old design time You won’t actually end up inside your application, but you can actually use those data sources inside your layouts, so that you can actually visualize what he would look like if it were a real data >> Very cool, yeah because that’s the one of the hardest things sometimes to visualize this data that’s not digital data unless you have it hard coded, right? >> Exactly. But, that’s not the coolest thing The coolest thing is like when you want to actually do use this type of layouts inside, something like this So, if I actually add it here, the interesting parts, is that >> Very cool >> By doing this, I’m importing that same layout that I showed you before, but what’s interesting is that we cannot tact, that you are trying to use this in a list type of situation So, instead of showing you the same data all over again, we’re actually going to have a mix and match of different information, so that you can actually truly see what like this would actually look like on device if you had diverse data coming out from the backend >> That’s very cool because that way then you can like the grid overlay on it You could see like if everything’s are lining up not just for one item, but for all the items Figure out your hatting, that’s really nice >> So, any changes that you would do on the other one we’ve been reflecting also obviously back on onto this one as well >> Yeah, it looks like it was really fast, you just put it in there and it was there >> Yeah. So, currently we have a list of those data sources We’re only at the beginning So, you if can go over to like the Xamarin blog, we released the blog post a while ago Still very much on that front page But, as you can go back to these blog posts I’m sure we will put the link somewhere We have the section that we’re also putting inside the actual documentation for the designer if you want to get a quick reference, but this is essentially the least of what we have today So, it’s a lot of names, it’s street type, cities, those that I have used the avatar for the pictures So, in the future we will sooner let people just submit their own data So, what’s interesting is that this system is essentially flexible enough that people can even submit JSON, for instance, formatted type of data Which I think is something that is supporting Xamarin Forms as well where he can get a structured data as well through this So, we are planning on adding support for user supplied sample data that way, so that you can visualize it directly inside your layout at design time >> Yeah that makes sense. I always use the side by side I live and breathe inside the XML So, sometimes I use that side by side for quick references, just to make sure thing’s in the right place I know that my Pixel XL 2 is going to be really big and in different sizes, but it’s like it’s nice just to know like, oh this is about what it will be and then also I can see some stuff too >> Yeah, exactly >> Very cool. Anything else hidden in there that you want to show off, Jeremie? >> No that’s the main thing that you see Stay tuned for like more improvements across those lines >> Very cool. This has been awesome I always love seeing like how are optimizing and helping developers be more productive Jeremie, thank you so much for coming in showing it off >> No problem. My pleasure >> We’ll put all the links in the show notes below So, be sure to go check it out Be sure to follow Jeremie on Twitter because he is awesome great stuff All that Android stuff, you android devs out there, follow us in and ask them, tell them what you want to see how you’re using the designer So, I’m sure you love the feedback, Jeremie >> We love feedback. Yeah >> Awesome. Thank you again Enjoy your afternoon in Boston I’m sure it is lovely >> It is actually pretty nice, the last strand of summer before the harsh winter comes back

>> Yeah, so go out there enjoy it Thanks again for coming on I appreciate it, Jeremie >> Yeah, no problem, thank you >> Thanks everyone for tuning in Of course, be sure to get all the links in the show notes below Make sure to subscribe on YouTube or on Channel 9, so you get the latest Xamarin shows right in your inbox Until next time, I’m James This has been the Xamarin Show Thanks for watching