Customizable Tabs with TabView for Xamarin.Forms

the thing i'm going to talk about in this video does not really need any introduction it's the xamarin community toolkit tab view so if you want to do tab views tab pages in xamarin forms then you know whenever you want to change something very custom then you immediately need a custom renderer that's just the way it works on native platforms um but with the tab view we take all of that away we use all the xamarin forms elements and you will have so much control over what you can customize this video only scratches the surface um but let's go check it out and if there's anything more you want to see let me know as always in the comments and i'll be sure to do that but first let's check out what you can do right now so here we have a final new xamarin forms application running in visual studio for mac 2019 now you have the exact same experience on visual studio on windows of course it will just look and feel a little bit different but here we are on mac on the right you can see the ios simulator running this application this is just a template that you get out of the box now i will be able to show you this demo basically only by using hot reload which you know just allows you to edit your example and whenever you save it will show up automatically on your simulator on your device i just need to stop it for now to install the xamarin community toolkit which is just a nuget package so if i go here to the solution and i right click on the solution level and say manage nuget packages then i'm going to search for xamarin.community toolkit here we go just last night at the time of recording i have released version 1.0.1 so be sure to check that out it doesn't have any great new things but i had mistakenly added a dependency to the market package right here so you got that for free but that wasn't intended so i've removed that dependency and now you can just install these packages separately from each other so add package right here you want to add them to all three of your projects so the android and ios one and the shared one because the shared one will have all your abstract bits in this case the tab view and for ios and android of course we want to have the renderers in there to render it on that platform now i know for sure that android and ios are supported i'm not entirely sure about uwp but the other platforms are not supported so gdk mac os if you are an expert in that please feel free to you know contribute that tap view to the other platforms and make a lot of other people probably really happy um although i'm not actually sure if that's the case because i think tap view might use all xamarin forms control so maybe maybe please try this out and let me know in the comments maybe i'm very much mistaken here and i'm too much in the mindset of how xamarin forms work because i think tab view is a composite control so you know that will just use all xamarin forms elements and this should just work on all the platforms so that is really really cool actually so go check that out let me know in the comments if you are using it on anything else than ios and android and let me know how that goes um okay so the toolkit is installed and i'm going to add one more thing before just running it again because to use the um the toolkit you can import this namespace right here which is xmlns i'm going to name it xct so if you want to do anything else that is fine too but here you can see we have one of those fancy urls just like the other ones like forms for instance here and we have this one 2020 edition toolkit and this imports all the namespaces you need so now when you just do xct oops xct you can find all the things that are in the toolkit now how cool is that you don't need to put in all the other different namespaces in here you just do this one and you got access to everything so actually let's import the tab view right here let's do that now this becomes red because in your page you can just have this one element of course so this is going to break but i'll fix that in a moment actually let's let's remove this for now let's run it first so i can just do updates while i'm talking about this and while we're doing this waiting for the app to come up so here it is already installing there we go so now we have the same application back again um and now i can say xct tab view whoops the tab batch template that is very interesting as well but i'm after the tab view right now so adding the tab view and the tab view is just you know that is basically the equivalent of the tabbed page if you will where you can add like different pages to your different tab in the tab bar so what we can do i'm just going to copy this well actually i'm going to cut this whole stack layout here and i'm going to add a tab view item in here so a tab view item is basically the equivalent of your tab and inside of that i can say tab view item dot content the intellisense mixes it up here because i am making this a closing one here we go um let's do this and now inside this content i can paste this whole thing here let's make sure we format this nicely and whenever i save this you don't see much of a difference you see suddenly a white bar here at the top which is actually the tab bar that you're looking at but you know in ios with the notch you can't really see it that well and we didn't actually add any text to this tab view item so we'll get to that in a minute but you can see this is now our new page wrapped in a tab view so this is the only tab so this is just looking fine but the one thing we forgot to do is of course the title here we go tab view sample here we go save that boom damn view sample okay now we're on the road so what you can do here is paste in the content and right now the content needs to be a view i think we're thinking about changing that to pages so that you can also put pages in here but for now um you want to paste your layouts in here so the thing that you would normally put in your page is the thing that you now are putting inside of this content so that is something we are thinking about working on um please find the issue that we have open for this on the repository and let us know your thoughts or put it in the comments below but that is something that we're working on but for now this is the way it is so content and at the tap view item you can do a lot of things so now actually let me copy this whole item again so here we go let's copy this the item let's create another one save that you don't see much of difference but i can swipe here so you can see i've got two tabs now um so you see swiping is already something that was not in the box uh whenever you use like the native tab control in xamarin forms right so that was already something that you needed a custom renderer for even if it's possible like with ios i don't think that is something that is done natively so this is something that you already had to do some trickery for but this now comes out of the box so but let's um actually to to make the difference a little bit more clear between the pages let's make this one red so now we have two tabs right so that's really cool and in our tab view item we can do a lot more so one of the things is say add a text and we are going to say page one here save that and you can already see it here just outside of the notch you can see that page coming up and whenever i do this for the other one i say text is page two here we go save that and you can see it here because it you know it distributes it evenly over the space that's available here so page one page two can i click it no i oh see i can reach it just below the notch so you can see i can um change it with with the tap things here or i can swipe it so so that's that's how you navigate these tabs and i can add multiple more and it will still just work so on ios it's normal to have the tabs at the bottom but you can see you can also have them at the top so that is cool so now we go to our tab view level and we say placement so here we have tab strip placement and we can save bottom whenever i save that you can see boom it moves to the bottom down here so now we have page one page two we can flip over them by just clicking these or we can still swipe it of course you can also disable that swipe thing so is swipe enabled if we set that to false and i save it again then you can swipe anymore and you can just do it by clicking on these so this is more like your traditional approach that you would take but you know i like the swiping for here so let's keep it and so these are all things that are already not standard with using vanilla xamarin form so this is already a big win when you're using a tap view right so that is pretty pretty cool now if we go back to one tab view item another thing that is not possible without a custom render right now is we can say the background color so let's make the background color the same color as this little thing right here so for this one here you can see that is the background color we can also set the text color so let's make that white so that it's a little bit designer fancy thing so here we can see it has now the white text color and a blue background it doesn't change whenever it's selected but we can fix that as well because you have a couple of properties like text color which have the text color selected and there's a couple of bunch more that you have that also have that selected post fix so badge background selected you can change the font when it's selected you can change the icon when it's selected so that is really really cool but one of the things is the text color selected so whenever we do that let's make it green i don't know save that and you can see it's selected by default so here you can see that it's now green and whenever i go to the other one it turns white and whenever i go back it turns green so that is pretty cool now for the other one i can do the same thing so i can say here we go text color whoops text color is white background color is red because we wanted to keep that the same so here you can see now we have the blue and the red one so that works right let's make that selected one green as well so we can know which one is selected text color selected green okay now now we're back on track so you can see by the green one which is selected because it's not obvious when it's blue or red but you know anyway so that is another thing you can do that is pretty wild right so these are all things that you would have to use a custom renderer for before um and one thing i mean there's a million things i can show you with this tab view please let me know in the comments what else you want to see with your use case and what else there is because also be sure to check out the sample app on the xamarin community toolkit repository because it has a couple of different scenarios with the tab view that you can use this is just an introduction to show you what you can do with it just an introduction to make you meet all the things that are in there right now but you know there's much more possible so if i'm missing anything that is interesting to you please let me know so if we go back to the tap view again there's much of things here as well we can say the the tab content height uh the tab indicator high tab strip height so let's play with that a little bit if i make that a hundred you can see the tabs uh become much bigger so that is something that you can do as well um there's that there's one other thing to show you because one thing that is often requested as well is the badges so that we can do as well so we have a couple of batch things that we can do here i can say just batch text is 10 and whenever we do that you can see here the 10 showing up in a little bubble uh we can also make that badge badge background color red so you know it's more of like the the badge in in ios and then also we need it to be white of course so the batch text color is going to be white so here we go so now it looks like the badge on ios right so you can indicate you know that something is happening on this tab i think you can also work with animations if that's what you want with this badge i think if we like reload this if you really look closely here and as the page reloads i think there is a little whoops that was a screenshot i think there's a little um animation going on here as well so that is pretty cool you can do so i did this on a tap view item so you know for each item you can have a different batch so if i would do like the same thing here um and say badge text so it's a string so i can also do hello i'm not sure if that's going to work by the way or that i'm breaking things okay so you can do text too it becomes more horizontally stretched but it's definitely something you can do and actually something that cannot be missing in your tabs so i said i think the badges would be the last thing but there is another lasting one more thing just to keep you here in suspense of course is the icons so what you can also do on the tab view item is say hey i want to give this tab an icon and you can also change the icon with when it's selected so this is another one of the properties that has a selected one as well so before this demo i've added a couple of resources um actually they're not here so let me see if i can quickly add them again i think they're still on the file system but just not in the project so here we go a circle and a triangle they're both white so that's what they're not showing up let me see if they're still on android resources drawable no existing files um spherical triangle there you go and of course if you want to do this right you want to you know add all the different kind of resolutions for the right pixel density and that kind of stuff but i can just say icon and i can say circle dot png and if i save that i should be able there we go to see the circle and if i do the other one here i can say icon is triangle png save that and there we have a triangle see so you can also have icons you can have different icons whenever they are selected so that is something that cannot be missing as well from your tab of course and that is basically how you do the basics with the tap view again if you want to see a little bit more in detail some things please let me know in the comments what you want to see also be sure to check out the sample application in the xamarin community toolkit you can go there easy and quickly by using the url aka dot ms xct that will bring you right to the repository be sure to check out the sample app under the samples folder and have a play with this yourself and these were just a couple of options icons swiping to select a tab different text colors whenever you select an tab or not different icons whenever you select the tab or not the badges badge support this is wild this is wild and it's so easy to use you know the syntax is just um super simple if you ask me um so you know get started with this let me know how you like it if there's anything else you i've said this a couple of times already if you want to see a different scenario with tap views please let me know in the comments um i know you like this video so just click that like button click that subscribe button if you want to see more videos and want to be immediately notified ding that bell become part of the notification squad and i'll be seeing you for my next video keep coding

Channel: Gerald Versluis

Views: 9,660

Keywords: xamarin, xamarin.forms, xamarin tutorial, Xamarin Community Toolkit, xamarin community toolkit tabview, TabView Xamarin, Xamarin.Forms TabView, xamarin.forms tabbar, xamarin forms tabbedpage, customize tabs Xamarin, Style Tabs Xamarin.Forms, Xamarin.Forms 101, Xamarin Forms 101, xamarin forms tutorial for beginners step by step, xamarin forms tutorial, xamarin forms tutorial for beginners, xamarin forms tab badge, Xamarin Forms Tab BackgroundColor, xamarin forms tab layout

Id: 8EOKrUtnjrU

Length: 16min 8sec (968 seconds)

Published: Thu Jan 14 2021