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 renderer for Android for Tabbed Page

mubimubi USMember ✭✭✭

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;
    }
}

}

Best Answer

Answers

  • ShamnadShamnad USMember ✭✭✭
    edited July 2016

    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:

  • DarshanSDarshanS USMember ✭✭

    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 :(

  • Jenitha.2420Jenitha.2420 USMember ✭✭

    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);
        }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    }
    

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

  • mubimubi USMember ✭✭✭

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

  • Jenitha.2420Jenitha.2420 USMember ✭✭

    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

  • abdulbasitnawababdulbasitnawab USMember ✭✭

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

    Any suggestions ??????

  • abdulbasitnawababdulbasitnawab USMember ✭✭

    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);
            }
        }
    
    }
    

    }

  • ZaneCampbellZaneCampbell USMember ✭✭

    Thank you @abdulbasitnawab this worked perfectly.

  • Rajesh_AngappanRajesh_Angappan INMember ✭✭

    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

Sign In or Register to comment.