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. The file contains color attributes that define the default color pallette of the app as follows:

  • App theme colors
  • App colors
  • View colors

The folder contains the following colors.xml file:

<?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>

App theme colors

Theme color attributes are the colors used by key UI elements of the application.

<color name="colorPrimary">@color/mountainMeadow</color>
<color name="colorPrimaryDark">@color/ghostWhite</color>
<color name="colorAccent">@color/mountainMeadow</color>
  • colorPrimary — Main color of app screens and components
  • colorPrimaryDark — Dark variant of the primary color. By default, this color is applied to the status bar
  • colorAccent — Bright complement to the primary color. By default, this color is applied to controls

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

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

Note: The demo application uses color attributes (e.g. @color/mountainMeadow) defined in the app colors section of colors.xml to set theme colors. Modify theme colors by either specifying different color attributes or by changing app color attribute definitions. For example, change the hexadecimal color code in <color name="mountainMeadow">#27cc8d</color> rather than setting theme colors to hexadecimal color codes directly.

App colors

App colors are the color palette of the application. App color attributes are used by app views, styles, themes, and other color attributes.

<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>

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

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.

<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>

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.

Color usage

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 Show Usages.

Find color usage
Figure. Find color usage.

Dark mode

Dark mode adjusts display settings to reduce eye strain when using Android devices at nighttime. To support dark mode, the ChartIQ Android app includes a values-night folder in the demo/src/main/res/ directory, which 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, which defines color attributes for light mode. When the device is in dark mode, the color attributes in values-night/colors.xml override the attributes in values/colors.xml.)

To modify the app colors for dark 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 are 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 appears when a user launches the app. The 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.

Logo image

The layout has a parent FrameLayout element and a single ImageView that contains the logo. Change the logo image on the splash screen, a vector drawable with the name “ic_logo” should be replaced with your vector drawable.

The following code from activity_splash.xml contains an ImageView that renders the logo.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout>
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match parent"
    android:layout_height="match parent"
    
    <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" />
</FrameLayout>

To change the logo image, either:

  • revise the src attribute to reference a different vector 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.

The image file extension must be .xml, not .svg so the app can work with it as a vector image. Android Studio includes a tool called Vector Asset Studio that converts SVG vector images (svg extension) to vector drawables (xml extension). Use Vector Asset Studio to create a vector drawable, name it ic_logo.xml, and replace the existing logo file in the demo/src/main/res/drawable folder.

Background color

By default, the splash screen background color is defined by the app theme, but you can set it explicitly by adding the android:background property to the parent elementFrameLayout. The value can be either a color reference (e.g. @color/*) or a color hex code (e.g. “#000000”) as shown in the following code.

<FrameLayout>
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match parent"
    android:layout_height="match parent"
    android:background="#000000"

Demo app configuration

The demo app contains two configurations that differ only by navigation and main screen UI. Both offer the same functionality, but with a different UI for displaying the components that enable chart interaction.

For configuration, we use Android Studio flavors (similar to build types) to create different versions of your app from a single project. We have two flavors:

  • single_page_demo — single page UI that does not include ViewPager and BottomNavigation, and all necessary components of the chart are gathered on the single screen
  • tabs_demo — UI that contains BottomNavigation and ViewPager for main navigation

Both flavors are configured inside the android block in the module-level build.gradle file.

}
flavorDimentions "version"

productFlavors {
    single_page_demo {
        dimension "version"
        buildConfigField "boolean", "NEEDS_BACK_NAVIGATION, "true"
        buildConfigField "boolean", "NEEDS_CHAR_STYLE_OPTION", "false"

    }
    tabs_demo {
        dimension "version"
        buildConfigField "boolean", "NEEDS_BACK_NAVIGATION, "false"
        buildConfigField "boolean", "NEEDS_CHAR_STYLE_OPTION", "true"
    }
}

Gradle automatically creates build variants based on your build types and product flavors, and names them according to <product-flavor><Build-Type>.

You can change the build variant to whichever one you want to build and run. Select Build > Select Build Variant and select one from the drop-down menu.

Build variants
Figure. Build variants

If you want to have both configurations installed on the same phone or you want to publish both options as separate apps in Google Play, you need to assign a different applicationId to each variant. For more information, refer to "Configure product flavors" in Android Studio documentation.

Source Sets

Android Studio logically groups source code and resources for each module into source sets. By default, Android Studio automatically creates the main/ source set for everything you want to share between all your build variants, which includes all the common classes and views that are basic functionality. For the ChartIQ demo app, we created additional source sets for the components specific to each flavor.

Here are specific source sets that we use for each product flavor:

  • src/single_page_demo/ -- build variant source set for single page demo app
  • src/tabs_demo/ -- product flavor source set for the app with bottom navigation
  • src/main/ -- main source set that contains shared functionality
Source sets
Figure. Source sets

The following list is an example of the files and folders created for each flavor: * java/com/chartiq/demo/ChartIQApplication.kt * java/com/chartiq/demo/ChartSettingsPrefs.kt * java/com/chartiq/demo/ui/MainActivity.kt * java/com/chartiq/demo/ui/MainFragment.kt * java/com/chartiq/demo/ui/MainViewModel.kt * java/com/chartiq/demo/ui/ChartFragment.kt * java/com/chartiq/demo/ui/ChartViewModel.kt * /res/drawable/ * /res/layout/fragment_chart.xml * /res/layout/fragment_main.xml * /res/layout/navigation/graph_main.xml

Special attention should be paid to the navigation component which is not shared and has different configurations for each product flavor, which is reflected in the corresponding /res/layout/navigation/graph_main.xml files

Next steps