Kakaotalk Theme Guide

kakaotalkꢀꢀThemeꢀꢀGuide

Creat My Own Theme

Android

UPDATE 2017/02/23

STEP1 Check Points

Customized Themes

Create a unique look and feel that is all your own. With the custom theme feature, you can transform your wallpaper, chat bubbles, font, color scheme and more.

Check point

This feature is available in KakaoTalk version 5.1.0 or later.

The color of the text can be changed.

Layout cannot be modiﬁed.

Produce based on a 480PX x 800PX (HDPI) resolution.

Produse based on a 1080x1920(xxhdpi) resolution

Download File

KakaoTalk Theme has been designed so that it is created in an APK ﬁle format, with execution speed and scalability in mind kakao.com > services > kakaotalk > Customized Themes download KakaoTalk sample themes.

http://www.kakao.com/services/talk/theme

STEP2 Modify Resources

1) Modify Images

The package name/res/drawable-xxhdpi folder contains sample images that can be modified using the theme function. Refer to the resources list in the “Check Modifiable Resource” page and replace the image you wish to change with the identical file name. For example, if you wish to change the Splash screen that is displayed when KakaoTalk is executed, then change the thm_general_splash_img.png file shown in the folder above. Leave as-is or delete if there is no image that needs to be changed.

Images that change size depending on the size of the phone or the situation are those categorized as “9-patch” in the recommended type column in the list and requires additional modiﬁcation. Please refer to the URL below for more information on 9-patch.

http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch

2) Modify Color Value

The colors.xml file in the package name/res/values folder contains definitions of widely used and modifiable color values. These values can be changed into the desired color and the colors are expressed in #rrggbb or #aarrggbb format.

res/values /colors.xml

<color name="thm_general_default_list_search_item_bg">#B0DEED</color> <color name="thm_general_searchbox_font_color">#222222</color> <color name="default_list_background">#B0DEED</color> <color name="default_list_selected_background">#FFFFFF</color> <color name="thm_general_default_list_item_title_font">#222222</color> <color name="thm_general_default_list_section_header_font">#222222</color> <color name=“thm_friendlist_message_font">#808080</color>

STEP2 Check Modiﬁable Resource

Splash& Icon

xxhdpiꢀ
(recommend)

string note

theme_title

thm_general_splash_image.png

Thumbnail image

thm_general_splash_thumbnail_image.png

Common / Action Bar & Tab

xxhdpiꢀ
(recommend)

ꢁ묺

12
Action bar background

thm_general_title_bg.png

#333333

Action bar text color

tab_indicator_bg.9.png

각 탭별 bg 별도로 갈 경우

권장하지않음

Tab menu background Tab menu selection bar

tab_indicator_p_bg.9.png

ꢁ묺ꢃꢄ얺큲ꢁ묺멎캗

각 탭별 bg 별도로 갈 경우

권장하지않음

thm_main_tab_underline_image.9.png

thm_tab_bg.png

뺂옪

34
Tab menu background Friends icon

각탭의 배경을 합칠 경우(권장)

펺믾쁢펂싢핊밚

않핂펆

thm_tab_friend_icon_n.png thm_tab_friend_icon_p.png thm_tab_chatting_icon_n.png thm_tab_chatting_icon_p.png thm_tab_recommend_icon_n.png thm_tab_recommend_icon_p.png thm_tab_game_icon_n.png thm_tab_game_icon_p.png thm_tab_more_icon_n.png thm_tab_more_icon_p.png thm_action_bar_done_font_color

ꢀꢁꢂ묺

캖옪풂ꢁ묺읊ꢅꢆ삖삲ꢇ

ꢀꢀ폲엚흖

ꢈꢉꢉ

Chats icon
5

믆웇

Channel icon (South Korea) Find icon (Global)

ꢁ묺

Game icon More icon

6.0.0 apply

옪솒

펂ꢂ 줂힎

89
Button text color Done icon color

우상단 버튼 컬러

bar_icon_check_disable.png bar_icon_check.png

