How to Implement Tabbar Badge using .Net MAUI - Add Dynamic Tabbar Badge Number for .Net MAUI Shell

hello everyone I'm back with another video and in this video we are going to see how can we implement the tab bar badge count something like this in net Maui so till now I'm using Net 7 with this net Maui app net 8 is coming next month but in net 8 also there is no direct support or direct implementation for this uh this tab bar badges in Maui so you know in order to achieve this we need to write some custom code this platform specific code for Android and iOS so that's what we are going to see in this video so let's take a quick demo of the this uh functionality so right now I'm on iOS we can see I have created these two buttons this current count this is in sync with this tab bar badge so on this cart right now there is there are no items so we cannot see anything now if we try to increase the counter you see now we have one item in the badge so it is displaying here and this current count also I'm displaying it in the page also so for whatever reason you need this count to be displayed in the app you can do that as well so if I keep on increasing you can see we can see the items increasing we can decrease the items and we can see items are the B count is decreasing and this current count is also decreasing and if we reach zero then it got removed from this uh this tab bar badge because now there are no items but you can modify it if you want to display zero or blank then then also you can see uh display that cool now if we go to cart right now we have six items current count is six and cart this badge also six on this my cart page you can list your items here and then we have this clear button if we press on this clear button it is going to clear this count so when the count is cleared now we don't have any value in that count so B is not there b got removed and if we go to home we can see that current count is zero that means everything is in sync cool so now let's check it on the Android this is my Android emulator right now there are no items in the card so there are there is no badge if we add first item now we can see current count is one and we can see this badge here so we can keep on increasing this counter we can decrease it so we can see these are in sync and items are getting removed and if I if I reach zero then there is no PGE because that does not make sense if we don't have any item now let's go to card we have this clear same thing if you press on clear then there are no items in the card so badge got removed on home we can see this current count is zero so this is what we are going to implement in this video and the most common use case for this badge numbers is the this card basically and uh maybe notification and if if you can think of any other use case do let me know in the comment so that I would also know that okay we can use this badge for this particular purpose also cool so let's start implementing this so I have created this project this net Maui app using Net 7 I have added these three images here in this images folder c.svg home.svg and user. SVG these are for uh displaying the tab bar icons basically I downloaded these from box icon.com so you can download these from there if you want and then on app Shell let's start creating a tab bar the first thing let's say tab bar paste this and I created these three pages this cart page. ZL main page was already there profile page. ZL right so these three pages now we'll use these so first is title home main page this is fine let's copy this two more times first one for our card third one for our profile like this and and let's add icons to them so for home we have this home icon for cart we have this cart icon for profile we have this user icon let's change the pages so this should be cart page this should be profile page and let's change the routes as well so this will be profile page and this is going going to be card page so right now everything is simple on main page I have changed this title to B counter app and modified this label with this text welcome to tab bar counter demo app that's all that's all what I have done so let's run it on Android first we'll implement this on Android then we'll implement it on iOS okay app is running so this is how it looks on Android so we have these three tabs home card profile we can see the icons and this text nothing fancy so far great now let's start working adding the tab bar so for this what we need to do we we need to modify the default appearance of this bottom tab bar so for this what we are going to do in the platforms folder in Android folder let's create a new file new file this should be a class or let's say a new class and for this let's say tab bar bag the name is up to you whatever you want so tab bar B renderers something like this cool now this should be a derived class of Shell renderer Shell renderers from X Mai controls handlers compatibility cool and in this we need to override one method and that method is create bottom nav View appearance tracker this one because this is inside bottom nav view so we need to use this now it returns an implementation of I shell bottom nav view appearance tracker so we need to provide our custom implementation to this interface so for this what we can do we can create a class here with our custom name so let's say shell bottom or maybe let's say bad shell bottom N View appearance tracker the name is up to you whatever you want you can name it and then we are going to implement this interface or we can do there is this class shell bottom nav view appearance tracker which do Mai provides so this is the default implementation we can use this one so we have going to use this one so we are inheriting from this we are extending the functionality using our own class now why is it can we have it same in same line yes no cool from this it needs a Constructor so let's add that Constructor that Constructor is this default Constructor it takes two parameters iell context and the shell items so we are good with this inside this we have one method uh by which we can modify the appearance and that is the set appearance so inside the set appearance we are going to have our logic to add the the badge basically so for this after this set appearance bottom view appearance we are going to add our logic and our logic is going to be first we need to get a badge view so that we can get from this bottom view dot we have a method get or create badge inside this we need to pass the menu item id this is basically the index of the tab bar item on which we want to add our badge so in our case that is the second one so we can say constant and let's say card tab bar item index and one because in r t bar this is the second item and the index is starts from zero so 0 1 that is the card so let's use this one index and like this fine and now we have this badge drawable so we'll say word badge dyable view cool now we see this on this badge dryable we have couple of properties on this first is number so this number we can set this number to whatever value we want let's say 10 and then on this we can also set the background color which is let's say colors. red do2 platform to make this color this colors. red this is coming from net using two platform it converts this color to platform we are currently on Android platform so it converts this color in the format which Android knows so let's add the usings for this Microsoft Maui platform and we are good and we can set that badge color as well the badge text color so we need background color to be red and we need foreground color to be white so we can set this white do same to platform like this cool now if we run it but before that let's add all the pieces so this thing instead of returning this base create this default actually we need to return our implementation which is this one so from this let's say new badge shell bottom nav VI appearance tracker we need to provide two values first is shell context that is this and then second one is shell item so the shell item we already have it as a parameter to this method so we can pass this directly here cool now we have this implementation let's use this implementation in our Maui program so in Maui program somehow we need to tell theet Maui that you should not use the default implementation you should use the implementation we are providing so for that we need to add our Handler mappings to our dotted Maui app so after this in Maui program.cs after configuring fonts we can say uh configure Maui handlers and from here we can set our Handler h. add Handler and it has two generic parameters first is T type second is T type render so the type is shell and the T type render this is the implementation which we are providing that is this tab bar badge renderer now it is coming from this platform Android and it will not be available on uh on iOS and other platform so let's do one thing on this tab bar B renderer let's remove platform. Android namespace let's be let it be in the default name space app names name space and on Mau program we can remove this name space directly cool so we have added this now we are good but there is one problem this belongs to Android only so what we need to do we will add conditional compilation here so we'll say if this is Android and if then only do this if this is not Android don't do this so let's try to run it and let's see how this app looks with this default uh badge with the default value 10 app is coming let's see and boom we have this value here right cool now we need to make it Dynamic but before that let me show you something so if you go here if you come here and let me add a break point here on this set appearance so right now we are on home if I pressed on card then breakpoint hit continue and let me add this in the Constructor as well now I went to profile and breakpoint hit it did not hit for this uh this Constructor but it hit for this method only so let me continue go to home and then set appearance again triggered the Constructor did not trigger so the point here is this is going to be run again and again but that is not what we want we can simply have this badge dyable once and then we can simply reuse it right so for this what we'll do the type of this is BGE drawable so we can have a private variable here so we'll say badge drawable and this should come from Google Android material badge like this and this should be nullable we can say badge drawable like this and then inside this first we'll check if this is null then only do all this thing so this will be executed for the first time and after that we will have value in B drawable so let's remove this wi from here now we will have value in this badge drawable then whenever it is coming for the second time it will not uh pass this condition so it is not going to uh execute this code so this is more efficient now now one more thing we should remove this badge drawable or maybe it will be automatically disposed but okay let's make it Dynamic now everything will work as expected now this 10 value we need to make it Dynamic now in order to make it Dynamic it will be uh we need one mechanism by which we can trigger the value change from and anywhere in our app and it should pick up that value here and if you remember I showed you the demo it should pick up in the in Pages as well so for this there could be multiple approaches the simplest approach I am using I'm creating a new class on the root and let's say badge counter survey something like this and I'm making it static let's remove this Constructor we don't need this Constructor inside this what I'll do I will have a public property so public in let's say count this should be static public static in count get and let's use private Setter method here so that we can modify this in from this BGE counter service only so we will have the uh we know that we have the single source of Truth now let's have a method here public void set count and here we will get account value from the caller and we are going to set this count to Discount cool private static like this set count now we are good next thing whenever this count is changing we need to notify the so any page or that bottom tab bar that badge it will subscribe to this count change and from this count whenever this count is changing we need to notify that change for that what we'll do we'll create a public static event here public static event and this is going to be an event handler of type int so we'll say count changed so whenever this value of count is changing we need to trigger this count change event for this let's modify this count property to be a full property with that baking field so public sorry private static intore count and from this get we will directly return this underscore count like this and from this private set what we'll do first we we will set this underscore count to Value whatever value we are setting after this we are going to notify the changes for this so we'll say count changed do invoke sender in this case let's use there's no sender sorry and then in E this is the count value so let's use this underscore count cool so whenever this count is changing we are invoking this count changed value save everything and we are good now now let's use these two things first let's go to our tab bar badge renderer here in this badge drawable when we created this badge drawable after creating this what we'll do we'll say B counter service do count change whenever this count is changing we need to do some logic so let's say on count changed let's create a method here so this is going to be a private void on count changed with nullable object sender and int new count from here we need to do the same thing copy and paste now we are repeating this thing so let's create a new method here so here we'll say private void and we'll say update badge and let's F get a count from here cool in this first thing we'll check if this count is less than equals z so we don't want to display this badge count here right before doing this let's have uh condition check here so we'll say if BGE dyable is not null then only execute whatever code is in this update bad cool so if count is less than equals to zero we can say badge drawable dot uh there is one method set visible so we'll say false so that means if the value is zero or less than zero we don't want to display this badge now next case if count is greater than zero then actually we want this code to run okay so instead of using this number 10 hardcoded we'll use this count cool now we need to call this update bad from our event with this new count which we got from that b service and same thing we are going to use in here when we are creating the badge for the first time so this time we can set h on count changed here we could say update badge with zero so I think everything is fine in this now we don't need to touch this file uh there is one more thing we are adding this event and Handler so it's always a good idea to remove any explicit event handler we have added right so on this file what we'll do after everything we will override a method that is this dispose method so here we'll do the opposite of this batch counter service do count changed so we'll say minus equals that means we are removing this event handler from this cool everything is fine now let's go to main page which is our homepage on homepage we have this counter button so let's copy this counter button let's remove this counter button we don't need this name right on the first one first button let's say increase counter or let's say increase badge count and the second button we'll say decrease badge count like this okay now let's change these methods so we'll say increase B count click and on the second one we'll say decrease B BGE count click decrease badge count click cool we'll create these methods but before that let me add a new label here we'll say a text and let's say the default value current count zero because there is no current count let's use x name so that we can use this label to modify the value let's say uh counter label like this cool and let's move it to horizontal option as Center as everything else great counter label let's try creating these methods in its code behind so main page zl. Cs on counter clicked rename it to increase BGE counter click now we don't need this count so remove this we don't need all this logic remove everything okay now let's copy this method and use this decrease BGE counter clicked like this cool now what we need to do from here when whenever we are increasing the count we'll say badge counter service dot set count and in this we will get the previous count and we'll increment it by one we could have some helper methods there to increment and decrement but I'm using this raw format and inside decrease we'll simply negate it great now one more thing we'll set this count changed event handler here on count changed so let's create a method here for this so we'll say private void on count changed with the label object sender and the new count like this and if this is coming then we know this label which has this name as counter label we can modify its value so counter label do text equals we can say current badge count is this new count right and now we are adding this event handler so it's good to implement I disposable and implement the method public void dispose and from here we'll do the opposite of this so count changed minus equals we are removing this everything should work fine now let's try it out so let me stop everything save all and run it right now we are on Android so let's see it should work fine on Android we have this breakpoint Constructor continue set appearance continue okay current count zero everything is zero let's click on this increase B count we can see 1 2 3 4 5 and nothing is happening here that means we are missing something let's see what are we missing so whenever this count is changing we are saying update badge let's add a breako here this break point got hit okay then what's the issue stop and rerun I have that break break point right let's add that break point here okay Constructor set appearance update badge so we'll okay okay okay I see what the issue is so do let me know in the comment if you can figure out what the issue is the issue is here in this update badge method only okay let me fix that issue and do let me know in the comment if you were able to figure out the issue so if the count was less than equals z that is the default first time the count is zero we are saying that this should not be visible after that we increase the value then it came to this one we modified everything but we did not change the visibility here we'll say set visible true so that was the missing piece save everything now I don't think we need these break points so let's remove all these break points remove remove let's run it it should work this time okay app is loading cool increase yeah and you see 12 12 everything is working if I go back to zero now that is gone right and if I keep on pressing this is less than zero which should not happen we should have this condition whenever we are modifying the counter on our BGE count Serv or maybe from Main page. zl. CS so I'm not going to do it you can do it as per your requirement so now we are good right we can modify this we can go to other Pages it's fine and it is looking fine great now let's go to this one this my card and let's add that uh toolbar item here and from there we will reset this value so for this we'll go to to our card page do SLE this one inside this let's say content page do toolbar items and we are going to add a toolbar item here so toolbar item with the text as clear and with clicked event let's go to this here and from here we can say B counter service do set count zero cool let's stop it and run it so it should work okay okay okay okay cool we can increase the value we can decrease the value let's go to card page we can clear the value and we are good now cool everything was great now let's move to iOS let me minimize this change this to my iPhone simulator let's first run it this is the previous app I guess so this is on iPhone simulator let's see everything is fine on card on here increase BGE count so we can see this count value is modifying as expected but we cannot see that uh badge here that's because we have not implemented it for iOS cool so let's start implementing it for I iPhone so we need to do the similar thing we have done for Android let me copy this name tab bar uh tab bar B render oh let's do this tab bar B render copy go to iOS folder and create a new file here new class file tab bar B render same thing we'll remove this Nam space we'll have the app name name space only like this and this should again going to be the same uh implementation of shell renderer cool and Now for iOS we need to override a method and that is going to be create Navar uh create tab bar appearance tracker this one we need to create a tab bar appearance back before modifying this let's go to our Mau program and in here what we'll do we'll going to add an L if method else if and here we'll say if this is IOS and if then do the same thing like this right now the names are same that's why we can have this like this but or we can simply use this let's say if Android or iOS we can do this as well if this is Android or iOS then only we need to do this if you have different names and different implementations then you can have that long form so if Android add this Handler else if iOS then add this Handler so you can do that as well for now I'm using the same name everything is same so I can use this thing cool now let's go to tab bar B render from IOS cool here again we need to have this I shell tab bar appearance trackers implementation so for this we'll do the similar thing we'll create a class here and let's let's call it same we have bad shell Bottom never okay let's do the similar approach so we'll say bad shell tab bar appearance tracker okay and we need to implement this or we can use the default implementation as parent class for our class that is shell tab bar appearance tracker like this great now ins inside this we need to override a method and that method is update layout so this is the method we need to do in this after calling this base update layout controller we need to get the menu item for which we want to add that badge so let's go to the Android and let's copy this line con int card tab bar item Index this is the first index and now we will get our card tab bar item or let's say card tab bar item like this and this we can get from controller dot on controller we have tab bar and on tab bar we have items collection okay and on these items this is a label so let's use this and from this we'll use card tabar item index like this now we have this card tab bar item here we'll first check to be sure the scard tab bar item is not null then do something and that something is to bind up the the badge functionality okay so we'll use the similar approach we'll have a method here private void let's say update back we'll use in count and here we'll check okay we need to get this thing so let's have this here so we'll say private and this is of type UI tab bar item so we'll say card tab bar item like this and we'll use it here here when we are doing this and first so this update layout this is again going to be executed multiple times so we just need to check if we don't already have value for this so we'll say if this C T Bar item is null then only execute this further code we have the index we have access to this C tabar item so now this should be this card T item like this and like this and after this we'll use same this update badge with zero this is the default and here in update badge first thing we'll check if we have value for this so this if this is not null then do something and that something is going to be if this count is less than equals zero then we don't want that badge and if this count is greater than zero then we need that badge to be displayed here so for this displaying the badge what we can do on this card tab bar item we have a property which is B value which is a string property so we can set it count. two string like this and then we can set the color for this so this is badge color and here we'll say the same thing colors do Red Dot to platform like this let's add the name space and we are good there is no set visible property set visible method here so instead of set visible what we can do to hide the badge if the value is less than equals zero we can set it to null so if badge value is null iOS is not going to display the badge great this is fine this is fine for the first time now we also need to have that Dynamic thing so we'll say B service do count change do plus equals on count changed same thing and let's implement this method or maybe let's copy the method from the earlier implementation this is going to be same there is no change in this like this and same thing for dispose we can use this to dispose it so everything looks fine now let's give it a try uh before that let's use this from here this tab bar shall render tab bar B render we need to return our implementation which is this let's run it we are on iPhone cool okay app is here let's try it out and boom we have this value let's keep on decreasing and boom after zero we cannot see that if it is greater than zero then we are going to see that now let's go here clear this it got cleared so everything works same let's try it out on Android one more time so that we'll be sure that nothing is breaking i p come up okay and it works and cool it works same Clear great everything still works fine so this is how we can Implement custom uh tab bar badges for our do Maui app so please like this video share share this video subscribe my channel and do let me know in the comment if you are already aware or familiar with this approach or what do you think about this approach okay so I'll be back soon with some other video till then bye-bye

Channel: Abhay Prince

Views: 1,675

Keywords:

Id: XSg_Fa4ThRM

Length: 42min 15sec (2535 seconds)

Published: Sun Oct 01 2023