locked
Custom renderer for Android for Tabbed Page RRS feed

  • Question

  • User223656 posted

    I need Tabbed page's custom renderer for Android. I found the working solution for IOS but dont know how to translate it for Android

    using AdvancedForms.iOS; using System; using System.Collections.Generic; using System.Text; using UIKit; using Xamarin.Forms; using Xamarin.Forms.Platform.iOS;

    [assembly: ExportRenderer(typeof(TabbedPage), typeof(TabbedPageRenderer))] namespace AdvancedForms.iOS { public class TabbedPageRenderer : TabbedRenderer { protected override void OnElementChanged(VisualElementChangedEventArgs e) { base.OnElementChanged(e);

            TabBar.TintColor = UIColor.Red;
            TabBar.BarTintColor = UIColor.Black;
            TabBar.BackgroundColor = UIColor.Gray;
        }
    }
    

    }

    Wednesday, July 27, 2016 7:22 PM

Answers

  • User223656 posted

    @Shamnad thanx custom renderer found for Tabbed page and it really worked like a charm Thank u v v much :) ///////////////////////////////// Custom Tab Page Renderer for Android //////////////////////////////////// using Xamarin.Forms; using AdvancedForms.Droid.CustomRenderer; using Xamarin.Forms.Platform.Android; using Android.Graphics.Drawables; using Android.App; using UIKit; using System; using Android.Graphics; using Android.Widget;

    [assembly: ExportRenderer(typeof(TabbedPage), typeof(CustomTab))] namespace AdvancedForms.Droid.CustomRenderer { public class CustomTab : TabbedRenderer {

        private Activity activity;
        private TabbedPage _tabbedPage;
        private const string COLOR = "#00796B";
    
        protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e)
        {
            base.OnElementChanged(e);
            activity = this.Context as Activity;
    
            _tabbedPage = e.NewElement as TabbedPage;          
    
    
        }
    
        protected override void DispatchDraw(Canvas canvas)
        {
    
            ActionBar actionBar = activity.ActionBar;
    
    
            if (actionBar.TabCount > 0)
            {
                ColorDrawable colorDrawable = new ColorDrawable(global::Android.Graphics.Color.ParseColor(COLOR));
                actionBar.SetStackedBackgroundDrawable(colorDrawable);
                ActionBarTabsSetup(actionBar);
    
            }
    
            base.DispatchDraw(canvas);
        }
    
        private void ActionBarTabsSetup(ActionBar actionBar)
        {
            try
            {
                //_tabbedPage.Children[0].IC
                for (int i = 0; i < actionBar.TabCount; i++)
                {
                    Android.App.ActionBar.Tab dashboardTab = actionBar.GetTabAt(i);
                    if (TabIsEmpty(dashboardTab))
                    {
    
                        int id = Resources.GetIdentifier(_tabbedPage.Children[i].Icon.File, "drawable", Context.PackageName);
                        TabSetup(dashboardTab, id);
                    }
    
                }
    
            }
            catch (Exception)
            {
    
            }
    
        }
    
        private bool TabIsEmpty(ActionBar.Tab tab)
        {
            if (tab != null)
                if (tab.CustomView == null)
                    return true;
            return false;
        }
    
        private void TabSetup(ActionBar.Tab tab, int resourceID)
        {
            ImageView iv = new ImageView(activity);
            iv.SetImageResource(resourceID);
            iv.SetPadding(0, 10, 0, 0);
    
            tab.SetCustomView(iv);
        }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    }
    

    } /////////////////////////////////

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Tuesday, September 6, 2016 7:35 AM

