Tutorials
Getting started
Chart interface
Web components
Chart internals
Data integration
Customization
Frameworks and bundlers
Mobile development
Trading
Time Span Events
Term structures
ScriptIQ
Troubleshooting
Glossary
Reference
JSFiddles

Mobile App Customization

Android

The ChartIQ-Android-SDK GitHub repository contains a sample app that you can customize to create your own Android charting application.

The app is located in the demo folder of the repository.

Application colors

You can easily customize any of the colors of the ChartIQ Android app.

To edit app colors, open the colors.xml file in the demo/src/main/res/values folder of your copy of the project.

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">@color/mountainMeadow</color>
    <color name="colorPrimaryDark">@color/ghostWhite</color>
    <color name="colorAccent">@color/mountainMeadow</color>

    <color name="white">#ffffff</color>
    <color name="cadetBlue">#abb0ba</color>
    <color name="mountainMeadow">#27cc8d</color>
    <color name="ghostWhite">#f9f9f9</color>
    <color name="brightGrey">#ebeff3</color>
    <color name="darkElectricBlue">#53627c</color>
    <color name="gainsboro">#dadfe3</color>

    <color name="logoTitleColor">@color/darkGunmetal</color>
    <color name="icPrimaryColor">@color/darkElectricBlue</color>
    <color name="toolbarBackgroundColor">@color/ghostWhite</color>
    <color name="toolbarTitleTextColor">@color/black</color>
    <color name="placeholderSecondaryColor">@color/brightGrey</color>
    <color name="placeholderTertiaryColor">@color/ghostWhite</color>
    <color name="chooseScreenBackgroundColor">@color/ghostWhite</color>
    <color name="navBarBackgroundColor">@color/ghostWhite</color>
    <color name="layoutBackgroundColor">@color/white</color>

    <color name="chartButtonBackgroundTintColor">@color/brightGrey</color>
    <color name="favoriteCheckboxTintColor">@color/darkElectricBlue</color>
    <color name="checkboxButtonColor">@color/brightGrey</color>
    <color name="checkboxIcColor">@color/brightGrey</color>
    <color name="crosshairsLabelColor">@color/darkElectricBlue</color>
    <color name="crosshairsTextColor">@color/yankeesBlue</color>
    <color name="crosshairsBackgroundColor">@color/ghostWhite</color>
    <color name="drawActionBackgroundColor">@color/white</color>
    <color name="panelBackgroundColor">@color/brightGrey</color>
    <color name="panelInstrumentBackgroundColor">@color/white</color>
    <color name="panelItemBackgroundColor">@color/white</color>
    <color name="fontStyleColor">@color/chineseBlack</color>

    <color name="secondaryTextColor">@color/cadetBlue</color>
    <color name="subtitleTextColor">@color/darkElectricBlue</color>

    <color name="dialogNeutralButtonTextColor">@color/elevationDark</color>
    <color name="dialogBackgroundColor">@color/white</color>
    <color name="searchStudyInputBackgroundColor">@color/white</color>
    <color name="separatorColor">@color/brightGrey</color>

    <color name="darkGunmetal">#18252e</color>
    <color name="chineseBlack">#091924</color>
    <color name="yankeesBlue">#153246</color>
    <color name="outerSpace">#273843</color>
    <color name="coralRed">#ff3b30</color>
    <color name="black">#000000</color>
    <color name="elevationDark">#121212</color>
    <color name="scrim">#51000000</color>
    <color name="disabledBtn">#efefef</color>
    <color name="mayaBlue">#8bd0ff</color>
</resources>

The file contains color attributes that define the default theme of the app. The file includes:

  • App theme colors
  • App colors
  • View colors

App theme colors

<color name="colorPrimary">@color/mountainMeadow</color>
<color name="colorPrimaryDark">@color/ghostWhite</color>
<color name="colorAccent">@color/mountainMeadow</color>

Theme color attributes are the colors of the application user interface:

  • colorPrimary — Main color of app screens and components
  • colorPrimaryDark — Dark variant of the main color; by default, applied to the status bar
  • colorAccent — Bright complement to the main color; by default, applied to controls

By updating the theme color settings, you can quickly customize your app's appearance. To update a theme color, specify a color attribute, for example:

<color name="colorPrimary">@color/cadetBlue</color>

Note: The demo application uses color attributes (such as @color/mountainMeadow, which is also defined in colors.xml) to set the theme colors. You should modify theme colors by specifying different color attributes or by changing the color attribute definitions — for example, by changing the hexadecimal color code in <color name="mountainMeadow">#27cc8d</color> — rather than setting theme colors to hexadecimal color codes directly.

