Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

How to change the nav bar background color on Android?

Hello I'm having issues with setting the navbar color with this:

var mainNav = new NavigationPage (new TodoListPage ());
mainNav.BarBackgroundColor = Color.FromHex ("a97946");
MainPage = mainNav;

This works great... until I push a Modal page then when I go back the navbar is the default color.
(this is happening on a Nexus 5 with Android 5.0, on my simulator running Android 4.4 does not happen)
is there a way to change the navbar color after setting it the first time?

Thanks!

Best Answer

Answers

  • Thank You! now the Action Bar stays with that color

  • PD.6026PD.6026 USMember ✭✭

    Hi 11pika11 . Can you please share some code or the modification you did to get the bar color. I am stuck with the same problem and is unable to rectify it.

    Thanks

  • SaggySaggy USMember
    edited May 2015

    HI, @PD.6026

    Try in this way in style.xml

    <style name="AppTheme" parent="android:Theme"> <item name="android:windowBackground">@drawable/splash</item> <item name="android:windowNoTitle">true</item> <item name="android:colorPrimary">@color/colorPrimary</item> <item name="android:statusBarColor">@color/colorPrimaryDark</item> <item name="android:colorPrimaryDark">@color/colorPrimaryDark</item> </style>

  • AlejandroForondaAlejandroForonda BOMember

    Hey @PD.6026 the answer provided @RandyDelRosario worked for me I made no changes to the code he provided (except for the HEX value)
    Step by step
    1. I've created a Styles.xml file in "ProjectName".Droid/Resources/values
    2. I've pasted the code @RandyDelRosario provided (just changing the HEX value in here just put the color you desire)
    3. To start using the theme you have to declare it in the MainActivity.cs just before the MainActivity class

    [Activity (Label = "AppName", Icon = "@drawable/icon", Theme = "@style/CustomActionBarTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]

  • PatrickGoodePatrickGoode USMember ✭✭

    I tried this, using the same code. The action bar is the default theme color, not the color I specified. This is on a Samsung Galaxy S

  • NMackayNMackay GBInsider, University admin

    @PatrickGoode

    This theme works on an S3, S4 & S5, it has some quirks in 5.1.0 I haven't got round to looking at yet. It's based on the Holo.Light theme.

    ?xml version="1.0" encoding="utf-8"?>
    <resources>
      <style name="CustomTheme" parent="@android:style/Theme.Holo.Light">
        <item name="android:actionBarStyle">@style/custom_actionBarItemBackground</item>
        <item name="android:popupMenuStyle">@style/custom_popupMenu</item>
        <item name="android:spinnerStyle">@style/custom_spinnerStyle</item>
        <item name="android:progressBarStyle">@style/custom_progressBarStyle</item>
        <item name="android:itemTextAppearance">@style/custom_overflowMenuTextColor</item>
        <item name="android:actionOverflowButtonStyle">@style/custom_menuOverflow</item>
        <item name="android:colorPressedHighlight">@color/listview_selected</item>
        <item name="android:colorLongPressedHighlight">@color/listview_selected</item>
        <item name="android:colorFocusedHighlight">@color/listview_selected</item>
        <item name="android:colorActivatedHighlight">@color/listview_selected</item>
        <item name="android:activatedBackgroundIndicator">@color/listview_selected</item>
        <item name="android:actionBarTabTextStyle">@style/custom_tabViewStyle</item>
        <item name="android:actionBarTabStyle">@style/custom_actionBarTabStyle</item>
        <item name="android:actionBarTabBarStyle">@style/custom_actionBarTabBarStyle</item>
      </style>
    
      <!-- Style actual tabs -->  
      <style name="custom_actionBarTabStyle" parent="@android:Widget.Holo.Light.ActionBar.TabView">
        <item name="android:background">@drawable/tab_selector</item>
        <item name="android:textColor">@color/tab_text</item>
        <item name="android:textAllCaps">false</item>
        <item name="android:showDividers">none</item>
        <item name="android:measureWithLargestChild">true</item>
        <item name="android:paddingLeft">0dp</item>
        <item name="android:paddingRight">0dp</item>
        <item name="android:minWidth">0dp</item>
      </style>
    
      <!-- Style actonBar area under tabs -->
      <style name="custom_actionBarTabBarStyle" parent="@android:style/Widget.Holo.ActionBar.TabView">
        <item name="android:showDividers">none</item>
        <item name="android:paddingLeft">0dp</item>
        <item name="android:paddingRight">0dp</item>
        <item name="android:minWidth">0dp</item>
      </style>
    
      <!-- Style action bar tab text and color color selector -->
      <style name="custom_tabViewStyle" parent="android:Widget.Holo.Light.ActionBar.TabView">
        <item name="android:textColor">@color/tab_text</item>
        <item name="android:background">@drawable/tab_viewselector</item>
      </style>
    
      <!-- Style action background and colors for app startup -->
      <style name="custom_actionBarItemBackground" parent="@android:style/Widget.Holo.ActionBar">
        <item name="android:background">@color/actionbar_background</item>
        <item name="android:titleTextStyle">@style/custom_actionBarTextStyle</item>
      </style>
    
      <style name="custom_actionBarTextStyle" parent="@android:style/TextAppearance">
        <item name="android:textColor">@color/actionbar_menutext</item>
        <item name="android:background">@color/actionbar_background</item>
      </style> 
    
      <!-- Override the theme default overflow indicator -->
      <style name="custom_menuOverflow" parent="@android:Widget.Holo.ActionButton.Overflow">
        <item name="android:src">@drawable/ic_action_overflow</item>
      </style>
    
      <!-- Set text color for overflow menu -->
      <style name="custom_overflowMenuTextColor">
        <item name="android:textColor">@color/overflow_menutext</item>
      </style>
    
      <!-- Override activity indicator color issue in Xamarin forms -->
      <style name="custom_progressBarStyle" parent="@android:style/Widget.Holo.Light.ProgressBar">
        <item name="android:indeterminateDrawable">@drawable/progress_bar</item>
      </style>
    
      <!-- Style overflow oppup menu, doesn't work pre 4.4.4 -->
      <style name="custom_popupMenu" parent="@android:style/Widget.Holo.Light.ListPopupWindow">
        <item name="android:popupBackground">@color/overflow_background</item>
      </style>
    
      <!-- Currently not used -->
      <style name="custom_spinnerStyle" parent="android:Widget.Holo.Light.Spinner">
        <item name="android:background">@color/actionbar_background</item>
        <item name="android:popupBackground">@color/actionbar_background</item>
        <item name="android:dropDownSelector">@color/actionbar_background</item>
      </style>
    </resources>
    
    

    Might get you in the right direction.

  • PatrickGoodePatrickGoode USMember ✭✭

    @NMackay Thanks for answering! I'm a relative newbie. Where is actionbar_background defined?

  • NMackayNMackay GBInsider, University admin
    edited October 2015

    @PatrickGoode

      <style name="v_actionBarItemBackground" parent="@android:style/Widget.Holo.ActionBar">
        <item name="android:background">@color/actionbar_background</item>
        <item name="android:titleTextStyle">@style/v_actionBarTextStyle</item>
      </style>
    

    In colors.xml (in the Values folder)

    <color name="actionbar_background">#CC0066</color> (it's not really pink :smile: , it's just to demo). This means that color is set at startup.

    The Style.xml (previous post) should be in the values folder like Colors, It's BuildAction needs to be 'AndroidResource'

    Also remember to set the style in your MainActivity.cs in your Android project:

        [Activity(Label = "App titlle", MainLauncher = true, Theme = "@style/CustomTheme",
        ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation, ScreenOrientation = ScreenOrientation.Portrait)]
        public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsApplicationActivity
    

    Once you app has started you can simply override the BackroundBarColor in your app.cs or App.xaml.cs of the main page.

                MainPage = new NavigationPage(new StartPage())
                {
                    BarBackgroundColor = Color.FromHex("CC0066"),
                    BarTextColor = Color.FromHex("FFFFFF")
                };
    

    The 1st step is just needed in Android, otherwise the bar color only changes once Forms has been initialised.

    Hope this helps

  • PatrickGoodePatrickGoode USMember ✭✭
    edited October 2015

    @NMackay Thanks. Initially I got the error
    'invalid start tag color' However I made the xml in that file:

     <resources>
          <color name="actionbar_background">#56198E</color>
     </resources>
    

    The good news is that the action bar color stays now! LOL, but of course, any other text I put on any page has a background of that same color. Weird. One other thing I did was comment out

     <!--<item name="android:titleTextStyle">@style/v_actionBarTextStyle</item>-->
    

    and
    //BarTextColor = Color.FromHex("FFFFFF")

  • NMackayNMackay GBInsider, University admin

    colors.xml

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
      <color name="actionbar_background">#CC0066</color>
    </resources>
    
  • PatrickGoodePatrickGoode USMember ✭✭

    @NMackay Yeah, I figured that out eventually. See above, I edited my post. The background color stays now! However, all other text on the Xamarin forms pages themselves have a background with the same color

  • NMackayNMackay GBInsider, University admin
    edited October 2015

    @PatrickGoode

    I'm not entirely certain what you mean but you can set the background color for each page or use a style

    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 Title="About"
                 BackgroundColor="Green"
    

    Or a style

    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" Title="About" xmlns:mvvm="clr-namespace:OrderFinder;assembly=OrderFinderFinder" xmlns:local="clr-namespace:OrderFinder.Helpers;assembly=OrderFinderFinder" xmlns:custom="clr-namespace:OrderFinder.CustomRenderers;assembly=OrderFinderFinder" Style="{StaticResource PageStyle}"

    And in your App.xaml.cs....

    <Application
        xmlns="http://xamarin.com/schemas/2014/forms"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        x:Class="OrderFinder.App">
      <Application.Resources>
        <OnPlatform x:TypeArguments="ResourceDictionary">
          <OnPlatform.iOS>
            <ResourceDictionary>
              <Style x:Key="PageStyle" TargetType="ContentPage">
                <Setter Property="BackgroundColor" Value="#DEEEE8" />
              </Style>
            </ResourceDictionary>
          </OnPlatform.iOS>
          <OnPlatform.Android>
            <ResourceDictionary>
              <Style x:Key="PageStyle" TargetType="ContentPage">
                <Setter Property="BackgroundColor" Value="#DEEEE8" />
              </Style>
            </ResourceDictionary>
          </OnPlatform.Android>
        </OnPlatform>
      </Application.Resources>
    </Application>
    

    https://developer.xamarin.com/guides/cross-platform/xamarin-forms/working-with/styles/

  • PatrickGoodePatrickGoode USMember ✭✭

    @NMackay Here's what I did:

     <style name="v_actionBarItemBackground" parent="@android:style/Widget.Holo.ActionBar">
        <item name="android:background">@color/actionbar_background</item>
        <!--<item name="android:titleTextStyle">@style/v_actionBarTextStyle</item>-->
    </style>
    
         [Activity(Label = "My app", Icon = "@drawable/icon", Theme = "@style/v_actionBarItemBackground", ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
    
     <resources>
        <color name="actionbar_background">#56198E</color>
     </resources>
    
         public App()
                {
                    // The root page of your application
                    MainPage = new NavigationPage(new RootPage())
                    {
                        BarBackgroundColor = Color.FromHex("56198E"),
                        //BarTextColor = Color.FromHex("FFFFFF")
                    };
                }
    

    I was already setting the background color of the page

      public Home()
        {
            InitializeComponent();
            this.BackgroundColor = Color.FromHex("#f2f2f2");
            mainStackLayout.Padding = new Thickness(10, 20, 10, 10);
    
    
        }
    

    The background color of the bar stays when I navigate. But anything I place on a page has a background color of the same color as the barbackground color

  • NMackayNMackay GBInsider, University admin

    @PatrickGoode

    Your theme file should be called Style.xml and inherit from the base theme.

    ?xml version="1.0" encoding="utf-8"?>
    <resources>
      <style name="CustomTheme" parent="@android:style/Theme.Holo.Light">
        <item name="android:actionBarStyle">@style/custom_actionBarItemBackground</item>
      </style>
    
      <!-- Style action background and colors for app startup -->
      <style name="custom_actionBarItemBackground" parent="@android:style/Widget.Holo.ActionBar">
        <item name="android:background">@color/actionbar_background</item>
      </style>
    </resources>
    

    [Activity(Label = "My app", Icon = "@drawable/icon", Theme = "@style/CustomTheme", ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]

    Without looking at your solution I couldn't really assist more, supposed to be working :smile:

    IF you PM me a link to a zip/rar file hosted on google drive or something I'll take a look at it tomorrow but I don't have any time at the moment as I have to knock together a propotype app.

  • PatrickGoodePatrickGoode USMember ✭✭

    @NMackay Ok that would be fantastic. I'll PM you a link. Thank you so much

  • KentBoogaartKentBoogaart AUMember ✭✭

    If you're showing a dialog, chances are you wrapped a Page inside a NavigationPage. NavigationPage includes properties to control the BarBackgroundColor and BarTextColor. Be sure to set those - no need to mess about with styles as far as I can tell.

  • RendyDelRosario's answer worked for me! Thanks!

  • anveanve DEMember ✭✭✭

    Is there no pure Xamarin.Forms approach? E.g. if you think on themes.

  • batmacibatmaci DEMember ✭✭✭✭✭

    @anve said:
    Is there no pure Xamarin.Forms approach? E.g. if you think on themes.

    have you found any good solution for that?

  • anveanve DEMember ✭✭✭

    @batmaci: Sorry, I went for the native Android approach ...

  • batmacibatmaci DEMember ✭✭✭✭✭

    @anve said:
    @batmaci: Sorry, I went for the native Android approach ...

    .
    I implemented that in the portable project like kevin above mentioned. it is working perfectly fine. this article explains it well https://blog.xamarin.com/easy-app-theming-with-xamarin-forms-styles/

Sign In or Register to comment.