Forum Xamarin.Forms

Issue setting colors in XF

stesvisstesvis USMember ✭✭✭✭

I am having some issues with setting the status bar color and the selected tab underline color in xamarin forms, especially android.

Status Bar
I thought that setting the colorPrimaryDark would set the status bar background color:
<item name="colorPrimaryDark">@color/primaryDark</item>

Which i set to yellow as a test, but instead it look black, with no text. If I swipe down from the top of the screen then somehow the text (time, battery, carrier etc show).

Tab Underline
I do this but the tab underline is still white:

  <!--Selected tab underline-->
  <style name="AppCompatDialogStyle" parent="Theme.AppCompat.Light.Dialog">
    <item name="colorAccent">@color/accent</item>
  </style>

How can I fix this? How do I set the tab underline color and the status bar color in android and iOS?
Thanks

Best Answer

Answers

  • NMackayNMackay GBInsider, University admin

    You can just set the navigation page bar color in Xamarin Forms.

    <NavigationPage BarBackgroundColor="#F05123" BackgroundColor="#F05123" BarTextColor="White" >
    

    You can tweaks the iOS client with platform specifics.
    https://docs.microsoft.com/en-us/xamarin/xamarin-forms/platform/ios/status-bar-text-color

  • stesvisstesvis USMember ✭✭✭✭

    @NMackay The navigation bar is already good to go (the dark yellow). What I need to change is the status bar at the top, currently showing black with no text.

  • stesvisstesvis USMember ✭✭✭✭

    I found the answer for the tab underline color, duh.
    For whoever needs it, it's set in Resources/layout/Tabbar.axml:
    app:tabIndicatorColor="@color/tabIndicatorColor"

  • YelinzhYelinzh Member, Xamarin Team Xamurai

    What I need to change is the status bar at the top, currently showing black with no text.

    How did you set statusBar's color? When status bar color is dark, android:windowLightStatusBar should be set to false or deleted. Try the following code.

    <style name="MainTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
      ...
      <item name="android:statusBarColor">#000000</item>
      <item name="android:windowLightStatusBar">false</item> 
    </style>
    

    Refer to:
    https://stackoverflow.com/a/50055782/11083277

  • stesvisstesvis USMember ✭✭✭✭

    @Jarvan that's what i did, i'll post a screenshot because it shows the actual color preview of the status bar.
    It's just simply not applying:

    Xamarin ships already with this and it specifically explains it in the comment:

    <!-- colorPrimaryDark is used for the status bar -->
    <item name="colorPrimaryDark">@color/primaryDark</item>
    

    But look at the video, the status bar is black, and the text shows only when i swipe down, i've never seen this behavior.
    https://drive.google.com/open?id=12bkEcN92LhjWFd_9S0SbFkd9XjCOSW4n

  • YelinzhYelinzh Member, Xamarin Team Xamurai

    @stesvis
    Have you set full screen to the Activity? If you added the setting, delete the line code.

    this.Window.AddFlags(Android.Views.WindowManagerFlags.Fullscreen);
    

    If not, try to add the following command.

    this.Window.ClearFlags(Android.Views.WindowManagerFlags.Fullscreen);
    
  • stesvisstesvis USMember ✭✭✭✭
    edited November 2019

    @Jarvan no i did not have that line.
    I added the one that you suggested, and i can see the text now, but the status bar background color is gray.

    The other issue i am having is the accent color. I set it to #f6a821 which is a type of dark yellow (same as the Username/Password labels), but the Entry highlight color looks turquoise.

    This is a brand new app that I started so I don't have weird customizations, I just changed the default colors that it shipped with.

    What could it be?

  • YelinzhYelinzh Member, Xamarin Team Xamurai

    Would you mind sharing a basic demo? It'll help to reproduce the issue get a solution.

  • stesvisstesvis USMember ✭✭✭✭

    @Jarvan ok so i was able to finally upload a demo here:
    https://github.com/stesvis/5w20-Zone-Demo

    I tried again with it and I still see the turquoise color instead of the yellow..
    I commented out that line that you suggested in MainActivity, just to show you the original behavior.

    I suspect it could be caused by an Android update?

  • stesvisstesvis USMember ✭✭✭✭
    Oh thanks @Jarvan i did not know that.
    But the bg color and accent color are still an issue hey?
  • YelinzhYelinzh Member, Xamarin Team Xamurai

    @stesvis

    But the bg color and accent color are still an issue hey?

    What color? Could you post a screenshot to show it?

  • stesvisstesvis USMember ✭✭✭✭
    @Jarvan yes i did before. Look at my previous screenshot.
    The status bar is black and the accent in the username entry is turquoise instead of yellow.
    The status bar should be of the primaryDarkColor right?
  • YelinzhYelinzh Member, Xamarin Team Xamurai
    edited November 2019

    @stesvis
    The entrys' color are alreadly dark yellow. I changed the status bar to black, I thought it was what you need. If not, just change it back.

    <style name="MainTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
      ...
      <item name="android:statusBarColor">@color/primaryDark</item>
      <!--<item name="android:statusBarColor">#000000</item>-->
      <item name="android:windowLightStatusBar">false</item>
    
    </style>
    

  • stesvisstesvis USMember ✭✭✭✭
    Then it must be a weird behavior of my phone?
    Your screenshot looks exactly like what i was expecting.
    Status bar dark yellow and accent color yellow too.
    I imagine that when you sign in also the activity indicator is yellow?
    It shows turquoise on my phone.
  • YelinzhYelinzh Member, Xamarin Team Xamurai

    @stesvis
    You can test the demo on an emulator deivce like Pixel XL (as the above screenshots shown).

  • stesvisstesvis USMember ✭✭✭✭
    That's my other issue...99% of the times i try an Android emulator i just get a black screen, other time it says there was an error while deploying etc...
  • YelinzhYelinzh Member, Xamarin Team Xamurai
    edited November 2019

    I tested the code on a real deivce and an emulator, both work fine. Try to test on another device.

  • stesvisstesvis USMember ✭✭✭✭
    Thank you @Jarvan much appreciated!
  • YelinzhYelinzh Member, Xamarin Team Xamurai

    You are welcome!

  • stesvisstesvis USMember ✭✭✭✭

    @Jarvan hats down, after you splash screen fix, also the accent color works properly now!

  • stesvisstesvis USMember ✭✭✭✭
    edited November 2019

    @Jarvan i noticed another issue in android in that same app (but in the small demo that you have there are not tabs after log in).
    Shouldn't the title in the Navigation bar automatically be the same as the title of the selected tab? I other apps that I have that is the default behavior, the selected tab title overrides the Navigation Bar title.

    I don't understand why the title is empty:

Sign In or Register to comment.