How to: Set the theme via XML

This how-to guide will explain how to set the theme for a chart via an XML style configuration.

Setting the Theme

shinobicharts comes with two styles by default, Light and Dark, but these can be extended via XML to override any of the values.

To set the theme for a chart you simply call the applyTheme method, and pass in the ID of the style you want to use and a boolean to indicate if you want to overwrite all values or only the defaults, for example to change from the default light theme and use the dark theme instead you would call:

Java

shinobiChart.applyTheme(R.style.Theme_Default_Dark, true);

C#

shinobiChart.ApplyTheme (Resource.Style.Theme_Default_Dark, true);

Which would load the theme that is defined in the styles.xml file:

XML

....
<!-- The Dark theme, Softer colors on a black background -->
<style name="Theme.Default.Dark">
    <item name="sc_chartTitleColor">@color/sc_chartDarkTitleColor</item>
    <item name="sc_axisTitleColor">@color/sc_axisDarkTitleColor</item>
    ...
</style>
....

Custom Styles

It is possible to write your own styles, simply include them in a res/values/styles.xml file and overwrite any values you want to change. For example to use the basic Dark style, but change the chart title colour to a custom red colour you would create the following style.xml file

XML

<resources xmlns:android="http://schemas.android.com/apk/res/android">
    <style name="Theme.Default.Dark.MyCustomTheme">
        <item name="sc_chartTitleColor">@color/my_custom_red</item>
    </style>
</resources>

and the corresponding colour in the res/values/colors.xml:

XML

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="my_custom_red">#FFFF1111</color>
</resources>

and then set it on your chart by calling

Java

shinobiChart.applyTheme(R.style.Theme_Default_Dark_MyCustomTheme, true);

C#

shinobiChart.ApplyTheme (Resource.Style.Theme_Default_Dark_MyCustomTheme, true);

By labelling your theme “Theme.Default.Dark.MyCustomTheme” in the XML you are including all of the defined attributes in the Theme, Default and Dark themes, and only overwriting the ones you need for MyCustomTheme. This is an easy way to create chart themes that are based on other themes and only change a few variables.

Preserving Changes

If you have made some additional configurations to your chart, for example changing some text or axis colors, but still need to change the Theme, you can use:

Java

shinobiChart.applyTheme(R.style.Theme_Default_Dark, false);

C#

shinobiChart.ApplyTheme (Resource.Style.Theme_Default_Dark, false);

to preserve all of your changes, and only overwrite values that have not been explicitly set in Java.

Here is what a chart looks like with no style set, so using the default Light theme:

Default Style

And this is what it looks like using our custom Dark theme with red title as described above and included in the sample project:

Default Style

See related code sample: Themes Sample, in the samples/themes folder of your product download (Xamarin.Android/samples/Themes if you’re using Xamarin.Android).