SciChart ships with 8 stunning themes, which you can apply to your charts with a single line of code. This example shows how to style SciChart with your own custom theme, and how it affects default cursor, zoom, axis, grid and series colors.

To include a custom theme in your application, add styles to a resource file in styles.xml, ensuring all the keys are entered for the SciChart theme (see styles.xml). After that, the theme can be applied to SciChart in a single line of code.

Tips!

To define your custom theme you need to override a bunch of drawables and colors and provide a file with style attributes or you can implement IThemeProvider interface on your own.

// example_single_chart_fragment.xml

<?xml version="1.0" encoding="utf-8"?><!--*************************************************************************-->
<!-- SCICHART® Copyright SciChart Ltd. 2011-2016. All rights reserved. -->
<!--   -->
<!-- Web: http://www.scichart.com -->
<!-- Support: support@scichart.com -->
<!-- Sales:   sales@scichart.com -->
<!--  -->
<!-- example_single_chart_fragment.xml is part of the SCICHART® Examples. Permission is hereby granted -->
<!-- to modify, create derivative works, distribute and publish any part of this source -->
<!-- code whether for commercial, private or personal use. -->
<!--  -->
<!-- The SCICHART® examples are distributed in the hope that they will be useful, but -->
<!-- without any warranty. It is provided "AS IS" without warranty of any kind, either -->
<!-- expressed or implied. -->
<!--*************************************************************************-->

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.scichart.charting.visuals.SciChartSurface
        android:id="@+id/chart"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

</LinearLayout>

// Styles.xml

<!--*************************************************************************-->
<!-- SCICHART® Copyright SciChart Ltd. 2011-2017. All rights reserved. -->
<!--   -->
<!-- Web: http://www.scichart.com -->
<!-- Support: support@scichart.com -->
<!-- Sales:   sales@scichart.com -->
<!--  -->
<!-- styles.xml is part of the SCICHART® Examples. Permission is hereby granted -->
<!-- to modify, create derivative works, distribute and publish any part of this source -->
<!-- code whether for commercial, private or personal use. -->
<!--  -->
<!-- The SCICHART® examples are distributed in the hope that they will be useful, but -->
<!-- without any warranty. It is provided "AS IS" without warranty of any kind, either -->
<!-- expressed or implied. -->
<!--*************************************************************************-->

