android theme guide KR · 2017. 10. 23. · 구분 항목 리소스명 권장타입 비고 공통 테마이름 theme_title string 스플래시 thm_general_splash_image.9.png 480*854/PNG

나만의�카카오톡�테마�만들기�for�Android카카오톡�4.0�사용자�테마�가이드�

creative�by�TALK�Design�Team/KAKAO

체크�포인트

• 카카오톡�4.0�이상�부터�지원�

• 480PX�*�800PX�(HDPI)기준으로�제작�(아이콘�일부는�고해상도�권장)�

• 폰트�컬러�변경�가능�

• 레이아웃�변경�불가�

파일�다운로드

카카오톡�테마는�실행�속도와�확장성을�고려하여�apk�파일�형태로�제작하도록�설계되었습니다.�

[Kakao.com�>�서비스�>�카카오톡�>�사용자�테마]�에서�원하시는카카오톡�샘플테마를��다운로드�받으세요.�

STEP�1

구분 항목� 리소스명 권장�타입 비고

공통

테마�이름 theme_title string

스플래시� thm_general_splash_image.9.png 480*854�/�PNG

썸네일 thm_general_splash_thumbnail_image 180*�286�/�PNG

아이콘 icon.png 72*72�/�PNG

기본


공통 액션바�배경 thm_general_title_bg.9.png 9-patch 알파�이미지�제작�지양

액션바�정보�및�버튼�정의

액션바�텍스트�컬러 colors.xml>�thm_action_bar_title_font_color color�selector

이전�버튼�아이콘�컬러 thm_actionbar_back_button_icon.png 13�*�25�/�PNG� -�디자인�유지 -�컬러변경�가능

Done�아이콘�컬러bar_icon_check_disable.png�bar_icon_check.png

25�*�16�/�PNG -�디자인�유지 -�컬러변경�가능

버튼�텍스트�컬러 thm_action_bar_done_font_color color�selector

Action�Bar

변경�가능�리소스�확인STEP�2


공통

탭�메뉴�배경

thm_tab_indicator_bg.9.png�thm_tab_indicator_p_bg.9.png

9-patch�/�H77px�drawable�selector

thm_tab_bg.9.png 각탭의�배경을�합칠경우�전체영역을�나인패치로

탭�선택바� thm_main_tab_underline_image.9.png 9-patch

아이콘

친구�아이콘thm_tab_friend_icon_n.png�thm_tab_friend_icon_p.png

?�*�84�/�PNG�?�*�106�/�PNG

XHDPI�권장

채팅�아이콘thm_tab_chatting_icon_n.png�thm_tab_chatting_icon_p.png

채널�아이콘thm_tab_channel_icon_n.png�thm_tab_channel_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

상단�TAP�메뉴



프로필


프로필 이미지

프로필�기본�이미지 thm_general_default_profile_image 150�*�150�/�PNG

그룹�기본�이미지 thm_general_default_group_profile_image 150�*�150�/�PNG 추가�(5.1.0�버전�이상)

채팅�탭


공통

채팅�목록�배경 thm_chatlist_bg.9.png 480�*670�/�PNG

추찬친구�시작�버튼thm_add_start_n.png�

thm_add_start_p.png�

100�*�100�/�PNG�130�*�130�/�PNG

XHDPI�권장채팅�시작�버튼thm_chat_start_n.png�

thm_chat_start_p.png�

닫기�버튼thm_add_close_n.png�

thm_add_close_p.png

목록�정보

최근�메시지�텍스트�컬러 thm_chatlist_message_font_color color�selector

메시지�수신�시각�컬러 colors.xml�>�thm_chatlist_message_time_font_color color�selector


채팅방


공통 채팅방�배경 thm_chatroom_bg.9.png 480�*744�/�PNG

알림�정보알림바�배경 thm_chatroom_navigation_bg.9.png 9-patch

알림바�텍스트 thm_chatroom_navigation_font_color color�selector

메시지�관련�정보

내�메시지�말풍선�배경 thm_chatroom_message_bubble_me_bg.9.png 9-patch

내�메시지�텍스트�컬러 thm_chatroom_my_message_font_color color�selector 흰색�사용�불가

상대방�메시지�말풍선�배경 thm_chatroom_message_bubble_you_bg.9.png 9-patch

