android theme guide EN 170222 · 2017-10-23 · Android UPDATE 2017/02/23 . Create a unique look...

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

http://kakao.com

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

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>

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

http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch

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


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



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


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



(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



(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



(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


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



(recommend)note

1 #CCFFFFFF�Notification�unread�background�color

knotification_list_unread_background color selector

1

More > Notification



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




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



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



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



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



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


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

나만의 테마

Date post:	14-Mar-2020
Category:	Documents
Upload:	others
View:	0 times
Download:	0 times

android theme guide EN 170222 · 2017-10-23 · Android UPDATE 2017/02/23 . Create a unique look...

Documents