Xamarin Forms set Android in Light Theme

YannickJYannickJ USMember ✭✭
edited September 2017 in Xamarin.Forms

I can't find even with Google how to set the Android project into Light Theme.
The Toolbar behind the 'dotted' button stays black, how do I get it white?
I mean the navigation that pops up when u press the 'dotted' button on the right top.

On Google you find 1000 things but nothing explains it good. Does someone can provide some documentation how to style the Android project in a Xamarin Forms solution?

I'm kinda new to Xamarin Forms, used to restyle WPF and UWP XAML controls here it is different.

Posts

  • NMackayNMackay GBInsider, University mod

    Are you using AppCompat?

  • YannickJYannickJ USMember ✭✭

    @NMackay, yes in Android style.xml parent="Theme.AppCompat.Light.DarkActionBar"
    But when I change it to parent="Theme.AppCompat.Light" nothing changes

  • batmacibatmaci DEMember ✭✭✭✭✭
    Fyi, light theme slows down your app startup.
  • RaphaelSchindlerRaphaelSchindler USMember ✭✭✭
  • YannickJYannickJ USMember ✭✭

    @RaphaelSchindler yep, already tried that one. First of all those Nuget packages don't exist... and the sample code doesn't work :)

  • YannickJYannickJ USMember ✭✭

    Well they fail to install

  • NMackayNMackay GBInsider, University mod

    @YannickJ

    I thought you just wanted to change the navigation bar color which is straight forward enough tweak in the style

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
      <style name="Theme.Splash" parent="android:Theme">
        <item name="android:windowBackground">@drawable/splashscreen</item>
        <item name="android:windowNoTitle">true</item>
      </style>
      <style name="MyCustomTheme" parent="MyTheme.Base">
      </style>
      <style name="MyTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/primary</item>
        <item name="colorPrimaryDark">#FF000000</item>
        <item name="colorAccent">@color/accent</item>
        <item name="colorControlHighlight">@color/primaryDark</item>
        <item name="colorControlActivated">@color/primaryDark</item>
        <item name="android:windowBackground">@color/window_background</item>
        <item name="windowActionModeOverlay">true</item>
        <item name="android:icon">@android:color/transparent</item>
      </style>
      <style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
        <item name="tabTextAppearance">@style/MyCustomTabText</item>
      </style>
    
      <style name="MyCustomTabText" parent="TextAppearance.AppCompat.Button">
        <item name="android:textSize">10sp</item>
        <item name="android:textColor">@android:color/white</item>
      </style>
    </resources>
    

    I don't use the theme feature, it is still beta as the nuget package suggests, @batmaci suggests there is a startup performance hit which is something I'd bare in mind as Android startup before currently isn't ideal.

  • YannickJYannickJ USMember ✭✭
    edited September 2017

    @NMackay

    I can change the BarBackgrondColor. What I mean is the popup list with ToolBarItems. Look at the image I uploaded.
    How do can I make the background white and the text color black?

  • NMackayNMackay GBInsider, University mod

    @YannickJ

    I posted somewhere on how to change that in AppCompat, let me try and find the post.

  • YannickJYannickJ USMember ✭✭
    edited September 2017

    @NMackay That is exactly what I needed! Thank you! Little side question, how do I get the textcolor black?

    Becouse if I use this item name="android:textColor">#000000</item it sets every text to black

  • NMackayNMackay GBInsider, University mod

    @YannickJ

    https://stackoverflow.com/questions/28267502/how-to-change-actionbars-menu-item-text-color-in-material-design

    You just need to play about with the theme, I don't know of the top of my head, it definitely worth checking how these API tweaks behave on older API levels.

  • YannickJYannickJ USMember ✭✭

    @NMackay Hmm whatever I try it stays white, omg how can this be so difficult :D

  • NMackayNMackay GBInsider, University mod

    @YannickJ

    I'll have a quick look, this stuff is a massive PITA sometimes :smiley:

  • YannickJYannickJ USMember ✭✭

    @NMackay Ok thank you! Yes but I'm used to XAML (UWP and WPF), there it is so easy to style a control by using blend or copy a template and change what you want :p

  • NMackayNMackay GBInsider, University mod

    @YannickJ

    Yeah but they are only styling one API, cross platform is fun as potentially you have to handle 3+ platform styling schemes.

    Anyway, I got this working.
    In Toolbar.axml

    <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:app="http://schemas.android.com/apk/res-auto"
              android:id="@+id/toolbar"
              android:layout_width="match_parent"
              android:layout_height="?attr/actionBarSize"
              android:minHeight="?attr/actionBarSize"
              android:background="?attr/colorPrimary"
              android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
              app:popupTheme="@style/CustomOverflowStyle" />
    

    And your style

    <?xml version="1.0" encoding="utf-8" ?>
    <resources>
    
      <style name="MainTheme" parent="MainTheme.Base">
      </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 http://www.google.com/design/spec/style/color.html#color-color-palette -->
        <!-- colorPrimary is used for the default action bar background -->
        <item name="colorPrimary">#2196F3</item>
        <!-- colorPrimaryDark is used for the status bar -->
        <item name="colorPrimaryDark">#1976D2</item>
        <!-- colorAccent is used as the default value for colorControlActivated
             which is used to tint widgets -->
        <item name="colorAccent">#FF4081</item>
        <!-- You can also set colorControlNormal, colorControlActivated
             colorControlHighlight and colorSwitchThumbNormal. -->
    
        <item name="windowActionModeOverlay">true</item>
      </style>
    
      <style name="CustomOverflowStyle" parent="Theme.AppCompat.NoActionBar">
        <item name="android:colorBackground">@color/OverflowBlue</item>
        <item name="android:textColor">@color/OverflowTextColorRed</item>
      </style>
    
    </resources>
    

    In Colors

    <color name="OverflowBlue">#1983BF</color>
    <color name="OverflowTextColorRed">#ff0000</color>
    

  • YannickJYannickJ USMember ✭✭
    edited September 2017

    @NMackay That works, thanks! But damn as a beginner in Xamarin Forms I would never found out by myself how to do that! Even with Google..

  • NMackayNMackay GBInsider, University mod
    edited September 2017

    @YannickJ

    Xamarin Forms is a cross platform abstraction of multiple platforms, it exposes 2000+ API's that can work commonly across all these platforms (mostly), there's probably 15000+ api over Xamarin iOS, Android & UWP, if you want to fine tune the out of the box Xamarin Forms experience you will have to invest time learning about certain platform specific capabilities, you need to wear many hats to be a good cross platform dev I guess.

    I guess tweaking the material design theme is not a beginner topic.

    Make the solution as an answer if it was helpful for the benefit of others.

    Thanks.

  • YannickJYannickJ USMember ✭✭

    @NMackay how can I do that? Just like the answer?

  • NMackayNMackay GBInsider, University mod

    Ahhh, your probably posted a forum post rather than a question, no worries.

Sign In or Register to comment.