Kakaotalk Theme Guide

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 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 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.

#B0DEED #CC222222 res/values /colors.xml

#B0DEED #222222 #B0DEED #FFFFFF #222222 #222222 #808080 STEP2 Check Modiﬁable 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 Modiﬁable 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 Modiﬁable 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 Modiﬁable 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 Modiﬁable 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 Modiﬁable 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 Modiﬁable 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 Modiﬁable Resource

no image/color item resource hdpi xhdpi xxhdpi note (recommend)

1 More background image thm_setting_bg.png 480x720 720x1280 1080x1920

2 Notification icon thm_more_function_item_notification_icon 52x52 70x70 105x105 5.7.0 apply

Grid menu background 3 #B0DEED more_function_item_background color selector color

Grid menu background 2 4 #FFFFFF more_function_item_selected_background color selector selector color

5 #333333 Grid menu text color thm_more_function_item_font_color color selector

5 6 #FFFFFF Grid menu divider color thm_more_function_item_grid_line_color color selector

6 Item Store thm_more_function_item_itemstore_icon.png

7 Gift Shop thm_more_function_item_giftshop_icon.png 3 4 7 8 10 9 8 Gane thm_more_function_item_gamecenter_icon

9 Reward thm_more_function_item_reward_icon.png 5.3.0 apply

10 Style thm_more_function_item_style_icon.png

13 11 12 16 11 Page thm_more_function_item_pagestore_icon.png

12 Makers thm_more_function_item_makers_icon.png 5.4.0 apply

13 Hotdeal thm_more_function_item_hotdeal_icon.png 60x60 80x80 120x120 5.1.0 apply 14 15 6 17 14 Plus Friend thm_more_function_item_plusfriend_icon.png

15 TV thm_more_function_item_tv_icon.png

16 Hair Shop thm_more_function_item_makers_icon.png 5.7.0 apply

17 Cart (NEW) thm_more_function_item_mart_icon.png 6.1.0 apply

kakao acoout (Global) thm_more_function_item_account_icon.png

1 theme (Global) thm_more_function_item_theme_icon.png

bargain (only japan) thm_more_function_item_bargain_icon.png STEP2 Check Modiﬁable Resource

More > Notiﬁcation

xxhdpi no image/color item resource hdpi xhdpi note (recommend)

Notificationunread 1 #CCFFFFFF knotification_list_unread_background color selector backgroundcolor

1 STEP2 Check Modiﬁable Resource

Passcode / Design change (6.1.0)

xxhdpi no image /color item resource hdpi xhdpi note (recommend)

1 Passcode background 1 thm_passlock_bg.png 480x720 720x1280 1080x1920 image

Title text color 2 2 2 #2F9ABD thm_passlock_title_font_color color selector

3 3

3 #2F9ABD Description text color thm_passlock_description_font_color color selector 5 4

4 5

Passcode input box 4 image(Empty) thm_passlock_code_image.png 66x66 88x88 132x132

thm_passlock_code_image_checked_1.png 66x66 88x88 132x132

thm_passlock_code_image_checked_2.png 66x66 88x88 132x132 Passcode input box 5 image(Entered) thm_passlock_code_image_checked_3.png 66x66 88x88 132x132 6

thm_passlock_code_image_checked_4.png 66x66 88x88 132x132

num_0_n ~ num_9_n / num_back_n Keypad numbers 90x90 120x120 180x180 6.1.0 Delete num_0_p ~ num_9_p / num_back_p STEP2 Check Modiﬁable Resource

Pop-up Alerts

no image/color item resource hdpi xhdpi xxhdpi note (recommend)

1 Pop-upbackgroundimage thm_general_push_popup_bg.9.png 30x27/9-patch

2 #2F9ABD Name/Messagetextcolor thm_general_push_popup_font_color color selector

push_popup_button_left_bg_n.9.png 40x34/9-patch

3 Buttonimage(left)

push_popup_button_left_bg_p.9.png 40x34/9-patch

push_popup_button_right_bg_n.9.png 40x34/9-patch

4 Buttonimage(right)

push_popup_button_right_bg_p.9.png 40x34/9-patch

2 1 5 #FFFFFF Buttontextcolor thm_general_push_popup_button_font_color color selector

3 4 5 STEP2 Check Modiﬁable Resource

Pop-upAlerts > Toasts

no image/color item resource hdpi xhdpi xxhdpi note (recommend)

Shadoweffectmustbe 1 Toastbackgroundimage thm_general_toast_bg.9.png 46x39/9-patch applied.

2 #2F9ABD Toasttextcolor thm_general_toast_new_massage_font_color color selector

1 2 STEP2 Check Modiﬁable Resource

Pop-up Alerts > Forward Notiﬁcation Bar

no image/color item resource hdpi xhdpi xxhdpi note (recommend)

Shadoweffectmustbe 1 BarBGimage thm_directshare_bg_notification.9.png 94x94 122x122 183x183 applied. 2 3 1 2 #333333 BarMessagetextcolor thm_directshare_popup_message color selector

3 #2F9ABD BarButtontextcolor thm_directshare_popup_info color selector STEP2 Check Modiﬁable Resource

Share&Foward > Choose your friends

no image/color item resource hdpi xhdpi xxhdpi note (recommend)

2 3 2 #333333 Tabmenutextcolor thm_broadcast_picker_tab_font_color_normal color selector 1

3 #80333333 Tabmenuselecttextcolor thm_broadcast_picker_tab_font_color_selected color selector STEP3 ModifyPackageName/AuthoritySettings

1) Package name folder > build.gradle

2) Modify Package Name & Version Information

Change the package name to a unique value, such as the developer’s website (or blog) domain or other values that can be used as an identiﬁer, to prevent the package name from being overwritten by a different theme. Information other than the package name should be left as-is.

apply plugin: 'com.android.application' android { compileSdkVersion 24 buildToolsVersion "24.0.3"

defaultConﬁg { versionName “6.1.0" versionCode 101 applicationId "com.kakao.talk.theme.ryan" } } STEP4 ModifyThemeName

1) ModifyThemeName

The strings.xml ﬁle in the package name/res/values folder contains the following text. Replace the text in red with your theme name.The name must be lesst han 20 characters so that the full name can be displayed in the Themes page.

Ryan Ryan STEP4 Installon Phones

Install APK Files

Once the tasks are complete, re-compile to APK files, sign and install on your mobile phone. No identification of authority is requested when installing KakaoTalk Themes. If a message that requests identification is shown, then check the create theme for any problems. Once the theme has been installed successfully, then on your KakaoTalk, go to More>Settings> Display > Theme\ “Apply” button to instantly apply the theme to your KakaoTalk.

나만의 테마