Customize Community UI

 

1. iOS Customization

2. Android Customization

3. Important Notes

Appendix 1. Color Definition

Appendix 2. Color Legend

This section explains how to customize UI theme of KTplay Community Window that custom fit to your game’s look and feel.

1. iOS Customization

1.1 Color

1.2 Images

  • Open KTplay SDK’s ktplay.bundle directory.
  • Open the directory image/iphone, it contains all the customizable image resources that can be selected to replace with your own image (Note: image with suffix @2x @3x are used for higher resolution)
  • Preferred images for customization:
    • tab_background : navigation background.
    • tab_blank_selected : navigation selected background.
    • Image with tab prefixed (navigation item), and contains “selected”.

2. Android Customization

2.1 Color

  • Open KTplay SDK directory.
  • Open the file res/values/kryptanium_theme_colors_default.xml
  • All color values are customizable. Please refer to Color definition and Color Legend for details.
  • Preferred color for customization:
    • kt_theme_color : main theme color.
    • kt_theme_navigationbar_background : navigation background.
    • kt_theme_navigationitem_selected : navigation selected background.

2.2 Images

  • Open KTplay SDK directory.
  • Open the directory res/drawable-xhdpi-v4, it contains all the customizable image resources that can be selected to replace with your own image.
  • Preferred images for customization:
    • Any image with prefix of kryptanium_tab_indicator (image for navigation), and for image name contains _select is image for selected status)

3. Important Notes

  • For replacing image, stick to original file name.
  • For replacing image, stick to original image resolution.
  • Make change log or note for any customization effort involve, so that can be reference for next SDK upgrade
  • When update to new version of KTplay SDK, please follow the customizable process for color value customization, and don’t direct replace the property file, as they may be modified due to SDK upgrade.

Appendix 1. Color Definition

 

Color Name Description
kt_theme_color Main theme color, suggest to match with game’s style。
Apply to :
- Button background
- Link text
- Highlight text
- Loading animation background
- Player progress bar background
kt_theme_background Background color
kt_theme_navigationbar_background Navigation bar background color
Not apply to iOS, please refer to
kt_theme_navigationitem_selected Navigation item selected color
Not apply to iOS, please refer to
kt_theme_titlebar_background Title bar background color
kt_theme_color_disabled UI element disabled, e.g. button disabled
kt_theme_section_background Section background color
Apply to:
- Main page’s section (Hot Topics/Video/Collection)
- Card style content
kt_theme_headsection_background Selected section background color
Apply to:
- Main page hot topics
- Embedded topic from sharing / LiveOps content
kt_theme_listitem_background List item background color
kt_theme_listitem_dividercolor List item separator color
kt_theme_popup_background Popup background color
kt_theme_popup_border Popup border color
kt_theme_highlighted_item_background Highlighted list item background color
Apply to:
- Highlighted reply in Profile page
- Highlighted friend request from Friend page
- Selected vote item in voting UI
kt_theme_imageloading_placeholder_background Image loading placeholder background color
kt_theme_subtitle_background Subtitle background color
kt_theme_title_textcolor Title color
kt_theme_primary_textcolor Primary text color
kt_theme_primary_textcolor_dark Primary text color in dark background
kt_theme_secondary_textcolor Secondary text color
kt_theme_secondary_textcolor_dark Secondary text color in dark background
kt_theme_hint_textcolor Hint text color

Appendix 2. Color Legend

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.