mauitabbedpage

.NET MAUI TabbedPage customization for required style themes

MY EXPECTATION I want to change the colors of the tabbed page themes as per my need.

Default tabbed page theme

enter image description here

Tabbed page theme I want

enter image description here

Environment .NET MAUI, C#, .NET 8

WHAT I HAVE TRIED I tried adding below two configurations in TabbedPage

BarBackgroundColor = UIHelper.DarkBackgroundColor;
BarTextColor = Colors.White;

which gave below result. But here there is NO difference in between selected tab and unselected tab. I want clear difference between selected vs unselected tabs. please suggest

enter image description here

Solution

  • I am able to fix this by using below two changes

    C# code in TabbedPage related class

    BarBackgroundColor = UIHelper.DarkBackgroundColor;
UnselectedTabColor = Color.FromRgb(208, 208, 208);
SelectedTabColor = UIHelper.SecondaryAppColor;

    Styles.xml file changes

    <style name="Maui.MainTheme" parent="Theme.MaterialComponents.DayNight">
    <item name="tabStyle">@style/CustomTabTabStyle</item>
</style>

<!-- Custom Tab style -->
<style name="CustomTabTabStyle" parent="Widget.MaterialComponents.TabLayout">
    <item name="tabIndicatorColor">#ED7E03</item>
    <item name="tabIndicatorAnimationMode">elastic</item>
    <item name="tabIndicatorAnimationDuration">300</item>
    <item name="android:transition">@android:drawable/ic_menu_slideshow</item>
    <item name="android:windowContentTransitions">true</item>
</style>