Kakaotalk Theme Guide
Total Page:16
File Type:pdf, Size:1020Kb
kakaotalkThemeGuide 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 no image /color item resource hdpi xhdpi note (recommend) 1 Ryan Theme name theme_title string 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 2:53 no image /color item resource hdpi xhdpi xxhdpi note (recommend) 2 142 1 �묺 1 Action bar background thm_general_title_bg.png 480x72 720x90 1080x135 3 4 5 6 7 8 2 #333333 Action bar text color thm_action_bar_title_font_color color selector tab_indicator_bg.9.png 각 탭별 bg 별도로 갈 경우 Tab menu background tab_indicator_p_bg.9.png 권장하지않음 �묺 얺큲�묺멎캗 Tab menu selection bar 각 탭별 bg 별도로 갈 경우 thm_main_tab_underline_image.9.png 권장하지않음 뺂옪 3 Tab menu background thm_tab_bg.png 480x72 720x90 1080x135 각탭의 배경을 합칠 경우(권장) 않핂펆 펺믾쁢펂싢핊밚 Friends icon thm_tab_friend_icon_n.png 4 �묺 thm_tab_friend_icon_p.png thm_tab_chatting_icon_n.png 캖옪풂�묺읊��삖삲 Chats icon 5 thm_tab_chatting_icon_p.png 믆웇 thm_tab_recommend_icon_n.png Channel icon (South Korea) 6 71x71 95x95 142x142 ��폲엚흖 Find icon (Global) thm_tab_recommend_icon_p.png �묺 thm_tab_game_icon_n.png 7 Game icon 6.0.0 apply thm_tab_game_icon_p.png 옪솒 thm_tab_more_icon_n.png 8 More icon 펂� thm_tab_more_icon_p.png Button text color 9 #333333 thm_action_bar_done_font_color color selector 우상단 버튼 컬러 bar_icon_check_disable.png 줂힎 Done icon color 6.1.0 Delete bar_icon_check.png STEP2 Check Modifiable Resource Friends xxhdpi no image /color item resource hdpi xhdpi note (recommend) 1 Friends list background thm_friendlist_bg.png 480x670 720x1280 1080x1920 2 Search icon thm_general_searchbox_icon.png 30x30 40x40 70x50 3 #B0DEED Search background color drawable > thm_general_default_list_search_item_bg color selector 2 4 3 1 Search text input box text 4 #222222 thm_general_searchbox_font_color color selector color 6 5 Header background 5 thm_general_default_list_section_header_bg.9.png 12x36 / 9-patch image 7 8 11 12 6 #222222 Header text color thm_general_default_list_section_header_font_color color selector 7 #222222 Friend’s name text color thm_general_default_list_item_title_font_color color selector 9 8 #B0DEED List background color default_list_background color selector List background select 9 #FFFFFF default_list_selected_background color selector color 10 10 line image thm_general_default_divider_line.9.png 9-patch Status message Response by 11 thm_friendlist_friend_status_bubble_bg.9.png 75x58 100x76 150x114 background resolution 12 #808080 Status message text color thm_friendlist_message_font_color color selector thm_add_start_n.png thm_add_start_p.png new friend / close 13 100x100 130x130 200x200 button thm_add_close_n.png 13 thm_add_close_p.png STEP2 Check Modifiable Resource Friends > Recommended Friends xxhdpi no image/color item resource hdpi xhdpi note (recommend) 1 findbackground thm_recommend_bg.png 480x670 720x1280 1080x1920 1 plusfriendstatusmassage 2 #80333333 thm_recommendlist_description_font_color color selector textcolor 3 thm_btn_add_plusfriend_n.png 63x51 110x73 160x110 2 3 plusfriendaddbutton thm_btn_add_plusfriend_p.png 63x51 110x73 160x110 thm_btn_add_friend_n.9.png 9-patch 4 friendaddbutton thm_btn_add_friend_p.9.png 9-patch 5 #FFFFFF friendaddtextcolor thm_add_friend_font_color color selector sectionbackgroundcolor thm_recommedation_munu_tab_padding_color 6.1.0 Delete IDSearch(Global) thm_recommend_menu_find_id_icon.png QRcode(Global) thm_recommend_menu_find_qr_icon.png 55x55 72x72 110x110 4 5 Shake(Global) thm_recommend_menu_find_shake_icon.png Invite(Global) thm_recommend_menu_find_share_icon.png STEP2 Check Modifiable Resource Chats xxhdpi no image/color item resource hdpi xhdpi note (recommend) 1 chatlistbackground thm_chatlist_bg.png 480x670 720x1280 1080x1920 2 #CC333333 recentmessagetextcolor thm_chatlist_message_font_color color selector textcolorforthemessage 1 3 #CC333333 thm_chatlist_message_time_font_color color selector receivetime 3 4 4 defaultprofileimage thm_general_default_profile_image.png 2 150x150 200x200 300x300 5 defaultgroupimage thm_general_default_group_profile_image.png 5 thm_chat_start_n.png 6 newchatbutton 100x100 130x130 200x200 thm_chat_start_p.png 6 STEP2 Check Modifiable Resource Chats > Chatroom xxhdpi no image/color item resource hdpi xhdpi note (recommend) 1 chatroombackground thm_chatroom_bg.png 480x720 720x1280 1080x1920 2 Mychatbubblebackground thm_chatroom_message_bubble_me_bg.9.png 108x63/9-patch 4 1 3 Mychatbubblebackground thm_chatroom_message_bubble_me_bg_no_tail.9.png 108x63/9-patch 5 6 Whiteisnot 5 #333333 Mymessagetextcolor thm_chatroom_my_message_font_color color selector allowed. 2 3 Chatpartner’schatbubble 5 thm_chatroom_message_bubble_you_bg.9.png 108x63/9-patch background Chatpartner’schatbubble 6 thm_chatroom_message_bubble_you_bg_no_tail.9.png 108x63/9-patch background 4 #333333 Chatpartner’snametextcolor thm_chatroom_other_nickname_font_color color selector Chatpartner’smessagetext Whiteisnot 6 #333333 thm_chatroom_other_message_font_color color selector color allowed. 7 7 #333333 Messagetimetextcolor chatroom_infobox_time_color color selector 8 Textcolorfortheno.ofpeople 8 #FAEB00 thm_chatroom_infobox_count_font_color color selector whoreadthemessage PlusFriendchatbubble thm_chatroom_message_bubble_plus_bg.9.png 108x63/9-patch background Myemoticonchatbubble thm_chatroom_message_bubble_emoticon_me_bg. 9-patch 6.1.0 Delete background 9.png Chatpartner’semoticonchat thm_chatroom_message_bubble_emoticon_you_bg. 9-patch 6.1.0 Delete bubblebackground 9.png Alertbarbackground thm_chatroom_navigation_bg.9.png 9-patch 6.1.0 Delete Alertbartext thm_chatroom_navigation_font_color colorselector 6.1.0 Delete Messageinformation thm_chatroom_message_info_bg.9.png 9-patch 6.1.0 Delete background STEP2 Check Modifiable Resource Chats > Chatroom > Bottom Message Input Box xxhdpi no image/color item resource hdpi xhdpi note (recommend) 1 Messageinputboxbackground thm_chatroom_input_bar_bg.png 480x60 720x80 1080x122 PlusFriendmessageinputbox 2 thm_chatroom_plusfriend_input_bar_bg.9.png 482x63 6.1.0 Delete background 3 Messageinputboxbackground thm_chatroom_input_message_bg.9.png 9-patch chatroom_button_bg_n.9.png 33x53/9-patch 4 Sendbuttonbackground chatroom_button_bg_p.9.png 33x53/9-patch 5 #FFFFFF Sendbuttontextcolor thm_chatroom_send_font_color color selector 6 +button thm_chatroom_media_button_icon.png 40x40 53x53 80x80 7 PlusFriendVisitHomeicon icon_plusfriends_home.png 40x40 53x53 80x80 btn_walkie_talkie.9.png 8 WalkieTalkiebutton btn_walkie_talkie_pressed.9.png 3 6 1 btn_mvoip_send_n.9.png btn_mvoip_send_p.9.png 8 9 FreeCallbutton(Global) btn_mvoip_send_f.9.png 9 btn_mvoip_send_f_p.9.png 63x50 83x68 126x102 btn_groupcall_send_n.9.png 10 btn_groupcall_send_p.9.png 10 GroupCallbutton(Global) 7 2 5 4 btn_groupcall_send_f.9.png btn_groupcall_send_f_p.9.png 11 thm_btn_command_n.9.png 11 PlusFriendBotbutton thm_btn_command_p.9.png STEP2 Check Modifiable Resource More no image/color