상대방�이름�텍스트�컬러 thm_chatroom_other_nickname_font_color color�selector

상대방�메시지�텍스트�컬러 thm_chatroom_other_message_font_color color�selector 흰색�사용�불가

메시지�정보�배경 thm_chatroom_message_info_bg.9.png 9-patch

메시지�시간�정보�텍스트 thm_chatroom_infobox_time_color color�selector

메시지�확인한�사람�텍스트 thm_chatroom_infobox_count_font_color color�selector

내�이모티콘�말풍선�배경 thm_chatroom_message_bubble_emoticon_me_bg.9.png 9-patch 내부�박스는�흰색�필수

상대방�이모티콘�말풍선�배경 thm_chatroom_message_bubble_emotion_you_bg.9.png 9-patch 내부�박스는�흰색�필수

플러스친구�메시지�말풍선��배경

thm_chatroom_message_bubble_plus_bg 9-patch


채팅방>�하단�메시지�입력창


공통

메시지�입력창�배경 thm_chatroom_input_bar_bg.9.png 9-patch

메시지�인풋창�배경 thm_chatroom_input_message_bg.9.png

플.친�메시지�입력창�배경 thm_chatroom_plusfriend_input_bar_bg.9.png 9-patch

전송�버튼�영역

전송�버튼�배경chatroom_button_bg_n.9.png�chatroom_button_bg_p.9.png

drawable�selector

전송�텍스트�컬러 thm_chatroom_send_font_color color�selector

+�미디어�아이콘 thm_chatroom_media_button_icon drawable�selector

플러스친구�홈�이동�아이콘 icon_plusfriends_home drawable�selector

워키토키�버튼btn_walkie_talkie�btn_walkie_talkie_pressed

보이스톡�버튼

btn_mvoip_send_n�btn_mvoip_send_p�btn_mvoip_send_f�btn_mvoip_send_f_p

그룹콜�버튼

btn_groupcall_send_n�btn_groupcall_send_p�btn_groupcall_send_f�btn_groupcall_send_f_p

플.친�봇버튼�thm_btn_plusfriend_bot_n�thm_btn_plusfriend_bot_p


채팅방�>�스팸신고�


그룹 그룹스팸신고�배경 colors.xml�>�chatroom_spam_alert_view_bg_color아이콘/폰트컬러�적용되지�않으므로,�어두운�색� 권장1:1 검색창�인풋박스�이미지

colors.xml�>�chatroom_spam_alert_button_bg_normal colors.xml�>�chatroom_spam_alert_button_bg_pressed


�친구�탭


공통 친구목록�배경 thm_friendlist_bg 480�*�670�/�PNG

�검색창�영역

검색창�인풋박스�이미지 thm_general_searchboc_bg 9-patch

검색�배경�컬러 thm_general_default_list_search_item_bg drawable�selector

검색창�텍스트�컬러 thm_general_searchbox_font_color color�selector

헤더

헤더�배경�이미지 thm_general_default_list_section_header_bg 9-patch

헤더�텍스트�컬러 thm_general_default_list_section_header_font_clolr color�selector

친구�목록

목록�배경�컬러� colors.xml�>�default_list_background

친구�이름�텍스트�컬러 thm_general_default_list_item_title_font_color color�selector

상태메시지�배경 thm_friendlist_friend_status_bubble_bg 9-patch

상채메시지�텍스트�컬러 thm_friendlist_message_font_color color�selector


친구찾기�탭


공통 친구찾기�배경 thm_recommend_bg.9.png 480�*�670�/�PNG

친구찾기�버튼��영역

아이디�검색�아이콘 thm_recommend_menu_find_id_icon

45�*�45�/�PNG�66�*�66�/�PNG

XHDPI�권장QR코드�찾기�아이콘 thm_recommend_menu_find_qr_icon

흔들어찾기�아이콘 thm_recommend_menu_find_shake_icon

알리기�아이콘 thm_recommend_menu_share_icon

디바이더�라인�이미지 thm_general_default_divider_line.9.png 9-patch

메뉴�텍스트�컬러 colors.xml�>�recommendlist_description_font

목록

플러스친구�상태메시지�컬러 colors.xml>�recommendlist_description_font

