Can we override Android/Values/Styles.xml in App.xaml?

voidstreamvoidstream FRMember ✭✭✭
edited January 2017 in Xamarin.Forms

Hello,

Can we access/override android theme values in App.xaml?

Styles.xml

<?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">#151515</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>

    <item name="android:datePickerDialogTheme">@style/AppCompatDialogStyle</item>
  </style>

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

Best Answer

  • AlexDunnAlexDunn US ✭✭✭
    Accepted Answer

    Yes, and what I gave you is for Xamarin.Forms PCL with a separate Xamarin.Android project.
    The SetTheme and SetStatusBarColor are called in the MainActivity in your Android project, but they are updated from an event in your PCL App.cs.

    Here:

    In your PCL:

     public partial class App : Xamarin.Forms.Application
     {
            public event EventHandler OnUseRedTheme;
            public App()
            {
                InitializeComponent();
    
                // configure your app
            }
            public void UseRedTheme()
            {
                // DO STUFF TO SET YOUR APP.XAML THEME
               // ....
               OnUseRedTheme?.Invoke(this, null);
            }
    }
    

    In your page:

    public partial class MyPage : ContentPage
    {
            public MyPage()
            {
                InitializeComponent();
                // assuming you have a button called MyButton in your XAML
                MyButton.Clicked += (s,a) => { ((App)Application.Current).UseRedTheme(); };
            }
    }
    

    In your MainActivity.cs in your Android project:

     public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
        {
            protected override void OnCreate(Bundle bundle)
            {
                TabLayoutResource = Resource.Layout.Tabbar;
                ToolbarResource = Resource.Layout.Toolbar;
    
                base.OnCreate(bundle);
                global::Xamarin.Forms.Forms.Init(this, bundle);
                var app = new App();
                app.OnUseRedTheme += (s,a) =>
                {
                    SetTheme(Resource.Style.Theme_Main_Red);
                    SetStatusBarColor(new Color(211, 47, 47));
                }
                LoadApplication(app);
            }
        }
    

Answers

  • AlexDunnAlexDunn USMember ✭✭✭

    There are certain style properties that Xamarin.Forms does not control. Your best bet to override those styles is to just create a new theme in your Android app (or just replace values in the theme above).

  • voidstreamvoidstream FRMember ✭✭✭

    @AlexDunn So if i want to switch theme during the app, how i can do it? Which properties?

  • AlexDunnAlexDunn USMember ✭✭✭
    edited January 2017

    I've done this in the past using an event that the Android app then listens for and updates accordingly.
    1. User selects a new theme
    2. Xamarin.Forms updates theme colors
    3. Event is fired from App.xaml.cs
    4. MainActivity listens for event and updates theme.

    If you have multiple Android themes in your styles.xml, you can change them using this:

    SetTheme(Resource.Style.Theme_Main_Red);
    SetStatusBarColor(new Color(211, 47, 47));
    

    Note that I created a separate theme in my styles.xml called Theme_Main_Red

  • voidstreamvoidstream FRMember ✭✭✭

    @AlexDunn said:
    I've done this in the past using an event that the Android app then listens for and updates accordingly.
    1. User selects a new theme
    2. Xamarin.Forms updates theme colors
    3. Event is fired from App.xaml.cs
    4. MainActivity listens for event and updates theme.

    If you have multiple Android themes in your styles.xml, you can change them using this:

    SetTheme(Resource.Style.Theme_Main_Red);
    SetStatusBarColor(new Color(211, 47, 47));
    

    Note that I created a separate theme in my styles.xml called Theme_Main_Red

    I'm using Xamarin Forms CrossPlatform in PCL :/ You are talking for Android project right?

  • AlexDunnAlexDunn USMember ✭✭✭
    Accepted Answer

    Yes, and what I gave you is for Xamarin.Forms PCL with a separate Xamarin.Android project.
    The SetTheme and SetStatusBarColor are called in the MainActivity in your Android project, but they are updated from an event in your PCL App.cs.

    Here:

    In your PCL:

     public partial class App : Xamarin.Forms.Application
     {
            public event EventHandler OnUseRedTheme;
            public App()
            {
                InitializeComponent();
    
                // configure your app
            }
            public void UseRedTheme()
            {
                // DO STUFF TO SET YOUR APP.XAML THEME
               // ....
               OnUseRedTheme?.Invoke(this, null);
            }
    }
    

    In your page:

    public partial class MyPage : ContentPage
    {
            public MyPage()
            {
                InitializeComponent();
                // assuming you have a button called MyButton in your XAML
                MyButton.Clicked += (s,a) => { ((App)Application.Current).UseRedTheme(); };
            }
    }
    

    In your MainActivity.cs in your Android project:

     public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
        {
            protected override void OnCreate(Bundle bundle)
            {
                TabLayoutResource = Resource.Layout.Tabbar;
                ToolbarResource = Resource.Layout.Toolbar;
    
                base.OnCreate(bundle);
                global::Xamarin.Forms.Forms.Init(this, bundle);
                var app = new App();
                app.OnUseRedTheme += (s,a) =>
                {
                    SetTheme(Resource.Style.Theme_Main_Red);
                    SetStatusBarColor(new Color(211, 47, 47));
                }
                LoadApplication(app);
            }
        }
    
  • voidstreamvoidstream FRMember ✭✭✭

    @AlexDunn Thanks, i never used code between different projects. Theme are a good test for this. I will try this later thx!

  • AlexDunnAlexDunn USMember ✭✭✭
    edited January 2017

    Make sure to mark the answer so others know where to look :)

Sign In or Register to comment.