Issue setting colors in XF
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
-
Yelinzh
Member, Xamarin Team Xamurai
What I need to change is the status bar at the top, currently showing black with no text.
This is because you set the 'MyTheme.Splash' which has been set full screen in styles.xml as the activity theme. To use splash screen, create a SplashActivity to display the screen.
Set SplashActivity's theme to 'MyTheme.Splash' and MainActivity's theme to 'MainTheme.Base'. And MainLauncher should be set to true in SplashActivity class.
MainActivity.cs
[Activity(Label = "@string/app_name", Icon = "@mipmap/ic_launcher", Theme = "@style/MainTheme.Base"] public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity { ... }SplashActivity.cs
[Activity(Label = "SplashAcitvity", Theme = "@style/MyTheme.Splash", MainLauncher = true)] public class SplashAcitvity : AppCompatActivity { protected override void OnCreate(Bundle savedInstanceState) { base.OnCreate(savedInstanceState); // Create your application here Task.Run(() => { RunOnUiThread(() => { StartActivity(new Intent(this, typeof(MainActivity))); }); }); } }
Here is the sample file.
5
Answers
You can just set the navigation page bar color in Xamarin Forms.
You can tweaks the iOS client with platform specifics.
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/platform/ios/status-bar-text-color
@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.
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"How did you set statusBar's color? When status bar color is dark,
android:windowLightStatusBarshould be set to false or deleted. Try the following code.Refer to:
https://stackoverflow.com/a/50055782/11083277
@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:
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
@stesvis
Have you set full screen to the Activity? If you added the setting, delete the line code.
If not, try to add the following command.
@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?
Would you mind sharing a basic demo? It'll help to reproduce the issue get a solution.
@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?
This is because you set the 'MyTheme.Splash' which has been set full screen in styles.xml as the activity theme. To use splash screen, create a SplashActivity to display the screen.
Set SplashActivity's theme to 'MyTheme.Splash' and MainActivity's theme to 'MainTheme.Base'. And MainLauncher should be set to true in SplashActivity class.
MainActivity.cs
[Activity(Label = "@string/app_name", Icon = "@mipmap/ic_launcher", Theme = "@style/MainTheme.Base"] public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity { ... }SplashActivity.cs
[Activity(Label = "SplashAcitvity", Theme = "@style/MyTheme.Splash", MainLauncher = true)] public class SplashAcitvity : AppCompatActivity { protected override void OnCreate(Bundle savedInstanceState) { base.OnCreate(savedInstanceState); // Create your application here Task.Run(() => { RunOnUiThread(() => { StartActivity(new Intent(this, typeof(MainActivity))); }); }); } }Here is the sample file.
But the bg color and accent color are still an issue hey?
@stesvis
What color? Could you post a screenshot to show it?
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?
@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.
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.
@stesvis
You can test the demo on an emulator deivce like Pixel XL (as the above screenshots shown).
I tested the code on a real deivce and an emulator, both work fine. Try to test on another device.
You are welcome!
@Jarvan hats down, after you splash screen fix, also the accent color works properly now!
@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:
