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