<resources>

    <!--BEGIN_DEMO_APPLICATION-->
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/color_primary</item>
        <item name="colorPrimaryDark">@color/color_primary_dark</item>
        <item name="colorAccent">@color/color_accent</item>
        <item name="android:textColorPrimary">@color/color_primary_text</item>
        <item name="android:windowBackground">@color/color_window_background</item>
        <item name="android:textColor">@color/color_primary_text</item>
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="android:buttonStyle">@style/ButtonStyle</item>
    </style>

    <style name="Theme_Dialog" parent="android:Theme.Holo.Dialog">
        <item name="android:windowMinWidthMajor">90%</item>
        <item name="android:windowMinWidthMinor">90%</item>
    </style>

    <style name="ShowCode_Dialog" parent="android:Theme.Holo.Dialog">
        <item name="android:windowMinWidthMajor">90%</item>
        <item name="android:windowMinWidthMinor">90%</item>
        <item name="android:windowNoTitle">true</item>
    </style>

    <style name="progress_bar_style">
        <item name="android:windowTitleStyle">@null</item>
    </style>

    <style name="ButtonStyle">
        <item name="android:background">@drawable/app_button_background</item>
        <item name="android:textColor">#FFFFFF</item>
        <item name="android:textAppearance">?android:attr/textAppearanceButton</item>
        <item name="android:minHeight">28dip</item>
        <item name="android:minWidth">58dip</item>
        <item name="android:layout_width">wrap_content</item>
        <item name="android:focusable">true</item>
        <item name="android:clickable">true</item>
        <item name="android:gravity">center_vertical|center_horizontal</item>
        <item name="android:shadowColor">#000000</item>
        <item name="android:shadowDx">5</item>
        <item name="android:shadowDy">5</item>
        <item name="android:shadowRadius">5</item>
    </style>

    <style name="AppTheme.AppBarLayout" parent="ThemeOverlay.AppCompat.Dark.ActionBar"/>

    <style name="AppTheme.AppBar" parent="ThemeOverlay.AppCompat.Light">
        <item name="android:minHeight">?attr/actionBarSize</item>
        <item name="android:layout_height">?attr/actionBarSize</item>
        <item name="android:layout_width">match_parent</item>
        <item name="android:background">@color/color_primary</item>
        <item name="android:textSize">@dimen/toolbar_title_size</item>
    </style>

    <style name="SciChart_ExampleSpinnerStyle">
        <item name="android:background">@android:color/transparent</item>
        <item name="android:layout_marginStart">10dp</item>
        <item name="android:drawSelectorOnTop">true</item>
        <item name="android:layout_gravity">center_vertical</item>
    </style>

    <style name="SciChart_ExportProgressDialogStyle" parent="@android:style/Theme.Dialog">
        <item name="android:textColorPrimary">@color/color_primary_text</item>
        <item name="android:alertDialogStyle">@style/SciChart_AlertDialogStyle</item>
        <item name="android:windowBackground">@color/color_primary</item>
    </style>

    <style name="SciChart_AlertDialogStyle">
        <item name="android:bottomBright">@color/color_primary</item>
        <item name="android:bottomDark">@color/color_primary</item>
        <item name="android:bottomMedium">@color/color_primary</item>
        <item name="android:centerBright">@color/color_primary</item>
        <item name="android:centerDark">@color/color_primary</item>
        <item name="android:centerMedium">@color/color_primary</item>
        <item name="android:fullBright">@color/color_primary</item>
        <item name="android:fullDark">@color/color_primary</item>
        <item name="android:topBright">@color/color_primary</item>
        <item name="android:topDark">@color/color_primary</item>
    </style>

    <!--END_DEMO_APPLICATION-->

    <style name="SciChart_BerryBlue" parent="SciChart_BaseStyle">
        <!-- Background defaults -->
        <item name="sciChartBackground">@drawable/example_sci_chart_berry_blue_background</item>
        <item name="legendBackground">@drawable/example_sci_chart_berry_blue_legend_background
        </item>
        <item name="axisTooltipBackground">@drawable/example_sci_chart_berry_blue_label_background</item>

        <item name="renderableSeriesAreaBorderColor">#102A47</item>
        <item name="renderableSeriesAreaFillColor">@android:color/transparent</item>

        <item name="defaultTextColor">#EEEEEE</item>

        <!-- Axis defaults -->
        <item name="tickTextColor">#FF6495ED</item>
        <item name="majorGridLineColor">#102A47</item>
        <item name="minorGridLineColor">#0D223D</item>
        <item name="axisBandsColor">#0E233A</item>

        <!-- Modifier defaults -->
        <item name="rolloverLineColor">#33FD9F25</item>
        <item name="cursorLineColor">#996495ED</item>
        <item name="rubberBandStrokeColor">#77999999</item>
        <item name="rubberBandFillColor">#33999999</item>
        <item name="axisTooltipTextColor">#EEEEEE</item>

        <!-- MountainSeries defaults -->
        <item name="mountainLineColor">#76BBD2</item>
        <!-- TODO - this should be a gradient -->
        <item name="mountainAreaColor">#094C9F</item>

        <!-- LineSeries defaults -->
        <item name="lineSeriesColor">#FFC6E6FF</item>

        <!-- ColumnSeries defaults -->
        <item name="columnLineColor">#FFFFFFFF</item>
        <item name="columnFillColor">#FFFFFFFF</item>

        <!-- CandlestickSeries defaults -->
        <item name="candleStickStrokeUpColor">#FF6495ED</item>
        <item name="candleStickStrokeDownColor">#FF00008B</item>
        <item name="candleStickFillUpColor">#A06495ED</item>
        <item name="candleStickFillDownColor">#A000008B</item>

        <!-- BandSeries defaults -->
        <item name="bandStrokeUpColor">#FF6495ED</item>
        <item name="bandStrokeDownColor">#FF00008B</item>
        <item name="bandFillUpColor">#A06495ED</item>
        <item name="bandFillDownColor">#A000008B</item>
    </style>

    <declare-styleable name="FlowLayout_LayoutParams">
        <attr name="layout_breakLine" format="boolean" />
        <attr name="layout_horizontalSpacing" format="dimension" />
    </declare-styleable>

    <style name="ExampleSettingsPopupStyle">
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_width">wrap_content</item>
        <item name="android:padding">10dp</item>
        <item name="android:background">@drawable/example_popup_background</item>
    </style>

    <style name="PopupSpinnerStyle">
        <item name="android:layout_gravity">fill_horizontal</item>
        <item name="android:layout_margin">5dp</item>
        <item name="android:background">@android:color/transparent</item>
    </style>

    <style name="SwitchTheme" parent="ThemeOverlay.AppCompat.Dark">
        <!-- colorPrimary is used for the default action bar background -->
        <item name="colorPrimary">@android:color/white</item>
        <!-- colorPrimaryDark is used for the status bar -->
        <item name="colorPrimaryDark">@android:color/white</item>
        <!-- colorAccent is used as the default value for colorControlActivated, which is used to tint widgets -->
        <item name="colorAccent">@android:color/white</item>
        <item name="colorControlActivated">@android:color/white</item>
        <item name="colorControlHighlight">@android:color/white</item>
        <item name="colorSwitchThumbNormal">@color/color_primary_dark</item>
    </style>

    <style name="SwitchStyle" parent="ThemeOverlay.AppCompat.Dark">
        <item name="android:layout_marginTop">10dp</item>
        <item name="android:layout_marginBottom">10dp</item>
        <item name="android:layout_gravity">center_vertical|fill_horizontal</item>
    </style>