6.1.0 Delete

Friends

xxhdpiꢀ
(recommend)

#B0DEED
#222222
Search background color drawable > thm_general_default_list_search_item_bg

color selector

Search text input box text thm_general_searchbox_font_color color
45

color selector

Header background thm_general_default_list_section_header_bg.9.png image
12x36 / 9-patch

color selector

78
#222222
#B0DEED
#FFFFFF
Friend’s name text color List background color thm_general_default_list_item_title_font_color default_list_background

color selector color selector color selector

9-patch

List background select color

thm_general_default_divider_line.9.png

Status message background

Response by resolution

thm_add_start_n.png

color selector

thm_add_start_p.png new friend / close button

thm_add_close_n.png

thm_add_close_p.png

Friends > Recommended Friends

xxhdpiꢀ
(recommend) no

imageꢀ/color #80333333

findꢀbackground

thm_recommend_bg.png

plusꢀfriendꢀstatusꢀmassageꢀ textꢀcolor

thm_btn_add_plusfriend_n.png

color selector

110x73

63x51 63x51
160x110 160x110

plusꢀfriendꢀaddꢀbutton

thm_btn_add_plusfriend_p.png

110x73

thm_btn_add_friend_n.9.png thm_btn_add_friend_p.9.png
9-patch 9-patch
45

friendꢀaddꢀbutton

thm_add_friend_font_color

color selector

ꢀsectionꢀbackgroundꢀcolor thm_recommedation_munu_tab_padding_color

6.1.0 Delete

IDꢀSearchꢀ(Global) QRꢀcodeꢀ(Global) Shakeꢀ(Global) Inviteꢀ(Global)

thm_recommend_menu_find_id_icon.png thm_recommend_menu_find_qr_icon.png thm_recommend_menu_find_shake_icon.png thm_recommend_menu_find_share_icon.png

xxhdpiꢀ
(recommend) no
1

chatlistꢀbackground

thm_chatlist_bg.png

#CC333333 #CC333333

recentꢀmessageꢀtextꢀcolor

thm_chatlist_message_font_color

color selector

textꢀcolorꢀforꢀtheꢀmessageꢀ receiveꢀtime
3

thm_chatlist_message_time_font_color

color selector

45defaultꢀprofileꢀimage defaultꢀgroupꢀimage

thm_general_default_profile_image.png

150x150 100x100
200x200 130x130
300x300 200x200

thm_general_default_group_profile_image.png thm_chat_start_n.pngꢀ

thm_chat_start_p.pngꢀ

Chats > Chatroom

xxhdpiꢀ
(recommend) no
1

chatroomꢀbackground

thm_chatroom_bg.png

108x63ꢀ/ꢀ9-patch

Myꢀchatꢀbubbleꢀbackground Myꢀmessageꢀtextꢀcolor

thm_chatroom_message_bubble_me_bg.9.png thm_chatroom_message_bubble_me_bg_no_tail.9.png thm_chatroom_my_message_font_color

108x63ꢀ/ꢀ9-patch

Whiteꢀisꢀnotꢀ allowed.

color selector

#333333

Chatꢀpartner’sꢀchatꢀbubbleꢀ background

thm_chatroom_message_bubble_you_bg.9.png thm_chatroom_message_bubble_you_bg_no_tail.9.png thm_chatroom_other_nickname_font_color thm_chatroom_other_message_font_color
108x63ꢀ/ꢀ9-patch 108x63ꢀ/ꢀ9-patch

color selector

Chatꢀpartner’sꢀchatꢀbubbleꢀ background

#333333 #333333

Chatꢀpartner’sꢀnameꢀtextꢀcolor Chatꢀpartner’sꢀmessageꢀtextꢀ color

Whiteꢀisꢀnotꢀ allowed.

color selector

#333333 #FAEB00

Messageꢀtimeꢀtextꢀcolor

chatroom_infobox_time_color

color selector color selector

Textꢀcolorꢀforꢀtheꢀno.ꢀofꢀpeopleꢀ whoꢀreadꢀtheꢀmessage