App colors

<color name="white">#ffffff</color>
<color name="cadetBlue">#abb0ba</color>
<color name="mountainMeadow">#27cc8d</color>
<color name="ghostWhite">#f9f9f9</color>
<color name="brightGrey">#ebeff3</color>
<color name="darkElectricBlue">#53627c</color>
<color name="gainsboro">#dadfe3</color>

<color name="darkGunmetal">#18252e</color>
<color name="chineseBlack">#091924</color>
<color name="yankeesBlue">#153246</color>
<color name="outerSpace">#273843</color>
<color name="coralRed">#ff3b30</color>
<color name="black">#000000</color>
<color name="elevationDark">#121212</color>
<color name="scrim">#51000000</color>
<color name="disabledBtn">#efefef</color>
<color name="mayaBlue">#8bd0ff</color>

The app colors are the color palette of the application. App color attributes are used by app views, styles, themes, and other color attributes. Attribute names represent colors. Hexadecimal color codes specify the color values. For example, "white" is the name of a color attribute; #ffffff is the color value.

To add more colors to your application, create new color attributes and then reference them in styles, themes, UI elements, and other color attributes where you want to apply your new color.

View colors

<color name="logoTitleColor">@color/darkGunmetal</color>
<color name="icPrimaryColor">@color/darkElectricBlue</color>
<color name="toolbarBackgroundColor">@color/ghostWhite</color>
<color name="toolbarTitleTextColor">@color/black</color>
<color name="placeholderSecondaryColor">@color/brightGrey</color>
<color name="placeholderTertiaryColor">@color/ghostWhite</color>
<color name="chooseScreenBackgroundColor">@color/ghostWhite</color>
<color name="navBarBackgroundColor">@color/ghostWhite</color>
<color name="layoutBackgroundColor">@color/white</color>

<color name="chartButtonBackgroundTintColor">@color/brightGrey</color>
<color name="favoriteCheckboxTintColor">@color/darkElectricBlue</color>
<color name="checkboxButtonColor">@color/brightGrey</color>
<color name="checkboxIcColor">@color/brightGrey</color>
<color name="crosshairsLabelColor">@color/darkElectricBlue</color>
<color name="crosshairsTextColor">@color/yankeesBlue</color>
<color name="crosshairsBackgroundColor">@color/ghostWhite</color>
<color name="drawActionBackgroundColor">@color/white</color>
<color name="panelBackgroundColor">@color/brightGrey</color>
<color name="panelInstrumentBackgroundColor">@color/white</color>
<color name="panelItemBackgroundColor">@color/white</color>
<color name="fontStyleColor">@color/chineseBlack</color>

<color name="secondaryTextColor">@color/cadetBlue</color>
<color name="subtitleTextColor">@color/darkElectricBlue</color>

<color name="dialogNeutralButtonTextColor">@color/elevationDark</color>
<color name="dialogBackgroundColor">@color/white</color>
<color name="searchStudyInputBackgroundColor">@color/white</color>
<color name="separatorColor">@color/brightGrey</color>

View color attributes are used to style the color properties of views or other UI elements. For example, the crosshairsLabelColor attribute represents the color of a label that shows a value related to the position of the crosshairs. The attribute values are references to other color attributes, such as @color/darkElectricBlue.

Changing the view color attributes changes the appearance of the views styled by the attributes. For instance, if you change subtitleTextColor to @color/yankeesBlue, all text views that have their text color set to subtitleTextColor will be styled with @color/yankeesBlue.

Find Usages

Color attributes can become scattered throughout your application (a good reason to centralize their definitions). In Android Studio, to see where a color attribute is used in your app, right-click the attribute and select Find Usages.

Find color usage
Figure. Find color usage.

Night Mode

Night Mode adjusts display settings to reduce eye strain when using Android devices at nighttime. To support Night Mode, the ChartIQ Android app includes a values-night folder in the demo/src/main/res/ directory.

