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 modified.
-
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 file 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 modification. 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.
<color name="thm_general_default_list_search_item_bg">#B0DEED</color>
<color name=“thm_general_searchbox_font_color">#CC222222</color>
res/values /colors.xml
<!-- friends -->
<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 Modifiable Resource
Splash& Icon
xxhdpiꢀ
(recommend)
- no
- image /color
Ryan
- item
- resource
- hdpi
- xhdpi
string note
- 1
- Theme name
theme_title
- 2
- Splash image
thm_general_splash_image.png
- 480x960
- 720x1280
- 1080x1920
3
Thumbnail image
thm_general_splash_thumbnail_image.png
- 180x285
- 240x380
- 360x570
- 4
- App icon
- icon.png
- 72x72
- 96x96
- 144x144
STEP2 Check Modifiable Resource
Common / Action Bar & Tab
xxhdpiꢀ
(recommend)
- no
- image /color
- item
- resource
- hdpi
- xhdpi
- note
2:53
2
1
ꢁ묺
142
12
Action bar background
thm_general_title_bg.png
- 480x72
- 720x90
- 1080x135
3
- 4
- 5
- 6
- 7
- 8
#333333
Action bar text color
- thm_action_bar_title_font_color
- color selector
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
- 480x72
- 720x90
- 1080x135
각탭의 배경을 합칠 경우(권장)
펺믾쁢펂싢핊밚
않핂펆
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
67
믆웇
Channel icon (South Korea) Find icon (Global)
- 71x71
- 95x95
- 142x142
ꢁ묺
Game icon More icon
6.0.0 apply
옪솒
펂ꢂ 줂힎
89
Button text color Done icon color
- #333333
- color selector
우상단 버튼 컬러
bar_icon_check_disable.png bar_icon_check.png
6.1.0 Delete
STEP2 Check Modifiable Resource
Friends
xxhdpiꢀ
(recommend)
- no image /color
- item
- resource
- hdpi
- xhdpi
- note
1
23
- Friends list background
- thm_friendlist_bg.png
- 480x670
- 720x1280
- 1080x1920
- 70x50
- Search icon
- thm_general_searchbox_icon.png
- 30x30
- 40x40
#B0DEED
#222222
Search background color drawable > thm_general_default_list_search_item_bg
color selector
26
- 4
- 3
1
Search text input box text thm_general_searchbox_font_color color
45
color selector
5
Header background thm_general_default_list_section_header_bg.9.png image
12x36 / 9-patch
- 7
- 8
- 11
- 12
- 6
- #222222
- Header text color
- thm_general_default_list_section_header_font_color
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
9
List background select color
- 9
- default_list_selected_background
thm_general_default_divider_line.9.png
10
- 10
- line image
Status message background
Response by resolution
11 12
- thm_friendlist_friend_status_bubble_bg.9.png
- 75x58
- 100x76
- 150x114
- #808080
- Status message text color thm_friendlist_message_font_color
thm_add_start_n.png
color selector
thm_add_start_p.png new friend / close button
- 13
- 100x100
- 130x130
- 200x200
thm_add_close_n.png
thm_add_close_p.png
13
STEP2 Check Modifiable Resource
Friends > Recommended Friends
xxhdpiꢀ
(recommend) no
1
imageꢀ/color #80333333
- item
- resource
- hdpi
- xhdpi
- note
findꢀbackground
thm_recommend_bg.png
- 480x670
- 720x1280
- 1080x1920
1
plusꢀfriendꢀstatusꢀmassageꢀ textꢀcolor
- 2
- thm_recommendlist_description_font_color
thm_btn_add_plusfriend_n.png
color selector
110x73
3
63x51 63x51
160x110 160x110
2
3
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
- #FFFFFF
- friendꢀaddꢀtextꢀcolor
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
- 55x55
- 72x72
- 110x110
4
5
STEP2 Check Modifiable Resource
Chats
xxhdpiꢀ
(recommend) no
1
- imageꢀ/color
- item
- resource
- hdpi
- xhdpi
- note
chatlistꢀbackground
thm_chatlist_bg.png
- 480x670
- 720x1280 1080x1920
2
#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
1
3
4
5
45defaultꢀprofileꢀimage defaultꢀgroupꢀimage
thm_general_default_profile_image.png
2
150x150 100x100
200x200 130x130
300x300 200x200
thm_general_default_group_profile_image.png thm_chat_start_n.pngꢀ
thm_chat_start_p.pngꢀ
- 6
- newꢀchatꢀbutton
6
STEP2 Check Modifiable Resource
Chats > Chatroom
xxhdpiꢀ
(recommend) no
1
- imageꢀ/color
- item
- resource
- hdpi
- xhdpi
- note
chatroomꢀbackground
thm_chatroom_bg.png
- 480x720
- 720x1280 1080x1920
108x63ꢀ/ꢀ9-patch
- 2
- Myꢀchatꢀbubbleꢀbackground
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
4
1
3
108x63ꢀ/ꢀ9-patch
5
6
Whiteꢀisꢀnotꢀ allowed.
color selector
55646
#333333
2
3
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
78
#333333 #FAEB00
Messageꢀtimeꢀtextꢀcolor
chatroom_infobox_time_color
color selector color selector
7
8
Textꢀcolorꢀforꢀtheꢀno.ꢀofꢀpeopleꢀ whoꢀreadꢀtheꢀmessage
thm_chatroom_infobox_count_font_color
PlusꢀFriendꢀchatꢀbubbleꢀ background
- thm_chatroom_message_bubble_plus_bg.9.png
- 108x63ꢀ/ꢀ9-patch
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
- thm_chatroom_message_info_bg.9.png
- 9-patch
6.1.0 Delete
STEP2 Check Modifiable Resource
Chats > Chatroom > Bottom Message Input Box
xxhdpiꢀ
(recommend)
- no
- imageꢀ/color
- item
- resource
- hdpi
- xhdpi
- note
- 1
- Messageꢀinputꢀboxꢀbackground
thm_chatroom_input_bar_bg.png
- 480x60
- 720x80
482x63 9-patch
1080x122
PlusFriendꢀmessageꢀinputꢀboxꢀ background
6.1.0 Delete
2
thm_chatroom_plusfriend_input_bar_bg.9.png thm_chatroom_input_message_bg.9.png
- 3
- Messageꢀinputꢀboxꢀbackground
Sendꢀbuttonꢀbackground
chatroom_button_bg_n.9.png chatroom_button_bg_p.9.png
33x53ꢀ/ꢀ9-patch 33x53ꢀ/ꢀ9-patch
4
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
- 80x80
- PlusꢀFriendꢀVisitꢀHomeꢀicon
- 53x53
- 8
- WalkieꢀTalkieꢀbutton
btn_walkie_talkie_pressed.9.png btn_mvoip_send_n.9.png
3
6
1
btn_mvoip_send_p.9.png
89
- 9
- FreeꢀCallꢀbuttonꢀ(Global)
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
- 63x50
- 83x68
- 126x102
10
10 11
GroupꢀCallꢀbuttonꢀ(Global)
7
- 2
- 5
4
11
PlusFriendꢀBotꢀbutton
STEP2 Check Modifiable Resource
More
xxhdpiꢀ
(recommend)
- no
- imageꢀ/color
- item
- resource
- hdpi
- xhdpi
- note
- 1
- More background image thm_setting_bg.png
- 480x720
- 720x1280
- 1080x1920
- 105x105
- 2
3
Notification icon
thm_more_function_item_notification_icon more_function_item_background
- 52x52
- 70x70
5.7.0 apply
Grid menu background color
- #B0DEED
- color selector
Grid menu background selector color
2
4
#FFFFFF #333333 #FFFFFF more_function_item_selected_background thm_more_function_item_font_color color selector color selector color selector
- 5
- Grid menu text color
5
- 6
- Grid menu divider color
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
67
- 3
- 4
- 7
- 8
- 10
- 9
8
- 9
- Reward
5.3.0 apply
10 11 12 13 14 15 16 17
Style
13 14
- 11
- 12
- 16
Page Makers
5.4.0 apply 5.1.0 apply
- Hotdeal
- 60x60
- 80x80
- 120x120
15
6
17
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)
1
theme (Global)
thm_more_function_item_theme_icon.png thm_more_function_item_bargain_icon.png
bargain (only japan)
STEP2 Check Modifiable Resource
More > Notification
xxhdpiꢀ
(recommend) no
1imageꢀ/color
#CCFFFFFF
- item
- resource
- hdpi
- xhdpi
- note
ꢀNotificationꢀunreadꢀ backgroundꢀcolor
color selector
knotification_list_unread_background
1
STEP2 Check Modifiable Resource
Passcode / Design change (6.1.0)
xxhdpiꢀ
(recommend)
- no
- image /color
- item
- resource
- hdpi
- xhdpi
- note
1
Passcode background image
1