Forum Xamarin.Forms

How to change the size and position of icons in Xamarin Shell Tabbar

jojo1234jojo1234 Member ✭✭
edited November 2019 in Xamarin.Forms

I'm pretty new to Xamarin Shell and I would like to change the size and position of the icons in my TabBar.
I'd want to increase the size a little bit and move the icons to the center vertically like so;
How would I achieve this?

<!--BluePill Pages-->
<TabBar Style="{StaticResource FreeStyle}">
    <!--TeleMED Tab-->
    <Tab Icon="telemedicineIcon.png">
        <ShellContent ContentTemplate="{DataTemplate views:TelemedicineMainPage}"/>
    </Tab>

    <!--FlemingTab-->
    <Tab Icon="chatbotIcon.png">
        <ShellContent ContentTemplate="{DataTemplate views:ChatbotPage}"/>
    </Tab>

    <!--FirstAid Tab-->
    <Tab Icon="firstaidIcon.png">
        <ShellContent ContentTemplate="{DataTemplate views:FirstAidPage}"/>
    </Tab>

    <!--User Profile Tab-->
    <Tab Icon="profileIcon.png">
        <ShellContent ContentTemplate="{DataTemplate views:UserProfilePage}"/>
    </Tab>
</TabBar>
Tagged:

Answers

  • ColeXColeX Member, Xamarin Team Xamurai
    edited November 2019

    Here is an excellent article for customizing tabbar in xamarin shell project , you could create you own layout and replace the default one in Custom renderer .

    Key code

    public override AView OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
    {
        base.OnCreateView(inflater, container, savedInstanceState);
    
        _outerLayout = inflater.Inflate(Resource.Layout.BottomTabLayout, null);
        _bottomView = _outerLayout.FindViewById<BottomNavigationView>(Resource.Id.bottomtab_tabbar);
        _navigationArea = _outerLayout.FindViewById<FrameLayout>(Resource.Id.bottomtab_navarea);
    
        // ... omitted code ..
    }
    
  • jojo1234jojo1234 Member ✭✭

    What of iOS? is there an implementation of this for iOS?

  • ColeXColeX Member, Xamarin Team Xamurai
    edited November 2019

    Please check the simple solution with help of Custom renderer , it both works for iOS and Android .

    iOS

    [assembly: ExportRenderer(typeof(AppShell), typeof(MyShellRenderer))]
    namespace App30.iOS
    {
        public class MyShellRenderer : ShellRenderer
        {
            protected override IShellSectionRenderer CreateShellSectionRenderer(ShellSection shellSection)
            {
                var renderer = base.CreateShellSectionRenderer(shellSection);
                if (renderer != null)
                {
    
                }
                return renderer;
            }
    
            protected override IShellTabBarAppearanceTracker CreateTabBarAppearanceTracker()
            {
                return new CustomTabbarAppearance();
            }
        }
    
        public class CustomTabbarAppearance : IShellTabBarAppearanceTracker
        {
            public void Dispose()
            {
    
            }
    
            public void ResetAppearance(UITabBarController controller)
            {
    
            }
    
            public void SetAppearance(UITabBarController controller, ShellAppearance appearance)
            {
                UITabBar myTabBar = controller.TabBar;
    
                if (myTabBar.Items != null)
                {
                    UITabBarItem itemOne = myTabBar.Items[0];
    
                    itemOne.Image = UIImage.FromBundle("tab_about.png");
                    itemOne.SelectedImage = UIImage.FromBundle("tab_feed.png");
    
    
                    UITabBarItem itemTwo = myTabBar.Items[1];
    
                    itemTwo.Image = UIImage.FromBundle("tab_feed.png");
                    itemTwo.SelectedImage = UIImage.FromBundle("tab_about.png");
    
                    //The same logic if you have itemThree, itemFour....
                }
    
            }
    
            public void UpdateLayout(UITabBarController controller)
            {
    
            }
        }
    }
    

    Android

    [assembly: ExportRenderer(typeof(AppShell), typeof(MyShellRenderer))]
    namespace App30.Droid
    {
        public class MyShellRenderer : ShellRenderer
        {
            public MyShellRenderer(Context context) : base(context)
            {
            }
    
            protected override IShellBottomNavViewAppearanceTracker CreateBottomNavViewAppearanceTracker(ShellItem shellItem)
            {
                return new CustomBottomNavAppearance();
            }
        }
    
        public class CustomBottomNavAppearance : IShellBottomNavViewAppearanceTracker
        {
            public void Dispose()
            {
    
            }
    
            public void ResetAppearance(BottomNavigationView bottomView)
            {
    
            }
    
            public void SetAppearance(BottomNavigationView bottomView, ShellAppearance appearance)
            {
                IMenu myMenu = bottomView.Menu;
    
                IMenuItem myItemOne = myMenu.GetItem(0);
    
                if (myItemOne.IsChecked)
                {
                    myItemOne.SetIcon(Resource.Drawable.tab_about);
                }
                else
                {
                    myItemOne.SetIcon(Resource.Drawable.tab_feed);
                }
    
                //The same logic if you have myItemTwo, myItemThree....
    
            }
        }
    }
    
Sign In or Register to comment.