All replies

  • User50092 posted

    hello @MuabasherIkram i think you can find some resources from this link https://forums.xamarin.com/discussion/comment/151236/#Comment_151236 also you can figure it out using this link https://github.com/xamarin/Xamarin.Forms/blob/master/Xamarin.Forms.Platform.Android/AppCompat/TabbedPageRenderer.cs let me know your result after the workaround :smile:

    Thursday, July 28, 2016 7:01 AM
  • User223656 posted

    @Shamnad thanx custom renderer found for Tabbed page and it really worked like a charm Thank u v v much :) ///////////////////////////////// Custom Tab Page Renderer for Android //////////////////////////////////// using Xamarin.Forms; using AdvancedForms.Droid.CustomRenderer; using Xamarin.Forms.Platform.Android; using Android.Graphics.Drawables; using Android.App; using UIKit; using System; using Android.Graphics; using Android.Widget;

    [assembly: ExportRenderer(typeof(TabbedPage), typeof(CustomTab))] namespace AdvancedForms.Droid.CustomRenderer { public class CustomTab : TabbedRenderer {

        private Activity activity;
        private TabbedPage _tabbedPage;
        private const string COLOR = "#00796B";
    
        protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e)
        {
            base.OnElementChanged(e);
            activity = this.Context as Activity;
    
            _tabbedPage = e.NewElement as TabbedPage;          
    
    
        }
    
        protected override void DispatchDraw(Canvas canvas)
        {
    
            ActionBar actionBar = activity.ActionBar;
    
    
            if (actionBar.TabCount > 0)
            {
                ColorDrawable colorDrawable = new ColorDrawable(global::Android.Graphics.Color.ParseColor(COLOR));
                actionBar.SetStackedBackgroundDrawable(colorDrawable);
                ActionBarTabsSetup(actionBar);
    
            }
    
            base.DispatchDraw(canvas);
        }
    
        private void ActionBarTabsSetup(ActionBar actionBar)
        {
            try
            {
                //_tabbedPage.Children[0].IC
                for (int i = 0; i < actionBar.TabCount; i++)
                {
                    Android.App.ActionBar.Tab dashboardTab = actionBar.GetTabAt(i);
                    if (TabIsEmpty(dashboardTab))
                    {
    
                        int id = Resources.GetIdentifier(_tabbedPage.Children[i].Icon.File, "drawable", Context.PackageName);
                        TabSetup(dashboardTab, id);
                    }
    
                }
    
            }
            catch (Exception)
            {
    
            }
    
        }
    
        private bool TabIsEmpty(ActionBar.Tab tab)
        {
            if (tab != null)
                if (tab.CustomView == null)
                    return true;
            return false;
        }
    
        private void TabSetup(ActionBar.Tab tab, int resourceID)
        {
            ImageView iv = new ImageView(activity);
            iv.SetImageResource(resourceID);
            iv.SetPadding(0, 10, 0, 0);
    
            tab.SetCustomView(iv);
        }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    }
    

    } /////////////////////////////////

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Tuesday, September 6, 2016 7:35 AM
  • User297645 posted

    Hello everyone,

    I need to change the color of my tabs.. I tried the above code but nothing seams to happen. I am new to Xamarin as well. Please help. After adding the above code in my droid project TabPageRenderer.cs , what else I need to do ? Please help

    I just need to change the background color of tabbed pages :(

    Thursday, February 16, 2017 10:48 AM
  • User294986 posted

    I am using the following code. But i have an error in this line "ActionBar actionBar = activity.ActionBar;.". Here I got actionbar is null value. What i do? Am i missing anything??

    @mubi said: @Shamnad thanx custom renderer found for Tabbed page and it really worked like a charm Thank u v v much :) ///////////////////////////////// Custom Tab Page Renderer for Android //////////////////////////////////// using Xamarin.Forms; using AdvancedForms.Droid.CustomRenderer; using Xamarin.Forms.Platform.Android; using Android.Graphics.Drawables; using Android.App; using UIKit; using System; using Android.Graphics; using Android.Widget;

    [assembly: ExportRenderer(typeof(TabbedPage), typeof(CustomTab))] namespace AdvancedForms.Droid.CustomRenderer { public class CustomTab : TabbedRenderer {

        private Activity activity;
        private TabbedPage _tabbedPage;
        private const string COLOR = "#00796B";
    
        protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e)
        {
            base.OnElementChanged(e);
            activity = this.Context as Activity;
    
            _tabbedPage = e.NewElement as TabbedPage;          
    
    
        }
    
        protected override void DispatchDraw(Canvas canvas)
        {
    
            ActionBar actionBar = activity.ActionBar;
    
    
            if (actionBar.TabCount > 0)
            {
                ColorDrawable colorDrawable = new ColorDrawable(global::Android.Graphics.Color.ParseColor(COLOR));
                actionBar.SetStackedBackgroundDrawable(colorDrawable);
                ActionBarTabsSetup(actionBar);
    
            }
    
            base.DispatchDraw(canvas);
        }
    
        private void ActionBarTabsSetup(ActionBar actionBar)
        {
            try
            {
                //_tabbedPage.Children[0].IC
                for (int i = 0; i < actionBar.TabCount; i++)
                {
                    Android.App.ActionBar.Tab dashboardTab = actionBar.GetTabAt(i);
                    if (TabIsEmpty(dashboardTab))
                    {
    
                        int id = Resources.GetIdentifier(_tabbedPage.Children[i].Icon.File, "drawable", Context.PackageName);
                        TabSetup(dashboardTab, id);
                    }
    
                }
    
            }
            catch (Exception)
            {
    
            }
    
        }
    
        private bool TabIsEmpty(ActionBar.Tab tab)
        {
            if (tab != null)
                if (tab.CustomView == null)
                    return true;
            return false;
        }
    
        private void TabSetup(ActionBar.Tab tab, int resourceID)
        {
            ImageView iv = new ImageView(activity);
            iv.SetImageResource(resourceID);
            iv.SetPadding(0, 10, 0, 0);
    
            tab.SetCustomView(iv);
        }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    }
    

    } /////////////////////////////////

    Monday, February 20, 2017 12:35 PM
  • User223656 posted

    @"Jenitha.2420" its possible that your page is not a navigation page ???

    Friday, February 24, 2017 10:07 AM
  • User294986 posted

    this code is not working for me that navigation page or not. now i have fixed using folowing url:

    http://stackoverflow.com/questions/30904138/how-to-change-the-new-tablayout-indicator-color-and-height

    Friday, February 24, 2017 11:08 AM
  • User301328 posted

    Hi I am using FormsAppCompatActivity in my mainactivity while using above code it always give error actionBar is always null

    Any suggestions ??????

    Tuesday, July 18, 2017 6:10 AM
  • User301328 posted

    Please use the following code if you are using FormsAppCompatActivity

    using Android.Runtime; using Android.Support.Design.Widget; using Android.Views; using Xamarin.Forms; using Xamarin.Forms.Platform.Android; using Xamarin.Forms.Platform.Android.AppCompat; using VendorPortal.Droid;

    [assembly: ExportRenderer(typeof(TabbedPage), typeof(ExtendedTabbedPageRenderer))] namespace VendorPortal.Droid { public class ExtendedTabbedPageRenderer : TabbedPageRenderer { protected override void OnVisibilityChanged(Android.Views.View changedView, [GeneratedEnum] ViewStates visibility) { base.OnVisibilityChanged(changedView, visibility);

            if (visibility == ViewStates.Visible)
            {
                var tabs = changedView.FindViewById<TabLayout>(Resource.Id.sliding_tabs);
                tabs.SetBackgroundColor(Android.Graphics.Color.Yellow);
                tabs.SetTabTextColors(Android.Graphics.Color.Blue, Android.Graphics.Color.Red);
                tabs.SetSelectedTabIndicatorColor(Android.Graphics.Color.Black);
    
    
    
                //////
    
                ViewGroup vg = (ViewGroup)tabs.GetChildAt(0);
                int tabsCount = vg.ChildCount;
                for (int j = 0; j < tabsCount; j++)
                {
                    ViewGroup vgTab = (ViewGroup)vg.GetChildAt(j);
                    int tabChildsCount = vgTab.ChildCount;
                    for (int i = 0; i < tabChildsCount; i++)
                    {
                        Android.Views.View tabViewChild = vgTab.GetChildAt(i);
                        if (tabViewChild is Android.Widget.TextView)
                        {
                            var f = Font.OfSize("DroidKufi-Regular.ttf#DroidArabicKufi", 14);
                            var tf = FontExtensions.ToTypeface(f);
                            ((Android.Widget.TextView)tabViewChild).SetTypeface(tf, Android.Graphics.TypefaceStyle.Normal);
                        }
                    }
                }
    
    
    
                /////
                //var gradient = new MyGradient();
                //tabs.SetBackground(gradient);
            }
        }
    
    }
    

    }

    Tuesday, July 18, 2017 9:55 AM
  • User278535 posted

    Thank you @abdulbasitnawab this worked perfectly.

    Tuesday, April 17, 2018 8:38 PM
  • User336891 posted

    For Custom tab view/page i am using the xam.Tabview (Xamarin.Forms) Component and it's working as expected. It has the support for custom header and content view. We can place the tabview any parent view (like stacklayout,grid..etc).

    Install Nuget: TabView Nuget

    Sample: Tabview Sample

    Wednesday, August 28, 2019 2:45 PM