kakaotalk��Theme��Guide
Creat My Own Theme Android
UPDATE 2017/02/23
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.
Customized Themes
- 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
Check point
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
Download File
STEP1 Check Points
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
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.
2) Modify Color Value
res/values /colors.xml
<color name="thm_general_default_list_search_item_bg">#B0DEED</color> <color name=“thm_general_searchbox_font_color">#CC222222</color>
<!-- 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>
Splash& Icon
no image /color item resource hdpi xhdpi xxhdpi�(recommend)
note
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
2:53
142
no image /color item resource hdpi xhdpi xxhdpi�(recommend)
note
1 Action bar background thm_general_title_bg.png 480x72 720x90 1080x135
2 #333333 Action bar text color thm_action_bar_title_font_color color selector
Tab menu background tab_indicator_bg.9.png tab_indicator_p_bg.9.png
각 탭별 bg 별도로 갈 경우 권장하지않음
Tab menu selection bar thm_main_tab_underline_image.9.png 각 탭별 bg 별도로 갈 경우
권장하지않음
3 Tab menu background thm_tab_bg.png 480x72 720x90 1080x135 각탭의 배경을 합칠 경우(권장)
4Friends icon thm_tab_friend_icon_n.png
71x71 95x95 142x142
thm_tab_friend_icon_p.png
5Chats icon thm_tab_chatting_icon_n.png
thm_tab_chatting_icon_p.png
6Channel icon (South Korea) Find icon (Global)
thm_tab_recommend_icon_n.png
thm_tab_recommend_icon_p.png
7 Game icon
thm_tab_game_icon_n.png
6.0.0 apply
thm_tab_game_icon_p.png
8 More icon
thm_tab_more_icon_n.png
thm_tab_more_icon_p.png
9 #333333Button text color
thm_action_bar_done_font_color color selector 우상단 버튼 컬러
Done icon colorbar_icon_check_disable.png bar_icon_check.png
6.1.0 Delete
1
3
4 5 6 7 8
Common / Action Bar & Tab
2
STEP2 Check Modifiable Resource
no image /color item resource hdpi xhdpi xxhdpi�(recommend)
note
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
4 #222222Search text input box text
color thm_general_searchbox_font_color color selector
5Header background
image thm_general_default_list_section_header_bg.9.png 12x36 / 9-patch
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
8 #B0DEED List background color default_list_background color selector
9 #FFFFFF List background select color
default_list_selected_background color selector
10 line image thm_general_default_divider_line.9.png 9-patch
11Status message
background thm_friendlist_friend_status_bubble_bg.9.png 75x58 100x76 150x114
Response by resolution
12 #808080 Status message text color thm_friendlist_message_font_color color selector
13new friend / close button
thm_add_start_n.png
100x100 130x130 200x200
thm_add_start_p.png
thm_add_close_n.png
thm_add_close_p.png
132
5
7
10
9
Friends
11
4
6
8 12
13
STEP2 Check Modifiable Resource
no image�/color item resource hdpi xhdpixxhdpi�
(recommend)note
1 find�background thm_recommend_bg.png 480x670 720x1280 1080x1920
2 #80333333plus�friend�status�massage�text�color
thm_recommendlist_description_font_color color selector
3 plus�friend�add�button
thm_btn_add_plusfriend_n.png 63x51 110x73 160x110
thm_btn_add_plusfriend_p.png 63x51 110x73 160x110
4 friend�add�button
thm_btn_add_friend_n.9.png 9-patch
thm_btn_add_friend_p.9.png 9-patch
5 #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) thm_recommend_menu_find_id_icon.png
55x55 72x72 110x110
QR�code�(Global) thm_recommend_menu_find_qr_icon.png
Shake�(Global) thm_recommend_menu_find_shake_icon.png
Invite�(Global) thm_recommend_menu_find_share_icon.png
Friends > Recommended Friends
1
23
4 5
STEP2 Check Modifiable Resource
no image�/color item resource hdpi xhdpixxhdpi�
(recommend)note
1 chatlist�background thm_chatlist_bg.png 480x670 720x1280 1080x1920
2 #CC333333 recent�message�text�color thm_chatlist_message_font_color color selector
3 #CC333333text�color�for�the�message�receive�time
thm_chatlist_message_time_font_color color selector
4 default�profile�image thm_general_default_profile_image.png
150x150 200x200 300x300
5 default�group�image thm_general_default_group_profile_image.png
6 new�chat�button
thm_chat_start_n.png�
100x100 130x130 200x200
thm_chat_start_p.png�
1
2
34
5
6
Chats
STEP2 Check Modifiable Resource
no image�/color item resource hdpi xhdpixxhdpi�
(recommend)note
1 chatroom�background thm_chatroom_bg.png 480x720 720x1280 1080x1920
2 My�chat�bubble�background thm_chatroom_message_bubble_me_bg.9.png 108x63�/�9-patch
3 My�chat�bubble�background thm_chatroom_message_bubble_me_bg_no_tail.9.png 108x63�/�9-patch
5 #333333 My�message�text�color thm_chatroom_my_message_font_color color selector White�is�not�allowed.
5Chat�partner’s�chat�bubble�background
thm_chatroom_message_bubble_you_bg.9.png 108x63�/�9-patch
6Chat�partner’s�chat�bubble�background
thm_chatroom_message_bubble_you_bg_no_tail.9.png 108x63�/�9-patch
4 #333333 Chat�partner’s�name�text�color thm_chatroom_other_nickname_font_color color selector
6 #333333Chat�partner’s�message�text�color
thm_chatroom_other_message_font_color color selector White�is�not�allowed.
7 #333333 Message�time�text�color chatroom_infobox_time_color color selector
8 #FAEB00Text�color�for�the�no.�of�people�who�read�the�message
thm_chatroom_infobox_count_font_color color selector
Plus�Friend�chat�bubble�background
thm_chatroom_message_bubble_plus_bg.9.png 108x63�/�9-patch
My�emoticon�chat�bubble�background
thm_chatroom_message_bubble_emoticon_me_bg.9.png
9-patch 6.1.0 Delete
Chat�partner’s�emoticon�chat�bubble�background
thm_chatroom_message_bubble_emoticon_you_bg.9.png
9-patch 6.1.0 Delete
Alert�bar�background thm_chatroom_navigation_bg.9.png 9-patch 6.1.0 Delete
Alert�bar�text thm_chatroom_navigation_font_color color�selector 6.1.0 Delete
Message�information�background
thm_chatroom_message_info_bg.9.png 9-patch 6.1.0 Delete
1
2
3
4
5 6
Chats > Chatroom
7
8
STEP2 Check Modifiable Resource
no image�/color item resource hdpi xhdpixxhdpi�
(recommend)note
1 Message�input�box�background thm_chatroom_input_bar_bg.png 480x60 720x80 1080x122
2PlusFriend�message�input�box�background
thm_chatroom_plusfriend_input_bar_bg.9.png 482x63 6.1.0 Delete
3 Message�input�box�background thm_chatroom_input_message_bg.9.png 9-patch
4 Send�button�background
chatroom_button_bg_n.9.png 33x53�/�9-patch
chatroom_button_bg_p.9.png 33x53�/�9-patch
5 #FFFFFF Send�button�text�color thm_chatroom_send_font_color color selector
6 +�button thm_chatroom_media_button_icon.png 40x40 53x53 80x80
7 Plus�Friend�Visit�Home�icon icon_plusfriends_home.png 40x40 53x53 80x80
8 Walkie�Talkie�button
btn_walkie_talkie.9.png
63x50 83x68 126x102
btn_walkie_talkie_pressed.9.png
9 Free�Call�button�(Global)
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
10 Group�Call�button�(Global)
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
11 PlusFriend�Bot�button
thm_btn_command_n.9.png
thm_btn_command_p.9.png
1
2
3
4 5
6
7
8
9
10
11
Chats > Chatroom > Bottom Message Input Box
STEP2 Check Modifiable Resource
no image�/color item resource hdpi xhdpi xxhdpi�(recommend)
note
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
3 #B0DEED Grid menu background color
more_function_item_background color selector
4 #FFFFFFGrid menu background selector color more_function_item_selected_background color selector
5 #333333 Grid menu text color thm_more_function_item_font_color color selector
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
60x60 80x80 120x120
7 Gift Shop thm_more_function_item_giftshop_icon.png
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
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 5.1.0 apply
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
theme (Global) thm_more_function_item_theme_icon.png
bargain (only japan) thm_more_function_item_bargain_icon.png
6
7 8 910
11 1213
14 15
16
17
2
1
3 4
5
More
STEP2 Check Modifiable Resource
no image�/color item resource hdpi xhdpixxhdpi�
(recommend)note
1 #CCFFFFFF�Notification�unread�background�color
knotification_list_unread_background color selector
1
More > Notification
STEP2 Check Modifiable Resource
no image /color item resource hdpi xhdpi xxhdpi�(recommend)
note
1Passcode background image thm_passlock_bg.png 480x720 720x1280 1080x1920
2 #2F9ABDTitle text color
<passcode> thm_passlock_title_font_color color selector
3 #2F9ABD Description text color thm_passlock_description_font_color color selector
4Passcode input box image(Empty) thm_passlock_code_image.png 66x66 88x88 132x132
5 Passcode input box image(Entered)
thm_passlock_code_image_checked_1.png 66x66 88x88 132x132
thm_passlock_code_image_checked_2.png 66x66 88x88 132x132
thm_passlock_code_image_checked_3.png 66x66 88x88 132x132
thm_passlock_code_image_checked_4.png 66x66 88x88 132x132
Keypad numbersnum_0_n ~ num_9_n / num_back_n
num_0_p ~ num_9_p / num_back_p90x90 120x120 180x180 6.1.0 Delete
2
1
3
4 5
6
Passcode / Design change (6.1.0)
1
2
3
45
STEP2 Check Modifiable Resource
no image�/color item resource hdpi xhdpi xxhdpi�(recommend)
note
1 Pop-up�background�image thm_general_push_popup_bg.9.png 30x27�/�9-patch
2 #2F9ABD Name/Message�text�color thm_general_push_popup_font_color color selector
3 Button�image�(left)
push_popup_button_left_bg_n.9.png 40x34�/�9-patch
push_popup_button_left_bg_p.9.png 40x34�/�9-patch
4 Button�image�(right)
push_popup_button_right_bg_n.9.png 40x34�/�9-patch
push_popup_button_right_bg_p.9.png 40x34�/�9-patch
5 #FFFFFF Button�text�color thm_general_push_popup_button_font_color color selector2 1
3 4 5
Pop-up Alerts
STEP2 Check Modifiable Resource
no image�/color item resource hdpi xhdpi xxhdpi�(recommend)
note
1 Toast�background�image thm_general_toast_bg.9.png 46x39�/�9-patchShadow�effect�must�be�applied.
2 #2F9ABD Toast�text�color thm_general_toast_new_massage_font_color color selector
21
Pop-upAlerts > Toasts
STEP2 Check Modifiable Resource
no image�/color item resource hdpi xhdpi xxhdpi�(recommend)
note
1 Bar�BG�image thm_directshare_bg_notification.9.png 94x94 122x122 183x183Shadow�effect�must�be�applied.
2 #333333 Bar�Message�text�color thm_directshare_popup_message color selector
3 #2F9ABD Bar�Button�text�color thm_directshare_popup_info color selector
2
1
Pop-up Alerts > Forward Notification Bar
3
STEP2 Check Modifiable Resource
no image�/color item resource hdpi xhdpi xxhdpi�(recommend)
note
2 #333333 Tab�menu�text�color thm_broadcast_picker_tab_font_color_normal color selector
3 #80333333 Tab�menu�select�text�color thm_broadcast_picker_tab_font_color_selected color selector
2
1
Share&Foward > Choose your friends
3
STEP2 Check Modifiable Resource
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 identifier, to prevent the package name from being overwritten by a different theme. Information other than the package name should be left as-is.
1) Package name folder > build.gradle
2) Modify Package Name & Version Information
STEP3 ModifyPackageName/AuthoritySettings
apply plugin: 'com.android.application' android { compileSdkVersion 24 buildToolsVersion "24.0.3"
defaultConfig { versionName “6.1.0" versionCode 101 applicationId "com.kakao.talk.theme.ryan" } }
The strings.xml file 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.
1) ModifyThemeName
STEP4 ModifyThemeName
<?xml version="1.0" encoding="utf-8"?> <resources> <string name="theme_title">Ryan</string> <string name="app_name">Ryan</string> </resources>
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.
Install APK Files
STEP4 Installon Phones
나만의 테마