Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

Custom Tabbed Page with plus Button on Xamarin forms Android

MasterOfXamarinMasterOfXamarin Member ✭✭✭

Hi, I am struggling with a problem I have made custom Tabbed page on Ios

 public class CustomTabbedRenderer : TabbedRenderer
    {
        public ILogService LogService => DependencyService.Get<ILogService>();

        public override void ViewWillAppear(bool animated)
        {
            base.ViewWillAppear(animated);

            var vcs = ViewControllers;

            foreach (UIViewController vc in vcs)
            {
                if (vc.TabBarItem.Image != null)
                {
                    vc.TabBarItem.Image = vc.TabBarItem.Image.ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal);
                }
                if (vc.TabBarItem.SelectedImage != null)
                {
                    // Comment this if you don't want to change the selected image's color
                    vc.TabBarItem.SelectedImage = vc.TabBarItem.SelectedImage.ImageWithRenderingMode(UIImageRenderingMode.Automatic);
                }
            }
        }

        protected override async void OnElementChanged(VisualElementChangedEventArgs e)
        {
            try
            {
                base.OnElementChanged(e);

                if (e.NewElement != null)
                {
                    ShouldSelectViewController += (tabBarController, viewController) =>
                    {
                        //TODO check if it works on iphone properly
                        if (tabBarController.ViewControllers.ToList().IndexOf(viewController) != 2)
                        {
                            return true;
                        }

                        if (CreateMeetingPage.HowMany >= 1)
                        {
                            return false;
                        }

                        ((NavigationPanel)e.NewElement).PresentModalPage();
                        return false;
                    };
                }
            }
            catch (Exception ex)
            {
                await LogService.LogAsync(ex, LogLevel.Exception, true);
            }
        }

        public override void ViewDidLayoutSubviews()
        {
            base.ViewDidLayoutSubviews();

            if (Element is TabbedPage)
            {
                if (TabBar?.Items != null)
                {
                    //6, 7, 8 resolution is 1334 and "Plus" version has 2208 
                    if(DeviceSettings.Height > 1334 && DeviceSettings.Height != 2208)
                    {
                        TabBar.Items[2].ImageInsets = new UIEdgeInsets(70, 50, 45, 50);
                    }
                    else
                    {
                        TabBar.Items[2].ImageInsets = new UIEdgeInsets(60, 50, 45, 50);
                    }                       
                }
            }

        }
    }


It looks like this
I have been working with android, but I cant get the results

This is my custom control on Android

    public class CustomTabbedRenderer : TabbedPageRenderer, BottomNavigationView.IOnNavigationItemSelectedListener
    {
        public ILogService LogService => DependencyService.Get<ILogService>();

        TabLayout layout;

        public CustomTabbedRenderer(Context context) : base(context)
        {
        }   

        /// <summary>
        /// In this logic we change a behaviour of Tabbed page, and on click "plus" button we have new page to create something like in (Instagram, LinkedIn)
        /// </summary>
        /// <param name="e"></param>
        protected override async void OnElementChanged(ElementChangedEventArgs<TabbedPage> e)
        {
            try
            {
                base.OnElementChanged(e);

                if (e.OldElement != null || e.NewElement == null)
                {
                    return;
                }

                for (int i = 0; i <= this.ViewGroup.ChildCount - 1; i++)
                {
                    var childView = this.ViewGroup.GetChildAt(i);
                    if (!(childView is ViewGroup viewGroup))
                    {
                        continue;
                    }

                    for (int j = 0; j <= viewGroup.ChildCount - 1; j++)
                    {
                        var childRelativeLayoutView = viewGroup.GetChildAt(j);
                        if (!(childRelativeLayoutView is BottomNavigationView bottomNavigationView))
                        {
                            continue;
                        }

                        //Make icons  colorful

                        //if (childRelativeLayoutView is BottomNavigationView)
                        //{
                        //    ((BottomNavigationView)childRelativeLayoutView).ItemIconTintList = null;
                        //}

                        bottomNavigationView.NavigationItemSelected += (sender, args) =>
                    {
                        switch (args.Item.ItemId)
                        {
                            case 2: //middle button make new page occurs
                                    if (CreateMeetingPage.HowMany == 1) break;
                                ((NavigationPanel)e.NewElement).PresentModalPage();

                                args.Handled = false;
                                break;

                            default:
                                e.NewElement.CurrentPage = e.NewElement.Children[args.Item.ItemId];
                                args.Handled = true;
                                var icon = args.Item;

                                break;
                        }
                    };
                    }
                }
            }
            catch (Exception ex)
            {
                await LogService.LogAsync(ex, LogLevel.Exception, true);
            }
        }      
    }

What I need to get, firstly, I dont know how to get this big colorful plus in the center, and second I want to still change color on click od other children. Eventually I need to make the text a little bit smaller than it is now. Thanks for your time

This is what I have now on android

And this is my tab which I want to edit

public NavigationPanel()
        {           
            InitializeComponent();
            this.On<Xamarin.Forms.PlatformConfiguration.Android>().SetIsSwipePagingEnabled(false);
            MessagingCenter.Subscribe<App>(this, "GoToMainMethod", sender => GoToMainChild());
        }

        public void PresentModalPage()
        {
            Navigation.PushModalAsync(new CreateMeetingPage());
        }
        private void GoToMainChild()
        {
            this.CurrentPage = Children[0];
        }

Answers

Sign In or Register to comment.