섹션�구분�컬러 colors.xml�>�thm_recommedation_munu_tab_padding_color

플러스�친구�추가�버튼thm_btn_plusfriend_n.png�

thm_btn_plusfriend_p.png63�*�51�/�PNG

친구�추가�버튼thm_btn_add_friend_n.png�

thm_btn_add_friend_p.png280�*�65�/�PNG

친구�추가�버튼�+아이콘thm_btn_add_friend_plus_n.png�

thm_btn_add_friend_plus_p.png28�*�28�/�PNG


더보기�탭


공통 더보기�전체�배경�이미지 thm_setting_bg.9.png 480�*�670�/�PNG

내프로필�영역 새소식�아이콘 thm_more_function_item_notification_icon60�*�60�/�PNG�80�*�80�/�PNG�(XHDPI�권장)

추가�(5.7.0�버전�이상)

그리드�메뉴�영역

그리드�메뉴�배경�컬러colors.xml�>�more_function_item_background�

colors.xml�>�more_function_item_selected_background

그리드�메뉴�구분선�컬러 thm_more_function_item_grid_line_color

메뉴�텍스트�컬러 thm_more_function_item_font_color

아이템스토어�아이콘 thm_more_function_item_itemstore_icon�

60�*�60�/�PNG�80�*�80�/�PNG�

(XHDPI�권장)

선물하기�아이콘 thm_more_function_item_giftshop_icon�

플러스친구�아이콘 thm_more_function_item_plusfriend_icon�

게임�아이콘 thm_more_function_item_gamecenter_icon.

핫딜�아이콘 thm_more_function_item_hotdeal_icon. 추가�(5.1.0�버전�이상)

충전소�아이콘 thm_more_function_item_reward_icon 추가�(5.3.0�버전�이상)

주문생산�아이콘 thm_more_function_item_makers_icon 추가�(5.4.0�버전�이상)

헤어샵예약�아이콘 thm_more_function_item_hairshop_icon 추가�(5.7.0�버전�이상)

카카오계정�아이콘�(글로벌) thm_more_function_item_account_icon

글로벌�메뉴는�필수사항은�아님테마�아이콘(글로벌) thm_more_function_item_theme_icon

바게인�아이콘�(only�일본) thm_more_function_item_bargain_icon


더보기�탭>�새소식


공통 안�읽은�새소식�배경�컬러 thm_notification_list_unread_item_bg color�selector

공유,전달�시�대화상대�선택


탭�텍스트

활성화� thm_broadcast_picker_tab_font_color_selected

비활성화 hm_broadcast_picker_tab_font_color_normal


알림�팝업


공통 팝업�배경�이미지 thm_general_push_popup_bg

정보�영역 이름/메시지�텍스트�컬러 thm_general_push_popup_font_color color�selector

하단�버튼

버튼�이미지thm_general_push_popup_button_n�

thm_general�push_popup_button_p� 버튼�사이�라인�빼고�제작

버튼�폰트�컬러 thm_general_push_popup_button_color color�selector

알림�팝업�>�토스트�팝업


공통토스트�배경�이미지 thm_general_toast_bg 9-patch 그림자�필수

토스트�텍스트 thm_general_toast_new_message_font_color

알림�팝업�>�전달완료�배너�


공통

배너�배경�이미지 thm_directshare_bg_notification 9-patch 그림자�필수

배너�메시지�텍스트 thm_directshare_popup_message color�selector

배너�버튼�텍스트 thm_directshare_popup_info color�selector


암호�입력


공통 암호�배경�이미지 thm_passlock_bg 482�*�726�/�PNG

입력�박스�영역

�텍스트�컬러 thm_passlock_title_font_color color�selector

설명글�텍스트�컬러 thm_passlock_description_font_color color�selector

입력박스�인풋�이미지 thm_passlock_code_image90�*�83�/�PNG�drawable�selector

입력박스�체크�이미지 thm_passlock_code_image_checked

키패드 키패드�숫자num_0_n�~�num_9_n�/�num_back_n�

num_0_p�~�num_9_p�/�num_back_p48�*�67�/�PNG�drawable�selector

패키지명/권한�설정�변경STEP�3

