How to create a custom render to ios and android to customize each tab of tabbedpage (Xamarin.Forms)

CristianGiaganteCristianGiagante USMember ✭✭
edited August 11 in Xamarin.Forms

Hi guys i need a lot of help, please explain me how i can do to customize each TAB generated by the childrens of a TabbedPage, i need be able to change the background color of each tab and their color font on each tab.
I dont need change background bar color, i need control each tab generated by the childrens.

I'm using Xamarin.Forms and i cant choose another approach like classic development.
I dont know how to start :(

Answers

  • christopherpolskachristopherpolska PLUniversity ✭✭✭
  • CristianGiaganteCristianGiagante USMember ✭✭

    I mean that i'm not using xamarin classic, im using xamarin.forms, the link that you send me is only about xamarin.ios, this tab bar is not the same for android.

    I guess i need a customRenderer to modify the original behavior on android and ios but i don't know how to do it.

    I need expand the tabbedPage to be enabled to select backgrounds color and font color to each tab in the tab bar, in both platforms.

  • christopherpolskachristopherpolska PLUniversity ✭✭✭

    The link that I've sent you is about creating a Xamarin.Forms tabbed page application. It can be launched on Android and iOS (UWP probably also).
    And yes, the tabbed page looks different on iOS and Android - different user experience.

    You want to create a tabbed page with the tabs on the bottom of the screen for Android and iOS ?

    In one post you wrote:

    i need be able to change the background color of each tab and their color font on each tab.
    I dont need change background bar color, i need control each tab generated by the childrens.

    ???? Generated by the children? I thought that parents generate children :wink: You wrote that you don't want to change bar color, and now:

    I need expand the tabbedPage to be enabled to select backgrounds color and font color to each tab in the tab bar,

    So.... in which??? (the menu that you tap with your finger or the content of the tab which is displayed to the rest of the screen?)

  • CristianGiaganteCristianGiagante USMember ✭✭

    @christopherpolska said:
    The link that I've sent you is about creating a Xamarin.Forms tabbed page application. It can be launched on Android and iOS (UWP probably also).
    And yes, the tabbed page looks different on iOS and Android - different user experience.

    You want to create a tabbed page with the tabs on the bottom of the screen for Android and iOS ?

    In one post you wrote:

    i need be able to change the background color of each tab and their color font on each tab.
    I dont need change background bar color, i need control each tab generated by the childrens.

    ???? Generated by the children? I thought that parents generate children :wink: You wrote that you don't want to change bar color, and now:

    I need expand the tabbedPage to be enabled to select backgrounds color and font color to each tab in the tab bar,

    So.... in which??? (the menu that you tap with your finger or the content of the tab which is displayed to the rest of the screen?)

    As you read, i want to change each TAB in the TAB BAR, the tab contains TABs created like page childrens of the tabbedPage:

    class TABBEDexample:TabbedPage
    {
    public TABBEDexample()
    {
    var page=new ContentPage();
    Children.Add(page); #<=====This create a TAB in the TAB BAR.
    Children.Add(page); #<=====This create a TAB in the TAB BAR.
    Children.Add(page); #<=====This create a TAB in the TAB BAR.
    #Now we have 3 TAB buttons in the TAB BAR
    }
    }

    I need something like...
    Children[0].BackgroundColor=Color.Fuchsia;
    and..
    Children[1].FontColor=Color.Green;

    With this result:

    Actually you can't do that with this tabbedPage from xamarin.forms:
    https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/navigation/tabbed-page/

  • CristianGiaganteCristianGiagante USMember ✭✭
    edited August 11

    As you read i need control a specific tab from the tab bar, the tabbedPage is builded with page childrens.

    public class ExampleTabPage : TabbedPage
    {
    public ExampleTabPage()
    {
    var page1=new ContentPage();
    var page2=new ContentPage();
    var page3=new ContentPage();
    Childrens.Add(page1); #<=====I add 1 page, then tabbedPage create 1 tab button on the tab bar
    Childrens.Add(page2); #<=====I add 1 page, then tabbedPage create 1 tab button on the tab bar
    Childrens.Add(page3); #<=====I add 1 page, then tabbedPage create 1 tab button on the tab bar
    #Total 3 tab buttons on the tab bar from tabbedPage.
    }
    }

    Now, i need be able to change only the background and font color from each Tab button.
    Something like:
    Childrens[0].TabBackgroundColor=Color.Fuchsia;
    Childrens[0].TabFontColor=Color.Black;
    Childrens[1].TabFontColor=Color.Green;
    Childrens[2]; #default

    With this results:

    The actual TabbedPage from Xamarin Forms can't do that.

  • CristianGiaganteCristianGiagante USMember ✭✭

    up

Sign In or Register to comment.