TabbedPage TabBar background color/tint

DanDeBiltDanDeBilt USMember, University ✭✭

How would I accomplish tinting the tab bar of a TabbedPage in Xamarin.Forms? The TabbedPage doesn't seem to expose a property or method to set the tint directly.

Every child page of my TabbedPage is a NavigationPage. Setting the "Tint" of the NavigationPage adjusts the nav bar, setting the "BackgroundColor" of those same NavigationPage children adjusts the tab bar in a very subtle way (seems to be a mix of the color I choose and some extreme opacity). This is on iOS specifically.

How can I set it to the actual color I am specifying for the BackgroundColor, so that I can have it match the nav bar Tint.

Posts

  • DanDeBiltDanDeBilt USMember, University ✭✭

    That fixed it, thank you!

  • DaleHubbardDaleHubbard USMember

    How could this be accomplished on Android?

  • crecre USUniversity ✭✭

    The code snippet above seems to work no longer in the current version.
    How is this to be done with the current xamarin.forms version?

  • RonaldKasperRonaldKasper ATMember ✭✭

    Sorry, but when I add the code to my solution, the "TabBar" can not be resolved. I think your code just covers a part of the whole development, right? What else do I need?
    Thank you!

  • haoxianhaoxian CNMember ✭✭

    @RonaldKasper‌
    have you added the namespace such as Xamarin.Forms.Platform.iOS, Xamarin.Forms, and you renderer class current namespace???

  • rmarinhormarinho PTMember, Insider, Beta Xamurai

    There's an effort on the Xamarin Forms Labs project to extend tab page control called ExtendedTabbedPage that exposes some color properties that could help you:

    https://github.com/XForms/Xamarin-Forms-Labs/blob/master/src/Xamarin.Forms.Labs/Xamarin.Forms.Labs/Controls/ExtendedTabbedPage.cs

  • AliRFarahnakAliRFarahnak DKMember ✭✭

    I cant get Swipe or Tint color to work on ExtendedTabbedPage?

  • David.6954David.6954 USUniversity ✭✭

    I cannot get swipe or tint to work either on ExtendedTabbedPage. Can someone please confirm that ExtendedTabbedPage.cs still works with the latest version of Xamarin/Xamarin Forms? Any information would be greatly appreciated. Thanks.

  • @David.6954 I'm seeing the same thing

  • MitchMilamMitchMilam USMember ✭✭✭

    @AliRFarahnak, @David.6954, @ErikAndersen.1430 ExtendedTabbedPage is only in v1.2.x for iOS at this time. What platforms are you guys using?

  • I'm targeting iOS. I don't have my computer by me at the moment, but I just subclassed ExtendedTabbedPage and put all of my code inside its constructor. Then I set it as my root view controller like so:

    window.RootViewController = new MyCustomExtendedTabbedPage().CreateViewController();

  • Actually, I forgot that I'm using the Xamarin.Forms 1.3 preview so that's probably why it isn't working.

  • Okay, so I confirmed that I'm using v1.2.3.6257 and is still not working. Here's my code:

    TabForm.xaml

    <?xml version="1.0" encoding="UTF-8"?>
    <controls:ExtendedTabbedPage xmlns="http://xamarin.com/schemas/2014/forms" 
                                         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
                                         xmlns:controls="clr-namespace:Xamarin.Forms.Labs.Controls;assembly=Xamarin.Forms.Labs"
                                         x:Class="MyProject.TabForm">
    </controls:ExtendedTabbedPage>
    

    TabForm.xaml.cs

    public partial class TabForm : ExtendedTabbedPage
    {   
        public TabForm ()
        {
            InitializeComponent ();
    
            Children.Add (new NavigationForm (new DirectoryForm ()));
            Children.Add (new NavigationForm (new AssignmentsForm ()));
    
            BarTintColor = Color.Black;
            TintColor = Color.Red;
        }
    }
    

    AppDelegate.m

    window.RootViewController = new TabForm ().CreateViewController();

    My NavigationForm is just a subclass of a NavigationPage. My DirectoryForm and AssignmentsForm are subclasses of ContentPage.

  • KimNieblingKimNiebling DKMember ✭✭

    Thanks Steve! Your example worked just fine.

    Any ideas on how to achieve the same thing using Custom Renderers in Android while retaining the ActionBar in the bottom (much like on iOS)?

  • KimNieblingKimNiebling DKMember ✭✭
    edited January 2015

    After further investigation, I unfortunately found that the code below in fact did not work.

    Apparently, my CustomRenderer was still applied, even though I did not use the implementation in my view.


    I gave it another shot, and found that the following worked just fine as well:

    var tabs = new TabbedPage() { BackgroundColor = Color.FromRgb(76, 108, 139) };

    No need to make custom renderers for applying a simple background color anymore, it'd seem.

  • NMackayNMackay GBInsider, University mod

    @SteveChadbourne

    Thanks for posting, works fine for me.

  • ShamnadShamnad USMember ✭✭✭
    edited May 2015

    hai friends i need to fill the tab view in the screen how cnn i do it in xamarin forms

    ` using System;
    using Xamarin.Forms;
    namespace Resturent_demo
    {
    public class Search : TabbedPage
    {
    public Search ()
    {
    this .Title="tabbedPage";
    this.ItemsSource = new NamedColor[] {
    new NamedColor ("Red",Color.Red),
    new NamedColor ("Yellow", Color.Yellow),
    new NamedColor ("Green", Color.Green),
    new NamedColor ("Aqua", Color.Aqua),
    new NamedColor ("Blue", Color.Blue),
    new NamedColor ("Purple", Color.Purple),

            };
            this.ItemTemplate = new DataTemplate (() => {
                return new NamedColorPage ();
            });
        }
    }
    // Data type:
    class NamedColor
    {
        public NamedColor(string name,Color color)
        {
            this.Name = name;
            this.Color = color;
        }
        public string Name{ private set; get;}
        public Color Color{ private set; get;}
        public override string ToString ()
        {
            return Name;
        }
    }
    // Format page
    class NamedColorPage : ContentPage
    {
        public NamedColorPage ()
        {
            // This binding is necessary to label the tabs in
            // the TabbedPage.
            this.SetBinding (ContentPage.TitleProperty, "Name");
            // BoxView to show the color.
            BoxView boxView = new BoxView {
                WidthRequest = 100,
                HeightRequest = 100,
                HorizontalOptions = LayoutOptions.FillAndExpand
            };
            boxView.SetBinding (BoxView.ColorProperty, "Color");
            // Build the page
            this.Content = boxView;
        }
    }`
    

    here is my code where should i place the property of the tabs such as color changing and fit for screen etc...

  • MiguelCervantesMiguelCervantes MXMember ✭✭✭

    Does ExtendedTabbedPage still live using Xamarin.forms 1.4+ ?

  • ShamnadShamnad USMember ✭✭✭

    sorry to asking like this again do you have any example ? MiguelCervante

  • MiguelCervantesMiguelCervantes MXMember ✭✭✭

    @shamnad I'm trying to set color to the tabbed bar

    public class MyFriendPage : ExtendedTabbedPage { public MyFriendPage() { TintColor = Color.FromHex("00806E"); BarTintColor = Color.FromHex("00806E"); Title = "Contacts"; Children.Add(MyFriendSearchPage()); //Content Page Children.Add(MyFriendList()); //Content Page } }
    But I can't see it working on Android, i'm using the latest version of Xamarin.Forms 1.4.0 and XLabs.Forms 2.0 any ideas?

  • ShamnadShamnad USMember ✭✭✭
    edited May 2015

    @MiguelCervantes iam new to xamrin Forms that's why i am asking like this, i cant't inherit Extended tabbedPage
    me also trying customize the tab view in xamarin Forms Or is it a class that you created in your program ? if that class is system defined which package would have to implement to my project

  • MiguelCervantesMiguelCervantes MXMember ✭✭✭
    edited May 2015

    I'm sorry dude @Shamnad , I missunderstood your question.

    In order to use Extended TabbedPage you need to download via nuGet the XLabs.Forms package, once downloaded simply add it to your Page:

    using XLabs.Forms.Controls;

    After that now you can inherit from ExtendedTabbedPage, using the sample code above:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;
    using Xamarin.Forms;
    using XLabs.Forms.Controls;
    
    public class MyFriendPage : ExtendedTabbedPage
    {
        public MyFriendPage()
        {
            TintColor = Color.FromHex("00806E"); /*Extended TabbedPage property*/
            BarTintColor = Color.FromHex("00806E"); /*Extended TabbedPage property*/
            Title = "Contacts";
            Children.Add(MyFriendSearchPage()); //Content Page 
            Children.Add(MyFriendList()); //Content Page
        }
    
        public Page MyFriendSearchPage()
        {
            var layout = new StackLayout
            {
                HorizontalOptions = LayoutOptions.FillAndExpand
            };
            var demoLabel = new Label
            {
                Text = "Search Friend"
            };
            layout.Children.Add(demoLabel);
            return new ContentPage()
            {
                Title = "Search Page", /*this is the tab text*/
                Content = layout
    
            };
        }
        public Page MyFriendList()
        {
            var layout = new StackLayout
            {
                HorizontalOptions = LayoutOptions.FillAndExpand
            };
            var demoLabel = new Label
            {
                Text = "Friend list content"
            };
            layout.Children.Add(demoLabel);
            return new ContentPage()
            {
                Title = "Friend list", /*this is the tab text*/
                Content = layout
            };
        }
    }
    

    Actually it works with tabbedPage without the extended properties, but I can't change the bar color with ExtendedTabbedPage that's why i'm asking if it still works. Hope this sample helps

  • ShamnadShamnad USMember ✭✭✭
  • David_PilkingtonDavid_Pilkington USUniversity

    @MiguelCervantes I am having the same issues. I extend the ExtendedTabbedPage and set the TintColor and the BarTintColor but nothing changes. Considering this was the main point of the control, it is a bit odd.

  • CTCHANGCTCHANG AUMember ✭✭

    @MichaelRidland said:
    There's two ways to do this.

    Via the Appearance which works globally.

    Or using a custom renderer.

    [assembly: ExportRenderer(typeof(TabbedPage), typeof(TabbedPageCustom))]

    namespace MobileCRM.iOS { public class TabbedPageCustom : TabbedRenderer { public TabbedPageCustom () { TabBar.TintColor = MonoTouch.UIKit.UIColor.Black; TabBar.BarTintColor = MonoTouch.UIKit.UIColor.Blue; TabBar.BackgroundColor = MonoTouch.UIKit.UIColor.Green; } } }

    This work perfectly!

This discussion has been closed.