Android Keyboard Theme

Create a Theme

All the themes for the keyboard can be defined in a single JSON file. Create a file called KBThemes.json in your app/src/main/assets folder with the following structure:

[
  {
    "order": 0,
    "kb1_toolbar_items_color": "#FFFFFF",
    "kb2_toolbar_active_item_color": "#0096FF",
    "kb3_toolbar_bg_color": "#6BBFFA",
    "kb4_main_elements_color": "#65ADE0",
    "kb5_secondary_elements_color": "#333748",
    "kb6_misc_elements_color": "#47ADF4",
    "kb7_keyborders_bg_color": "#FFFFFF",
    "kb8_keyborders_text_color": "#333748",
    "kb9_no_keyborders_text_color": "#333748",
    "kb10_neutral_status_color": "#494369",
    "kb11_good_status_color": "#51BD9F",
    "kb12_warning_status_color": "#FBBC17",
    "kb13_bad_status_color": "#ED4057",
    "kb14_main_color_foreground_color": "#FFFFFF",
    "kb15_keyboard_background_color": "#F6F6F6",
    "kb16_keyboard_cards_color": "#D6D6D6",
    "kb17_abc_items_color": "#333748",
    "kb18_abc_bar_background_color": "#F6F6F6",
    "kb19_keyboard_text_color": "#333748",
    "kb_toolbar_items_logo": "kb_toolbar_items_logo_0.png",
    "kb_theme_preview_large_nokeyborders": "kb_theme_preview_large_nokeyborders_0",
    "kb_theme_preview_large_keyborders": "kb_theme_preview_large_keyborders_0",
    "kb_theme_preview_small": "kb_theme_preview_small_0",
    "kb_wallpaper_portrait": "kb_wallpaper_portrait_0",
    "kb_wallpaper_landscape": "kb_wallpaper_landscape_0"
  },
  {
    "order": 1,
    "kb1_toolbar_items_color": "#F6F6F6",
    "kb2_toolbar_active_item_color": "#FDE700",
    "kb3_toolbar_bg_color": "#292C3A",
    "kb4_main_elements_color": "#3D7CB3",
    "kb5_secondary_elements_color": "#252834",
    "kb6_misc_elements_color": "#3D7CB3",
    "kb7_keyborders_bg_color": "#2D303F",
    "kb8_keyborders_text_color": "#FFFFFF",
    "kb9_no_keyborders_text_color": "#FFFFFF",
    "kb10_neutral_status_color": "#494369",
    "kb11_good_status_color": "#51BD9F",
    "kb12_warning_status_color": "#FBBC17",
    "kb13_bad_status_color": "#ED4057",
    "kb14_main_color_foreground_color": "#FFFFFF",
    "kb15_keyboard_background_color": "#333748",
    "kb16_keyboard_cards_color": "#40455A",
    "kb17_abc_items_color": "#FFFFFF",
    "kb18_abc_bar_background_color": "#333748",
    "kb19_keyboard_text_color": "#FFFFFF",
    "kb_toolbar_items_logo": "kb_toolbar_items_logo_1.png",
    "kb_theme_preview_large_nokeyborders": "kb_theme_preview_large_nokeyborders_1",
    "kb_theme_preview_large_keyborders": "kb_theme_preview_large_keyborders_1",
    "kb_theme_preview_small": "kb_theme_preview_small_1",
    "kb_wallpaper_portrait": "kb_wallpaper_portrait_1",
    "kb_wallpaper_landscape": "kb_wallpaper_landscape_1"
  }
]

Structure

The JSON structure defines numerous themes in a root array object. Each theme is comprised of the following elements:

Property	Data Type	Description
order	Integer	The order the theme will appear in the keyboard themes selector
kb1_toolbar_items_color	Color	Toolbar items color
kb2_toolbar_active_item_color	Color	Toolbar active item color
kb3_toolbar_bg_color	Color	Toolbar background color
kb4_main_elements_color	Color	Brand main color
kb5_secondary_elements_color	Color	Brand secondary color
kb6_misc_elements_color	Color	Brand miscellaneous elements color
kb7_keyborders_bg_color	Color	Key borders background color
kb8_keyborders_text_color	Color	Text color for theme with key borders
kb9_no_keyborders_text_color	Color	Text color for theme with no key borders
kb10_neutral_status_color	Color	Neutral status color
kb11_good_status_color	Color	Good status color
kb12_warning_status_color	Color	Warning status color
kb13_bad_status_color	Color	Bad status color
kb14_main_color_foreground_color	Color	Main color foreground
kb15_keyboard_background_color	Color	Keyboard background color
kb16_keyboard_cards_color	Color	Keyboard cards color
kb17_abc_items_color	Color	ABC items color
kb18_abc_bar_background_color	Color	ABC bar background color
kb19_keyboard_text_color	Color	Keyboard text color
kb_toolbar_items_logo	Drawable	Keyboard toolbar items logo
kb_theme_preview_large_nokeyborders	Drawable	Large theme preview for theme with no key borders
kb_theme_preview_large_keyborders	Drawable	Large theme preview for theme with key borders
kb_theme_preview_small	Drawable	Small theme preview
kb_wallpaper_portrait	Drawable	Portrait wallpaper
kb_wallpaper_landscape	Drawable	Landscape wallpaper

Key:

Color is a RGB hex string in the following format: #RRGGBB
Drawable is the name of the drawable defined in the application resources. They SDK will automatically load the resource. If using image formats such as PNG it is recommended to include assets for the following sizes: mdpi, hdpi, xhdpi, xxhdpi & xxxhdpi.