Custom TabBar Theme with Xamarin.Forms

Hi Guys,

Today, I am going to teach you how to create a custom theme for TabBar App with Xamarin.Forms. As you see in the above image, its looks nice when you create your own theme rather than default look and feel.

Lets create… 🙂

screen-shot-2017-02-18-at-7-32-26-am

Note: In Xamarin.Forms TabBarPage is defined as TabbedPage.

  1. Add a TabbedPage and name it as MyTabBarPage…

MyTabBarPage.xaml

<?xml version=1.0 encoding=UTF8?>
<TabbedPage xmlns=http://xamarin.com/schemas/2014/forms xmlns:x=http://schemas.microsoft.com/winfx/2009/xaml x:Class=TabBarTheme.MyTabBarPage>

</TabbedPage>

MyTabBarPage.xaml.cs

using Xamarin.Forms;

namespace TabBarTheme
{
    public partial class MyTabBarPage : TabbedPage
    {
        public MyTabBarPage()
        {
            InitializeComponent();
        }
    }
}

2. Set it as the MainPage in App.xaml.cs

screen-shot-2017-02-18-at-8-00-24-am

3. Create following Page classes.

  • PopularPage
  • NewPage
  • SearchPage
  • MyMusicPage

screen-shot-2017-02-18-at-8-06-10-am

4. Now copy your tab icons to .Droid and .iOS resources folders.

iOS:

screen-shot-2017-02-18-at-8-08-44-am

Android:

screen-shot-2017-02-18-at-8-15-04-am

6. Add xaml prefix to MyTabBarPage.xaml

xmlns:local=clrnamespace:TabBarTheme;assembly=TabBarTheme

7. Add your pages to MyTabBarPage.xaml

<?xml version=1.0 encoding=UTF8?>
<TabbedPage xmlns=http://xamarin.com/schemas/2014/forms xmlns:local=clrnamespace:TabBarTheme;assembly=TabBarTheme xmlns:x=http://schemas.microsoft.com/winfx/2009/xaml x:Class=TabBarTheme.MyTabBarPage>
    <NavigationPage Title=Popular Icon=popular.png BarTextColor=White BarBackgroundColor=#bc4b4b>
        <x:Arguments>
            <local:PopularPage Title=Popular />
        </x:Arguments>
    </NavigationPage>
    <NavigationPage Title=New BarTextColor=White Icon=newr.png BarBackgroundColor=#bc4b4b>
        <x:Arguments>
            <local:NewPage Title=New Releases />
        </x:Arguments>
    </NavigationPage>
    <NavigationPage Title=Search BarTextColor=White Icon=search.png BarBackgroundColor=#bc4b4b>
        <x:Arguments>
            <local:SearchPage Title=Search />
        </x:Arguments>
    </NavigationPage>
    <NavigationPage Title=My Music BarTextColor=White Icon=music.png BarBackgroundColor=#bc4b4b>
        <x:Arguments>
            <local:MyMusicPage Title=My Music />
        </x:Arguments>
    </NavigationPage>
</TabbedPage>

7. Now compile and run on Android.

screenshot_20170218-082903

Ooops…. 😦

What’s happen ?

Our navigation bar theme  is not matching with the native tabs theme.

So, lets fix it…

8. #bc4b4b is the color we have used in navigation bar in the Forms/PCL project. Lets set the same color for native UI controls from the .Droid project.

Go to Resources > values > styles.xml file in .Droid project

screen-shot-2017-02-18-at-8-36-36-am

Then, replace native style colors with our theme color (#bc4b4b).

<?xml version=1.0 encoding=UTF8?>
<resources>
    <style name=MyTheme parent=MyTheme.Base>
    </style>
    <!– Base theme applied no matter what API –>
    <style name=MyTheme.Base parent=Theme.AppCompat.Light.DarkActionBar>
        <!–If you are using revision 22.1 please use just windowNoTitle. Without android:–>
        <item name=windowNoTitle>true</item>
        <!–We will be using the toolbar so no need to show ActionBar–>
        <item name=windowActionBar>false</item>
        <!– Set theme colors from http://www.google.com/design/spec/style/color.html#colorcolorpalette–>
        <!– colorPrimary is used for the default action bar background –>
        <item name=colorPrimary>#bc4b4b</item>
        <!– colorPrimaryDark is used for the status bar –>
        <item name=colorPrimaryDark>#bc4b4b</item>
        <!– colorAccent is used as the default value for colorControlActivated
         which is used to tint widgets –>
        <item name=colorAccent>#bc4b4b</item>
        <!– You can also set colorControlNormal, colorControlActivated
         colorControlHighlight and colorSwitchThumbNormal. –>
        <item name=windowActionModeOverlay>true</item>
        <item name=android:datePickerDialogTheme>@style/AppCompatDialogStyle</item>
    </style>
    <style name=AppCompatDialogStyle parent=Theme.AppCompat.Light.Dialog>
        <item name=colorAccent>#bc4b4b</item>
    </style>
</resources>

9. Set a dark version of the same color for the Control Activated state.

<item name=colorPrimaryDark>#963c3c</item>

I am using #963c3c as a dark version of #bc4b4b.

screen-shot-2017-02-18-at-9-21-42-am

10. Now compile and run.

screenshot_20170218-085221

Wow, finally got it… 🙂   Isn’t that cool… ?

11. Now compile and run on iOS.

simulator-screen-shot-feb-18-2017-8-55-47-am

See, same problem happen to iOS now.

Lets fix that also.

Go to AppDelegate.cs in .iOS project and copy following code before line LoadApplication(new App());.

// Set app theme
UITabBar.Appearance.BarTintColor = UIColor.FromRGB(188, 75, 75);
UITabBar.Appearance.TintColor = UIColor.White;
UIProgressView.Appearance.TintColor = UIColor.FromRGB(188, 75, 75);

Note: UIColor.FromRGB(188, 75, 75) is the UIColor RGB version of #bc4b4b .

You can calculate it from http://uicolor.xyz/#/hex-to-ui

screen-shot-2017-02-18-at-9-19-45-am

12. Now, compile and run again.

simulator-screen-shot-feb-18-2017-9-03-38-am

Now looks better. But, still battery, carrier, time informations are in black color. It’s not matching with our theme. we have tom make it white color.

13. Open info.plist in .iOS project from a text editor and add following code.

<key>UIViewControllerBasedStatusBarAppearance</key>

<false/>

e.g:

screen-shot-2017-02-18-at-9-13-06-am

Save and close.

14. Now clean, rebuild and run again.

simulator-screen-shot-feb-18-2017-9-16-25-am

Finally we got it.

Cheers… 🙂

Sourcecode available in https://github.com/hiranpeiris/Xamarin-TabBarTheme

Happy coding… 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s