패키지명은�unique한�값으로�설정하여야만�다른�테마로�덮어씌워지는�일을�막을�수�있습니다.�

제작자의�사이트(또는�블로그�등)�도메인�등�식별자로�사용할�수�있는�값을�사용해주세요. 이외의�다른�정보는�수정하지�않으시는�것이�좋습니다.

1)�패키지명�폴더�하위�>�AndroidManifest.xml�파일�열기�

2)�패키지명과�버전�정보�수정

�

�

��

��

��

��

��

http://schemas.android.com/apk/res/android

리소스�수정STEP�4

패키지명/res/values/�폴더�의�strings.xml�파일을�열면�아래와�같은�내용을�확인하실�수�있으며,�

붉은�색으로�표시된�부분에�자신의�테마에�맞는�이름을�적어줍니다.��

테마�이름은�가급적�20자�이내로�해주셔야�설정�화면에서�정상적으로�보여집니다.�

1)�테마명�변경하기

�

�

��Kakao�Friends�-�Forest�of�Secrets�

��Kakao�Friends�-�Forest�of�Secrets�

패키지명/res/drawable-hdpi�폴더�에는�테마�기능을�이용하여�변경하실�수�있는�샘플�이미지들이�있습니다.��

에서�표를�참조하여�변경하고자�하는�이미지를�동일한�파일명으로�교체하시면�됩니다.  예를�들어�카카오톡을�실행할�때�나타나는�Splash을�변경하고자�하시는�경우,�위�폴더�내의�thm_general_splash_img.png�파일을�교체하시면�됩니다.  특별히�바꿀�필요가�없는�이미지가�있으시다면,�그대로�두시거나�삭제하셔도�무방합니다.�

이미지�중�권장�타입이�9-patch로�표시된�항목은�폰�사이즈나�상황에�따라�크기가�변하는�이미지로서,�추가�작업이�필요�합니다.��

9-patch�방법에�대해서는�인터넷의�강좌�또는�아래의�링크를�참조하시면�됩니다.�

��

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

2)�이미지�수정하기

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

리소스�수정STEP�4

패키지명/res/values�폴더�의�colors.xml�파일에는�기본적으로�사용되며�변경�가능한�컬러값들이�정의되어�있습니다.��

이�값들을�원하시는�색으로�변경�가능하며,�형식은�#rrggbb�또는�#aarrggbb�형태로�정의합니다.

3)�컬러값�수정하기

�

��

 #ffaacc�

��#fffbf14d�

��#ffee99bb�

��#ffaaaaaa�

��

패키지명/res/color�폴더�하위에는�좀�더�상세하게�컬러값을�지정할�수�있는�요소들이�각각의�xml�파일�형태로�정의되어�있으며,��

이�곳에서�변경할�수�있는�컬러값은�위�표에서�‘color�selector’�타입이라고�되어�있는�항목들입니다. 예를�들어�각�탭에서의�폰트�색깔을�설정하고�싶다면�thm_tab_text_font_color.xml�파일을�열어서�원하시는�값으로�수정�하시면�됩니다.�

�

��

��

��

��

��

��

�

안드로이드�고급�사용자라면,�drawable�selector를�변경하여�기존에�이미지�타입으로�지정되어�있는�값을�컬러값으로�바꾸거나��

혹은�그�반대로�수정할�수도�있습니다.

http://schemas.android.com/apk/res/android

폰에�설치STEP�5

작업이�모두�끝났다면�다시�apk�파일로�Compile�및�Sign하여�내�폰에�설치할�수�있습니다. 카카오톡�테마는�설치�시에�어떠한�권한도�요청하지�않으므로,�만약�권한을�부여해야�한다는�메시지가�나오면��

제작한�테마에�문제가�없는지�다시�한�번�확인해�봐야�합니다.�

설치가�성공적으로�끝나게�되면�카카오톡의�더보기�탭�>�설정�>�테마�설정�메뉴에서�설치한�테마를�확인하실�수�있으며,��

�버튼을�누르면�바로�테마가�적용되게�됩니다.�

Apk�파일�설치

Documents

android theme guide KR · 2017. 10. 23. · 구분 항목 리소스명 권장타입 비고 공통 테마이름 theme_title string 스플래시 thm_general_splash_image.9.png 480*854/PNG