thm_chatroom_infobox_count_font_color

PlusꢀFriendꢀchatꢀbubbleꢀ background

9-patch

Myꢀemoticonꢀchatꢀbubbleꢀ background

thm_chatroom_message_bubble_emoticon_me_bg. 9.png

6.1.0 Delete 6.1.0 Delete

Chatꢀpartner’sꢀemoticonꢀchatꢀ bubbleꢀbackground

thm_chatroom_message_bubble_emoticon_you_bg. 9.png
9-patch

Alertꢀbarꢀbackground Alertꢀbarꢀtext

thm_chatroom_navigation_bg.9.png thm_chatroom_navigation_font_color
9-patch

6.1.0 Delete 6.1.0 Delete

colorꢀselector
Messageꢀinformationꢀ background

6.1.0 Delete

Chats > Chatroom > Bottom Message Input Box

xxhdpiꢀ
(recommend)

thm_chatroom_input_bar_bg.png

482x63 9-patch

1080x122
PlusFriendꢀmessageꢀinputꢀboxꢀ background

6.1.0 Delete

thm_chatroom_plusfriend_input_bar_bg.9.png thm_chatroom_input_message_bg.9.png

Sendꢀbuttonꢀbackground

chatroom_button_bg_n.9.png chatroom_button_bg_p.9.png
33x53ꢀ/ꢀ9-patch 33x53ꢀ/ꢀ9-patch

color selector

53x53
567

#FFFFFF

Sendꢀbuttonꢀtextꢀcolor +ꢀbutton

thm_chatroom_send_font_color thm_chatroom_media_button_icon.png icon_plusfriends_home.png btn_walkie_talkie.9.png

40x40 40x40
80x80

btn_walkie_talkie_pressed.9.png btn_mvoip_send_n.9.png

btn_mvoip_send_p.9.png

btn_mvoip_send_f.9.png btn_mvoip_send_f_p.9.png btn_groupcall_send_n.9.png btn_groupcall_send_p.9.png btn_groupcall_send_f.9.png btn_groupcall_send_f_p.9.png thm_btn_command_n.9.png thm_btn_command_p.9.png

10 11
GroupꢀCallꢀbuttonꢀ(Global)

PlusFriendꢀBotꢀbutton

xxhdpiꢀ
(recommend)

3
Notification icon

thm_more_function_item_notification_icon more_function_item_background

5.7.0 apply

Grid menu background color

Grid menu background selector color

#FFFFFF #333333 #FFFFFF more_function_item_selected_background thm_more_function_item_font_color color selector color selector color selector

Item Store Gift Shop Gane

thm_more_function_item_grid_line_color thm_more_function_item_itemstore_icon.png thm_more_function_item_giftshop_icon.png thm_more_function_item_gamecenter_icon thm_more_function_item_reward_icon.png thm_more_function_item_style_icon.png thm_more_function_item_pagestore_icon.png thm_more_function_item_makers_icon.png thm_more_function_item_hotdeal_icon.png thm_more_function_item_plusfriend_icon.png thm_more_function_item_tv_icon.png

5.3.0 apply

10 11 12 13 14 15 16 17
Style

13 14

Page Makers

5.4.0 apply 5.1.0 apply

Plus Friend TV Hair Shop

thm_more_function_item_makers_icon.png

5.7.0 apply 6.1.0 apply

Cart (NEW)

thm_more_function_item_mart_icon.png thm_more_function_item_account_icon.png

kakao acoout (Global)

theme (Global)

thm_more_function_item_theme_icon.png thm_more_function_item_bargain_icon.png

bargain (only japan)

More > Notiﬁcation

xxhdpiꢀ
(recommend) no
1imageꢀ/color
#CCFFFFFF

ꢀNotificationꢀunreadꢀ backgroundꢀcolor

color selector

knotification_list_unread_background

Passcode / Design change (6.1.0)

xxhdpiꢀ
(recommend)

Passcode background image
1

Kakaotalk Theme Guide

Details

Download

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

Support