Not able to change the tabbar related colors

[johnmangam]

I'm using 0.6.69-preview version of MBB

Somehow it looks like it ignores for there is no color change in my GUI, please help as I am trying to change the colors of tabbar.

using Android.Content;
using Google.Android.Material.Tabs;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(SomeApp.AppShell), typeof(SomeApp.Droid.MyShellRenderer))]
namespace SomeApp.Droid
{
    public class MyShellRenderer : ShellRenderer
    {
        public MyShellRenderer(Context context) : base(context)
        {
        }

        protected override IShellTabLayoutAppearanceTracker CreateTabLayoutAppearanceTracker(ShellSection shellSection)
        {
            return new MyShellTabLayoutAppearanceTracker(this);
        }
    }

    public class MyShellTabLayoutAppearanceTracker : ShellTabLayoutAppearanceTracker
    {
        public MyShellTabLayoutAppearanceTracker(IShellContext context) : base(context)
        {
        }
        public override void SetAppearance(TabLayout tabLayout, ShellAppearance appearance)
        {
            tabLayout.SetBackgroundColor(Android.Graphics.Color.ParseColor("#002000"));

        }

        protected override void SetColors(TabLayout tabLayout, Color foreground, Color background, Color title, Color unselected)
        {
            base.SetColors(tabLayout, Color.Black, Color.White, Color.Black, Color.Gray);

            tabLayout.SetSelectedTabIndicatorColor(Color.Red.ToAndroid());
        }
    }

}

AppShell.razor

<Shell BackgroundColor="XF.Color.Black">
        <TabBar Title="Some Title" >
        <Tab Title="Articles" Icon="@(new XF.FileImageSource { File="blog.png" })">
            <ShellContent>
                <SomeApp.WebUI.Pages.ArticlesList />
            </ShellContent>
        </Tab>
       ....
</Tab>
</Shell>

Tabbar.xml

<?xml version="1.0" encoding="utf-8"?>
<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/white"
    app:tabGravity="fill"
    app:tabMode="fixed" />

Colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <color name="launcher_background">#000000</color>
  <color name="colorPrimary">#000000</color>
  <color name="colorPrimaryDark">#000000</color>
  <color name="colorAccent">#000000</color>
  <color name="splash_background">#000000</color>
</resources>

Styles.xml

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

  <style name="MainTheme" parent="MainTheme.Base">
    <item name="android:windowBackground">@drawable/splash_logo</item>
    <item name ="android:colorBackground">#000000</item>
  </style>
  <!-- Base theme applied no matter what API -->
  <style name="MainTheme.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 https://aka.ms/material-colors -->
    <!-- colorPrimary is used for the default action bar background -->
    <item name="colorPrimary">#000000</item>
    <!-- colorPrimaryDark is used for the status bar -->
    <item name="colorPrimaryDark">#000000</item>
    <!-- colorAccent is used as the default value for colorControlActivated
         which is used to tint widgets -->
    <item name="colorAccent">#000000</item>
    <!-- You can also set colorControlNormal, colorControlActivated
         colorControlHighlight and colorSwitchThumbNormal. -->
    <item name="windowActionModeOverlay">true</item>
    <item name="android:windowBackground">@android:color/black</item>
    <item name="android:datePickerDialogTheme">@style/AppCompatDialogStyle</item>
  </style>

  <style name="AppCompatDialogStyle" parent="Theme.AppCompat.Light.Dialog">
    <item name="colorAccent">#000000</item>
  </style>

  <style name="MyTheme.Base" parent="Theme.AppCompat.Light">
  </style>

  <style name="MyTheme" parent="MyTheme.Base">
  </style>

  <style name="MyTheme.Splash" parent ="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowBackground">@drawable/logofive</item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowFullscreen">true</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:windowActionBar">true</item>
    <item name="android:color">@color/splash_background</item>
  </style>

</resources>

[Eilon]

Hi @johnmangam , can you set breakpoints in your code and see if they are hit? Also, I don't recall exactly how it works, but how are you using MyShellRenderer in the app? It seems you've registered it as the renderer for SomeApp.AppShell, but then how are you using that in your app?

[johnmangam]

Hi @Eilon Thank you for your message. Since I have registered as a renderer, I assumed it would be picked up dynamically, sorry. I see that it is not currently hit. Am I missing a step here, please?

[Eilon]

I'm not an expert on this area, but I think the renderer needs to be associated with a control that's in the app. There is Xamarin.Forms.Shell in your app (presumably) wherever you use the <Shell ... /> element, but I don't know if you're using SomeApp.AppShell.

You might need to just remove your type SomeApp.AppShell and change the ExportRenderer attribute to associate Xamarin.Forms.Shell with your renderer?

[Eilon]

Oh wait I misunderstood something, hold on... I didn't realize that AppShell is the shell of your app. Let me think about this...

[Eilon]

Ah OK, so in your app I'm guessing that AppShell comes from AppShell.razor, which is just a Razor component. But the concept of a "renderer" is a Xamarin.Forms thing. So for custom renderers you need to associate the Xamarin.Forms element with your custom renderer. So maybe try this instead:

[assembly: ExportRenderer(typeof(Xamarin.Forms.Shell), typeof(SomeApp.Droid.MyShellRenderer))]

And cross your fingers 😄

[johnmangam]

Thank you so much @Eilon it hits the breakpoint now.

Hats off to you and your team for MBB. A simple developer like me is able to send apps to the store easily. Thank you so much.

Though it hits the breakpoint in myshellrenderer, it doesn't change the color of the top bar as shown in the picture. Any help would be great, thank you.

[Eilon]

Hmm I'm not familiar with the Android-specific behavior here. Perhaps your code is running, but something else is overwriting the color? Are there other methods/events you can hook to try to detect that?

[johnmangam]

Thank you @Eilon I will try and let you know. Thanks again.

[johnmangam]

I was able to make changes to navbar colors using ShellProperties:

<ContentPage Title="cp title">
    <ShellProperties 
                     BackgroundColor="XF.Color.Red"
                     NavBarIsVisible="true"
                     TitleColor="XF.Color.Yellow" />

Thank you once again @Eilon for your time.