</resources>

// CustomThemeFragment.java

//******************************************************************************
// SCICHART® Copyright SciChart Ltd. 2011-2017. All rights reserved.
//
// Web: http://www.scichart.com
// Support: support@scichart.com
// Sales:   sales@scichart.com
//
// CustomThemeFragment.java is part of the SCICHART® Examples. Permission is hereby granted
// to modify, create derivative works, distribute and publish any part of this source
// code whether for commercial, private or personal use.
//
// The SCICHART® examples are distributed in the hope that they will be useful, but
// without any warranty. It is provided "AS IS" without warranty of any kind, either
// expressed or implied.
//******************************************************************************

package com.scichart.examples.fragments;

import com.daasuu.ei.Ease;
import com.daasuu.ei.EasingInterpolator;
import com.scichart.charting.model.dataSeries.IOhlcDataSeries;
import com.scichart.charting.model.dataSeries.IXyDataSeries;
import com.scichart.charting.visuals.SciChartSurface;
import com.scichart.charting.visuals.axes.AutoRange;
import com.scichart.charting.visuals.axes.AxisAlignment;
import com.scichart.charting.visuals.axes.IAxis;
import com.scichart.charting.visuals.renderableSeries.FastCandlestickRenderableSeries;
import com.scichart.charting.visuals.renderableSeries.FastColumnRenderableSeries;
import com.scichart.charting.visuals.renderableSeries.FastLineRenderableSeries;
import com.scichart.charting.visuals.renderableSeries.FastMountainRenderableSeries;
import com.scichart.core.framework.UpdateSuspender;
import com.scichart.examples.R;
import com.scichart.examples.data.DataManager;
import com.scichart.examples.data.PriceSeries;
import com.scichart.examples.fragments.base.ExampleBaseFragment;
import com.scichart.examples.utils.BillionsLabelProvider;
import com.scichart.examples.utils.ThousandsLabelProvider;

import java.util.Collections;

import butterknife.BindView;

public class CustomThemeFragment extends ExampleBaseFragment {
    @BindView(R.id.chart)
    SciChartSurface surface;

    @Override
    public boolean showDefaultModifiersInToolbar() {
        return false;
    }

    @Override
    protected int getLayoutId() {
        return R.layout.example_single_chart_fragment;
    }

