How to Set Tab Color in Xamarin Forms Android App

Question

I am developing a Xamarin app for Android and it uses a tab strip along the top like this:-

All I am after changing is the color of the base of the tab (where the arrow points). Currently it is white, but I want it set to a different color.

I have this in my MainPage.xaml:-

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:views="clr-namespace:App.Views"
        x:Class="App.Views.MainPage" BarBackgroundColor="#151c3e" BarTextColor="{StaticResource MainTextColour}">
<TabbedPage.Children>
    <NavigationPage Title="Location">
    <x:Arguments>
        <views:LocationPage />
    </x:Arguments>
    </NavigationPage>

...

Where MainTextColour is specified in App.xaml like this:-

<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="App.App">
<Application.Resources>
    <ResourceDictionary>
        <!--Global Styles-->
        <Color x:Key="MainBackgroundColour">Black</Color>
        <Color x:Key="MainTextColour">Red</Color>
        <Style TargetType="NavigationPage">
            <Setter Property="BarBackgroundColor" Value="{StaticResource MainBackgroundColour}" />
            <Setter Property="BarTextColor" Value="{StaticResource MainTextColour}" />
        </Style>
    </ResourceDictionary>
</Application.Resources>

Any ideas?

Does this answer your question? [How to change color of tabbed page indicator in Xamarin.Droid?](https://stackoverflow.com/questions/40256975/how-to-change-color-of-tabbed-page-indicator-in-xamarin-droid) — Andrew, Mar 12 '20 at 20:09
@Andrew - Yes that works thanks. Don't know why I didn't see that post earlier. Thanks. — Garry Pilkington, Mar 13 '20 at 13:11
@GarryPilkington It seems that you have solved your issue now, please remember to mark any helpful reply to close your thread, thanks. — Cherry Bu - MSFT, Mar 16 '20 at 01:13

score 1 · Answer 1 · answered Mar 13 '20 at 01:47

In the android project, go to Resources/layout/Tabbar.axml and change the value of app:tabIndicatorColor to whatever color you want.

<android.support.design.widget.TabLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:tabIndicatorColor="@android:color/holo_red_dark"
app:tabGravity="fill"
app:tabMode="fixed" />

How to Set Tab Color in Xamarin Forms Android App

1 Answers1