How to Fix Tabbar Icon Size Issue on iOS .NET MAUI (Issue Fixed)

hey guys I'm back with another video and in this video we are going to fix one error one issue basically which we got when we work with the tab bar in uh app shell in.net Maui project for iOS so I have this project let me show you first what the issue is so I have simply created a.net Maui project I have not done anything I simply move to app shell and it was in this state so I am going to first create a tab bar here so I'll simply add a tab bar and I'm going to repeat this item for two or three times let's have two times only so right now there are no images no icons everything will work fine but now let's introduce icons right now I do not have any image added so in the resources there will be only the default image which is this dotnet underscore bot dot SVG so let's add this image so we'll say dotnet underscore bot and the same thing I'll copy for this second one and the route let's change it to main page 1 and main page 2. and title let's say home and this is home 2. that's all so first let's see it on Android how it looks on Android on Android this tab bar everything works fine on Android Android platform is able to identify the size and resize the image to fit in the tab bar but on iOS that's not the case so I'll show you just let me pull up the Android emulator so app is here and we can see the tab bar items completely fine everything looks fine on Android now let's see it on iPhone IOS so I'm selecting iPhone let me run it so this is on iPhone so you see we have these ugly images these are not getting fit inside the tab bar so that's the issue on iPhone so one first the best approach could be to use these icons or images uh small in size the dimensions basically 24 30 32 so whatever size fits your tab bar you can try that thing so most of in most of the cases we use icons for this so those icons uh we may be customly built by some designer or maybe we download from font or some more and box icons I am using recently so I Black Box icons so from there we can download the actual size we can reduce the size or if you have these bigger images you can maybe search for an online image resizer from there also you can do but what if you do not have control over all these items maybe your application this is rendering these items these tab bar icons dynamically maybe you have some admin panel on the web from there you can uh manage the these tab bar items and the icons for them so these are going to be dynamic on the basis of maybe user rules so in those particular cases you do not have control over the size of these images although you can ask the backend team or maybe if you are working on the back end team you can simply display some help text there that the icon should be of this size but we should prepare for the worst case scenarios so enough talking how can we fix this and yeah if you want to know how can we dynamically render these app shell items maybe we can introduce some API and from there we can uh reduce or increase or decrease the number of tab bar items we can provide Dynamic images and all these if you want to know more about that do let me know in the comment I will plan a dedicated video for this that how can we dynamically generate these tab bar items cool so for this on Android it works fine on iPhone it does not work fine so there is no common way we need to work on platform specific code for this so how can we do this for this we need to use uh Maui handlers shell handlers so for this first thing let's go to Maui program in here we can configure handlers configure Maui handlers like this okay it takes a Handler collection we can do this and then we can say add Handler and then we can Define the type and then renderer of this type so this is this tab bar is a part of shell so we need to provide shell as a type and then we should Define a type rendered okay so this is the thing we will create customly and that will go to the uh platform specific thing so we are not modifying any other platform so it will only go to the iOS folder and in here we can create a new file so what we'll do we'll create a new class and let's call it custom shell Handler like this okay then let's copy this and we'll add it to the my program where we are registering this shell this Handler so here we will say custom shell Handler or maybe let's change it to the renderer the name should be renderer because if we check the type but the name does not matter you can name it whatever you want so first thing we need this only for iOS so we'll simply add this directives if iOS if this is IOS then only you should do this and let's change this Target to iOS cool and this custom shell Handler this is not going to work because it should be a subtype of I shall Handler one so for this what we will do on custom shell Handler it should be derived from shell renderer uh like this shell renderer now that app should go away custom shell Handler right it should be custom shell Handler and if it should be and if and this thing let's change this to here like this so that it gets executed only on iOS cool so this part is done now we'll work on this custom shell Handler or let's rename it to renderer that would make more sensor and renderer cool copy rename the file okay [Music] um rename the file and then rename this class name as well cool okay we don't need this Constructor and from here now we will dive into the actual position where we need to change our code so for this we are going to override a method that will come from Shell renderer and that is going to be create tab bar appearance tracker so that is a part of tab bar those icons are part of a tab bar so we are going to override this method create tab bar appearance tracker and now we need to return one implementation of this I shell tab bar appearance tracker so we need to provide a our custom implementation to this interface so for this what we can do we can create a class here so public class and here we will say custom and then copy everything custom shell tab bar appearance tracker and we will implement this interface so let's do this Implement interface now we have these many uh methods which are coming from a this parent or this sorry this interface so first let me comment out everything [Music] cool now we need to work on this update layout method this is the method we can use to modify the contents of our tab bar so for this what we'll do first because those items those images all those can be dynamic so first we need to get access to those how can we do that we have controller this UI tab bar controller so we can have access to all the tab bar items from here so controller dot tab bar we have this property here and on this tab bar we have this items property now we can modify everything on this so here what we'll do we'll check we'll apply a forage here we'll say let's say tab bar item in this tab bar items now it can be it can be null so it is better to check for null first so maybe you can add that condition if you want hmm after that insert this tab bar item we can have access to this tab bar and here we can set so many things so first we have access to this image this is that image the icon basically then we should have access to other things as well but we just need to work on this image only so now we have two different approaches first approach is we can simply get this image and we can try to resize it how we can simply generate a new image here what I mean is New Image or maybe not new image we have one more property image inset or something like this let me try image instance image inserts yes this image inserts and then you can provide this UI Edge inserts I tried this but it to work with this it's very tough to work with this we need to keep on trying different different values then sometimes it may work or maybe for other device size it may not work I'm not sure if you have worked with this do let me know in the comment if it worked for you it will work but we need to play around with these values so these are kind of spacing I think from the all the four sides but that is not what we want in our case in our case we want to specify the height and width of our image so for this what we will do we will use something which is called UI graphics okay so we will actually re-render this image which we have as a part of this icon we will re-render this image in a different context with that new size okay what I mean is so here what we will do first we'll say UI Graphics dot begin image context with options and in this options first is this size which comes from core Graphics CG size so here we'll Define a size equals let me add using core graphics using Code graphics and here we can say where size equals new c g size 4 graphic size and here we can see we have width and height so in this case let's take 24 and 24 so this is the final output which we want so we can use this size to resize our temper icon cool this is the size we are going to use so in this begin image context with options so we are going to use size after that we have this opaque you can set it to false and then scale let's set it zero fine after this now we need to draw that image so how can we draw that image for this we can say first let's get access to the previous image so let's say image or we'll call it preview image previous image like this can we get the image if we pass the UI image directly CG image coder CD image let's try if we can get access to this using Tabby item dot image would it work no okay so let's do this okay so preview image equals tab bar image dot image after this what we'll do we will say priv image Dot and now we'll say draw we are going to draw this previous image to new sorry CG react so this is a rectangle we are going to use with if we check the constructors we have location and then we have size so location is going to be new CG point so we are going to start it from 0 0 and the size we are going to give the actual size which we have now this image is going to be drawn after this what we'll do we will get the new image from this context before that we can say resized image equals now we can say UI Graphics Dot get image from current image context like this after this we need to dispose this uh this image context so we need to close this so for this we'll say UI graphics Dot and image context like this and after this we'll simply access our tab bar item dot image equals we'll set it resized image like this and now everything is fine that's all what we need to do now let's try it I'm running it on iPhone and it did not work let's try so maybe this is the same image let's try to get a copy of this but it returns the return type is NS object so we'll say as UI image um okay and now let's see if it works so stop everything and rerun and it again into work and can you uh did you figure out what the issue is if you figured out what the issue is do let me know in the comment and I'll tell you what the issue is we are using this thing but we have not added this here so we are not using it actually we are making these code changes but we are not using it so we need to use it like this so from this custom shell renderer from this create tab bar appearance tracker we need to return the implementation this implementation custom shell bar shell tab bar appearance tracker that we are returning now and now we are using this piece of code so this copy is fine we should use copy now let's rerun hopefully it works this time what what happened what is this and looks like there is some error what is this UI image notes they show if you go it stops so looks like there is some error let's see what the error is um system dot invalid operation exception type does not conform to NS copying and a subject dot copy I just don't know what it is if you guys know if you guys are familiar with Swift and all this code do let me know in the comment what the issue is here but what we can try let's use the image directly without copying let's run it again and hopefully this works this time if not then we need to somehow find a way to copy that image object to a new object let's see first if it works and boom you see it to work this time so now these icons are in place with the new height and width what we have provided from here you can try changing these height and weights as per your tab bar requirement cool so this is how we can fix the tab bar icon image sizing issue on iPhone okay so let me quickly walk you through again what all changes we have done so this is specific to iPhone IOS so we just need to work on iOS specific code so for that what we used in our Maui program let us stop it so we need to work on Maui handlers so in here in Maui program we simply added this configure Maui Handler here we said H dot add Handler this shell this is the because the tab bar is a part of shell so shell and the second type parameter this is going to be the implementation which we want to provide to modify the appearance so this custom shell renderer we have created this inside our iOS project so here we created this custom shell renderer which must be a subclass of shell renderer and here we are overriding one method which is create tab bar appearance tracker and from this we need to return an implementation of I shell tab bar appearance tracker so we simply created a new class here in which we implement this eye shadow tab bar appearance tracker so it has bunch of methods which we need to provide body for but we are not concerned with all these methods we are just concerned about this update layout method so for this update layout method we need to provide our own body and for that we have access to this controller this UI tab bar controller and from this controller we can get access to all the tab bar items so here we are looping through all the tab bar items using controller dot tab bar dot items and from there we are getting access to the current tab bar image after that all this stuff we are actually redrawing regenerating this image now in our different context that resize image so we first defined the size which is this CG size core graphic size 24 bit 24 height and then we started our context within this size and then we simply draw this image this previous image we got this image and we draw this image inside this context we are starting from 0 0 and we draw this image for this width and height which is the size after that we simply got access to the resized image the new image which draw on this context we are getting this image using UI Graphics dot get image from current image context then we simply dispose this image context using UI Graphics dot add and image context now we have this resized image so we are simply modifying tab bar item dot image to this resized image and that is all what we need to do cool so that's all for this video do like this video share this video subscribe my channel I'll be back soon with some other video till then bye

Channel: Abhay Prince

Views: 1,279

Keywords:

Id: YoH6jQRAmok

Length: 23min 7sec (1387 seconds)

Published: Tue Sep 12 2023