    @Override
    protected void initExample() {
        final IAxis xBottomAxis = sciChartBuilder.newNumericAxis().withGrowBy(0.1d, 0.1d).withVisibleRange(150, 180).build();

        final IAxis yRightAxis = sciChartBuilder.newNumericAxis()
                .withGrowBy(0.1d, 0.1d)
                .withAxisAlignment(AxisAlignment.Right)
                .withAutoRangeMode(AutoRange.Always)
                .withAxisId("PrimaryAxisId")
                .withDrawMajorTicks(false)
                .withDrawMinorTicks(false)
                .withLabelProvider(new ThousandsLabelProvider())
                .build();

        final IAxis yLeftAxis = sciChartBuilder.newNumericAxis()
                .withGrowBy(0, 3d)
                .withAxisAlignment(AxisAlignment.Left)
                .withAutoRangeMode(AutoRange.Always)
                .withAxisId("SecondaryAxisId")
                .withDrawMajorTicks(false)
                .withDrawMinorTicks(false)
                .withLabelProvider(new BillionsLabelProvider())
                .build();

        final DataManager dataManager = DataManager.getInstance();
        final PriceSeries priceBars = dataManager.getPriceDataIndu(getActivity());

        final IXyDataSeries<Double, Double> mountainDataSeries = sciChartBuilder.newXyDataSeries(Double.class, Double.class).withSeriesName("Mountain Series").build();
        final IXyDataSeries<Double, Double> lineDataSeries = sciChartBuilder.newXyDataSeries(Double.class, Double.class).withSeriesName("Line Series").build();
        final IXyDataSeries<Double, Long> columnDataSeries = sciChartBuilder.newXyDataSeries(Double.class, Long.class).withSeriesName("Column Series").build();
        final IOhlcDataSeries<Double, Double> candlestickDataSeries = sciChartBuilder.newOhlcDataSeries(Double.class, Double.class).withSeriesName("Candlestick Series").build();

        mountainDataSeries.append(priceBars.getIndexesAsDouble(), dataManager.offset(priceBars.getLowData(), -1000));
        candlestickDataSeries.append(priceBars.getIndexesAsDouble(), priceBars.getOpenData(), priceBars.getHighData(), priceBars.getLowData(), priceBars.getCloseData());
        lineDataSeries.append(priceBars.getIndexesAsDouble(), dataManager.computeMovingAverage(priceBars.getCloseData(), 50));
        columnDataSeries.append(priceBars.getIndexesAsDouble(), priceBars.getVolumeData());

        final FastMountainRenderableSeries mountainSeries = sciChartBuilder.newMountainSeries().withDataSeries(mountainDataSeries).withYAxisId("PrimaryAxisId").build();
        final FastLineRenderableSeries lineSeries = sciChartBuilder.newLineSeries().withDataSeries(lineDataSeries).withYAxisId("PrimaryAxisId").build();
        final FastColumnRenderableSeries columnSeries = sciChartBuilder.newColumnSeries().withDataSeries(columnDataSeries).withYAxisId("SecondaryAxisId").build();
        final FastCandlestickRenderableSeries candlestickSeries = sciChartBuilder.newCandlestickSeries().withDataSeries(candlestickDataSeries).withYAxisId("PrimaryAxisId").build();

        UpdateSuspender.using(surface, new Runnable() {
            @Override
            public void run() {
                // set theme id from styles
                surface.setTheme(R.style.SciChart_BerryBlue);

                Collections.addAll(surface.getXAxes(), xBottomAxis);
                Collections.addAll(surface.getYAxes(), yRightAxis, yLeftAxis);
                Collections.addAll(surface.getRenderableSeries(), mountainSeries, columnSeries, candlestickSeries, lineSeries);
                Collections.addAll(surface.getChartModifiers(), sciChartBuilder.newModifierGroupWithDefaultModifiers().withLegendModifier().withShowCheckBoxes(false).build().build());

                sciChartBuilder.newAnimator(mountainSeries).withScaleTransformation(10500d).withInterpolator(new EasingInterpolator(Ease.ELASTIC_OUT)).withDuration(3000).withStartDelay(350).start();
                sciChartBuilder.newAnimator(candlestickSeries).withScaleTransformation(11700d).withInterpolator(new EasingInterpolator(Ease.ELASTIC_OUT)).withDuration(3000).withStartDelay(350).start();
                sciChartBuilder.newAnimator(lineSeries).withScaleTransformation(12250d).withInterpolator(new EasingInterpolator(Ease.ELASTIC_OUT)).withDuration(3000).withStartDelay(350).start();
                sciChartBuilder.newAnimator(columnSeries).withScaleTransformation(10500d).withInterpolator(new EasingInterpolator(Ease.ELASTIC_OUT)).withDuration(3000).withStartDelay(350).start();
            }
        });
    }
}

< BACK TO ALL ANDROID CHART CHART EXAMPLES