Change color to my tabbedPage in xamarin forms


Someone knows how I can change the color of my tabbedPage in Xamarin forms, I want it to have the same color of the Navigation Bar that I have. The following image is an example of how I want it, just need to change the color of the Tabbed Page.

asked by Juan Lopez 02.04.2016 в 13:47

4 answers



All you need to do is change the color code of the colorPrimary attribute located in the styles.xml of your Android project (Resources> values).

<item name="colorPrimary">#TU_CODIGO_HEX</item>


By default, both the navigation bar and the tabs bar on Android, take as background color the colorPrimary defined in your file styles.xml . The files Tabbar.axml and Toolbar.axml , located in Resources > layout, they have their property android:background linked to that color. Check that they have this:


And those are the layouts that Xamarin.Forms takes to render those controls. Look at the MainActivity.cs that you have 2 lines like this:

TabLayoutResource = Resource.Layout.Tabbar;
ToolbarResource = Resource.Layout.Toolbar;
answered by 04.01.2018 в 08:29

You have two options, the first is to use a custom render where you basically take the class base (in this case TabbedPage ) and modify the property you need.

The other option you have (only for android) is to use themes, in the forums of xamarin you can take as a base the next code

In the Xamarin blog , James Montemagno has exactly the style to modify the style of the tabs in android for Xamarin forms

answered by 13.04.2016 в 05:36


  <TabbedPage //todo lo demás 
BarBackgroundColor="{StaticResource ColorAzul}" 
    BarTextColor="{StaticResource ColorBlanco}" >

BarBackgroundColor and BarTextColor are properties of TabbedPage, with the first you can change the color of the tab and with the second the text of the tabs.

In the App.xaml


    //aqui meteras todo lo que se refiere a color, estilo y demás...
    //es de gran ayuda ya que te ayuda a tener todo de una manera más organizada
    <!-- Colores-->
    <Color x:Key="ColorAzul">#2196F3</Color>
    <Color x:Key="ColorBlanco">#FFFFFF</Color>

answered by 10.11.2016 в 23:16

okay I understand you.

        BarBackgroundColor="Aqui pornes el color que quieras. "

This is the property to change the bar color of a tabbedPage.

you use it from the head. from the taggedPage ..

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns=""

answered by 03.02.2017 в 19:09