The folder contains the following colors.xml file:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="logoTitleColor">@color/white</color>
    <color name="icPrimaryColor">@color/white</color>
    <color name="toolbarBackgroundColor">@color/chineseBlack</color>
    <color name="toolbarTitleTextColor">@color/white</color>
    <color name="placeholderSecondaryColor">@color/chineseBlack</color>
    <color name="placeholderTertiaryColor">@color/outerSpace</color>
    <color name="chooseScreenBackgroundColor">@color/darkGunmetal</color>
    <color name="navBarBackgroundColor">@color/chineseBlack</color>
    <color name="layoutBackgroundColor">@color/darkGunmetal</color>

    <color name="chartButtonBackgroundTintColor">@color/yankeesBlue</color>
    <color name="favoriteCheckboxTintColor">@color/white</color>
    <color name="checkboxButtonColor">@color/yankeesBlue</color>
    <color name="checkboxIcColor">@color/yankeesBlue</color>
    <color name="crosshairsBackgroundColor">@color/chineseBlack</color>
    <color name="crosshairsLabelColor">@color/cadetBlue</color>
    <color name="crosshairsTextColor">@color/mayaBlue</color>
    <color name="drawActionBackgroundColor">@color/darkGunmetal</color>
    <color name="panelBackgroundColor">@color/yankeesBlue</color>
    <color name="panelInstrumentBackgroundColor">@color/darkGunmetal</color>
    <color name="panelItemBackgroundColor">@color/chineseBlack</color>
    <color name="fontStyleColor">@color/white</color>

    <color name="secondaryTextColor">@color/white</color>
    <color name="subtitleTextColor">@color/white</color>

    <color name="dialogNeutralButtonTextColor">@color/white</color>
    <color name="dialogBackgroundColor">@color/darkGunmetal</color>
    <color name="searchStudyInputBackgroundColor">@color/darkGunmetal</color>
    <color name="separatorColor">@color/outerSpace</color>
</resources>

The file defines color attributes with the same names as those in the colors.xml file in the demo/src/main/res/values folder. When the device is in Night Mode, the color attributes in values-night/colors.xml override the attributes in values/colors.xml. (The colors.xml file in the demo/src/main/res/values folder defines color attributes for non-night mode.)

To modify the app colors for Night Mode, change the color attributes in the colors.xml file in the demo/src/main/res/values-night folder.

Note: Color attributes must have the same name as the attribute they're intended to override.

Color picker

The colors of the chart color picker are specified in the array.xml file located in the demo/src/main/res/values folder.

The colors are contained in the "colors" array:

<array name="colors">
    <item>#960616</item>
    <item>#ea1d2c</item>
    <item>#ef6c53</item>
    <item>#e4977c</item>
    <item>#ffffff</item>
    <item>#a16118</item>
    <item>#f4932f</item>
    <item>#f8ae63</item>
    <item>#fbc58d</item>
    <item>#cccccc</item>
    <item>#cbb920</item>
    <item>#fff126</item>
    <item>#fff371</item>
    <item>#fff69e</item>
    <item>#b7b7b7</item>
    <item>#007238</item>
    <item>#00a553</item>
    <item>#43b77a</item>
    <item>#85c99e</item>
    <item>#898989</item>
    <item>#00746a</item>
    <item>#00a99c</item>
    <item>#2ebbb3</item>
    <item>#7fcdc7</item>
    <item>#707070</item>
    <item>#004c7f</item>
    <item>#0073ba</item>
    <item>#4a8dc8</item>
    <item>#7DA6F5</item>
    <item>#555555</item>
    <item>#62095f</item>
    <item>#912a8e</item>
    <item>#a665a7</item>
    <item>#bb8dbe</item>
    <item>#1d1d1d</item>
    <item>#9c005d</item>
    <item>#e9088c</item>
    <item>#ee6fa9</item>
    <item>#f29bc1</item>
    <item>#000000</item>
</array>

You can modify the color picker by modifying the array:

  • Add a color — Add an <item> element containing a hexadecimal color code
  • Edit a color — Change the hex code in an <item> element
  • Remove a color — Delete the <item> element that contains the hex color code

Splash screen

The app splash screen is defined in the activity_splash.xml layout file in the demo/src/main/res/layout folder. You can change the splash screen logo by modifying the layout file.

The activity_splash.xml file contains an ImageView that renders the logo:

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.AppCompatImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:src="@drawable/ic_logo" />

To change the logo image:

  • revise the src attribute to reference a different drawable; for example android:src="@drawable/my_new_logo", or

  • replace the ic_logo.xml file in the demo/src/main/res/drawable folder with a different vector drawable.

    Note: The image file extension must be xml not svg. Android Studio includes a tool called Vector Asset Studio which converts SVG vector images (svg extension) to drawables (xml extension). Use Vector Asset Studio to create a vector drawable, name it “ic_logo”, and replace the existing logo file in the res/drawable folder.

Next steps