android theme guide kr · 2017. 10. 23. · 구분 항목 리소스명 권장타입 비고 공통...
TRANSCRIPT
-
나만의�카카오톡�테마�만들기�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�메뉴
변경�가능�리소스�확인STEP�2
-
변경�가능�리소스�확인STEP�2
프로필
구분 항목� 리소스명 권장�타입 비고
프로필 이미지
프로필�기본�이미지 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
-
변경�가능�리소스�확인STEP�2
채팅방
구분 항목� 리소스명 권장�타입 비고
공통 채팅방�배경 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
-
변경�가능�리소스�확인STEP�2
채팅방>�하단�메시지�입력창
구분 항목� 리소스명 권장�타입 비고
공통
메시지�입력창�배경 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
-
변경�가능�리소스�확인STEP�2
채팅방�>�스팸신고�
구분 항목� 리소스명 권장�타입 비고
그룹 그룹스팸신고�배경 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
-
변경�가능�리소스�확인STEP�2
�친구�탭
구분 항목� 리소스명 권장�타입 비고
공통 친구목록�배경 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
-
변경�가능�리소스�확인STEP�2
친구찾기�탭
구분 항목� 리소스명 권장�타입 비고
공통 친구찾기�배경 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
-
변경�가능�리소스�확인STEP�2
더보기�탭
구분 항목� 리소스명 권장�타입 비고
공통 더보기�전체�배경�이미지 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
-
변경�가능�리소스�확인STEP�2
더보기�탭>�새소식
구분 항목� 리소스명 권장�타입 비고
공통 안�읽은�새소식�배경�컬러 thm_notification_list_unread_item_bg color�selector
공유,전달�시�대화상대�선택
구분 항목� 리소스명 권장�타입 비고
탭�텍스트
활성화� thm_broadcast_picker_tab_font_color_selected
비활성화 hm_broadcast_picker_tab_font_color_normal
-
변경�가능�리소스�확인STEP�2
알림�팝업
구분 항목� 리소스명 권장�타입 비고
공통 팝업�배경�이미지 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
-
변경�가능�리소스�확인STEP�2
암호�입력
구분 항목� 리소스명 권장�타입 비고
공통 암호�배경�이미지 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�파일�설치