체크포인트 카카오톡 4.0 이상부터지원 480PX * 800PX (HDPI) 기준으로제작 ( 아이콘일부는고해상도권장 ) 폰트컬러변경가능 레이아웃변경불가

Size: px

Start display at page:

Download "체크포인트 카카오톡 4.0 이상부터지원 480PX * 800PX (HDPI) 기준으로제작 ( 아이콘일부는고해상도권장 ) 폰트컬러변경가능 레이아웃변경불가"

주랑 야
5 years ago
Views:

1 나만의카카오톡테마만들기 for Android 카카오톡 4.0 사용자테마가이드 creative by TALK Design Team/KAKAO

2 체크포인트 카카오톡 4.0 이상부터지원 480PX * 800PX (HDPI) 기준으로제작 ( 아이콘일부는고해상도권장 ) 폰트컬러변경가능 레이아웃변경불가

3 STEP 1 파일다운로드 카카오톡테마는실행속도와확장성을고려하여 apk 파일형태로제작하도록설계되었습니다. [Kakao.com > 서비스 > 카카오톡 > 사용자테마 ] 에서원하시는카카오톡샘플테마를다운로드받으세요.

4 기본 테마이름 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 Action Bar 공통액션바배경 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

5 상단 TAP 메뉴 공통 아이콘 채팅 탭메뉴배경 thm_tab_indicator_bg.9.png thm_tab_indicator_p_bg.9.png 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 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 9-patch / H77px drawable selector? * 84 / PNG? * 106 / PNG 각탭의배경을합칠경우전체영역을나인패치로 XHDPI 권장 채팅목록배경 thm_chatlist_bg.9.png 480 *670 / PNG 공통 채팅시작버튼 thm_chat_start_n.png thm_chat_start_p.png 100 * 100 / PNG 130 * 130 / PNG XHDPI 권장 목록정보 최근메시지텍스트컬러 thm_chatlist_message_font_color color selector 메시지수신시각컬러 colors.xml > thm_chatlist_message_time_font_color color selector

6 채팅 > 채팅방 공통채팅방배경 thm_chatroom_bg.9.png 480 *744 / PNG 내메시지말풍선배경 thm_chatroom_message_bubble_me_bg.9.png 9-patch 내메시지말풍선배경 _ 연속 thm_chatroom_message_bubble_me_bg_no_tail.9.png 9-patch 추가 (4.7.1 버전이상 ) 내메시지텍스트컬러 thm_chatroom_my_message_font_color color selector 흰색사용불가 상대방메시지말풍선배경 thm_chatroom_message_bubble_you_bg.9.png 9-patch 상대방메시지말풍선배경 _ 연속 thm_chatroom_message_bubble_you_bg_no_tail.9.png 9-patch 추가 (4.7.1 버전이상 ) 상대방이름텍스트컬러 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

7 채팅 > 채팅방 > 하단메시지입력창 구분 항목 리소스명 권장타입 비고 메시지입력창배경 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

8 친구 구분 항목 리소스명 권장타입 비고 공통 친구목록배경 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_general_default_profile_image 150*150 / PNG 그룹프로필그룹이미지 thm_general_default_group_profile_image 150*150 / PNG 추가 (5.1.0 버전이상 )

9 친구찾기 공통친구찾기배경 thm_recommend_bg.9.png 480 * 670 / PNG 아이디검색아이콘 thm_recommend_menu_find_id_icon 친구찾기버튼영역 QR코드찾기아이콘흔들어찾기아이콘알리기아이콘 thm_recommend_menu_find_qr_icon thm_recommend_menu_find_shake_icon thm_recommend_menu_share_icon 45 * 45 / PNG 66 * 66 / PNG XHDPI 권장 디바이더라인이미지 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_add_friend_n thm_btn_add_friend_p 63 * 51 / PNG

10 더보기 공통더보기전체배경이미지 thm_setting_bg.9.png 480 * 670 / PNG 그리드메뉴배경컬러 colors.xml > more_function_item_background colors.xml > more_function_item_selected_background 그리드메뉴구분선컬러아이템스토어아이콘공지사항아이콘설정아이콘선물하기아이콘 thm_more_function_item_grid_line_color thm_more_function_item_itemstore_icon thm_more_function_item_notice_icon. thm_more_function_item_setting_icon thm_more_function_item_giftshop_icon 그리드메뉴영역 플러스친구아이콘 thm_more_function_item_plusfriend_icon 게임아이콘 thm_more_function_item_gamecenter_icon 60 * 60 / PNG 80 * 80 / PNG XHDPI 권장 카카오페이아이콘 카카오스타일아이콘 카카오티비아이콘 thm_more_function_item_kakaopay_icon thm_more_function_item_style_icon thm_more_function_item_tv_icon 핫딜아이콘 thm_more_function_item_hotdeal_icon 추가 (5.1.0 버전이상 ) 메뉴텍스트컬러 thm_more_function_item_font_color

11 미니프로필 공통미니프로필영역배경 thm_minipf_bg 480 * 300 / PNG - 9-patch 필수 - 풍경이미지의경우전체영역을나인패치로 기본프로필이미지 thm_general_default_profile_image 150 * 150 / PNG 닫기버튼 thm_minipf_close_button_icon 45 * 45 X 메타포살림 프로필정보이미지 전화번호 / 계정버튼플러스친구수배경하단버튼이름상태메시지 thm_minipf_voicetalk_n thm_minipf_voicetalk_p thm_minipf_friends_count_bg thm_minipf_button_n thm_minipf_button_p thm_minipf_nickname_font_color thm_minipf_status_font_color 텍스트정보전화번호 / 계정 thm_minipf_dial_button_font_color 플러스친구수 하단버튼 thm_minipf_friends_count_font_color thm_minipf_button_font_color

12 알림팝업 공통팝업배경이미지 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_broadcast_picker_tab_font_color_selected hm_broadcast_picker_tab_font_color_normal

13 암호입력 공통암호배경이미지 thm_passlock_bg 482 * 726 / PNG < 암호 > 텍스트컬러 thm_passlock_title_font_color color selector 입력박스영역 설명글텍스트컬러 thm_passlock_description_font_color color selector 입력박스인풋이미지 thm_passlock_code_image 90 * 83 / PNG 입력박스체크이미지 thm_passlock_code_image_checked drawable selector 키패드 키패드숫자 num_0_n ~ num_9_n / num_back_n num_0_p ~ num_9_p / num_back_p 48 * 67 / PNG drawable selector

STEP 3 패키지명 / 권한설정변경 1) 패키지명폴더하위 > AndroidManifest.xml 파일열기 2) 패키지명과버전정보수정 패키지명은 unique 한값으로설정하여야만다른테마로덮어씌워지는일을막을수있습니다. 제작자의사이트 ( 또는블로그등 ) 도메인등식별자로사용할수있는값을사용해주세요. 이외의다른정보는수정하지않으시는것이좋습니다. <?

14 STEP 3 패키지명 / 권한설정변경 1) 패키지명폴더하위 > AndroidManifest.xml 파일열기 2) 패키지명과버전정보수정 패키지명은 unique 한값으로설정하여야만다른테마로덮어씌워지는일을막을수있습니다. 제작자의사이트 ( 또는블로그등 ) 도메인등식별자로사용할수있는값을사용해주세요. 이외의다른정보는수정하지않으시는것이좋습니다. <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android=" package="com.kakao.talk.theme.kakaofriendsa" android:versioncode="3" android:versionname="4.0.0" >  <uses-permission android:name="com.kakao.talk.theme.v1" /> <uses-sdk android:minsdkversion="4" />  <application android:label="@string/app_name" android:icon="@drawable/icon" /> </manifest>

15 STEP 4 리소스수정 1) 테마명변경하기 패키지명 /res/values/ 폴더의 strings.xml 파일을열면아래와같은내용을확인하실수있으며, 붉은색으로표시된부분에자신의테마에맞는이름을적어줍니다. 테마이름은가급적 20 자이내로해주셔야설정화면에서정상적으로보여집니다. <?xml version="1.0" encoding="utf-8"?> <resources> <string name="theme_title">kakao Friends - Forest of Secrets</string> <string name="app_name">kakao Friends - Forest of Secrets</string> </resources> 2) 이미지수정하기 패키지명 /res/drawable-hdpi 폴더에는테마기능을이용하여변경하실수있는샘플이미지들이있습니다. <STEP2. > 에서표를참조하여변경하고자하는이미지를동일한파일명으로교체하시면됩니다. 예를들어카카오톡을실행할때나타나는 Splash을변경하고자하시는경우, 위폴더내의 thm_general_splash_img.png 파일을교체하시면됩니다. 특별히바꿀필요가없는이미지가있으시다면, 그대로두시거나삭제하셔도무방합니다. 이미지중권장타입이 9-patch 로표시된항목은폰사이즈나상황에따라크기가변하는이미지로서, 추가작업이필요합니다. 9-patch 방법에대해서는인터넷의강좌또는아래의링크를참조하시면됩니다.

16 STEP 4 리소스수정 3) 컬러값수정하기 패키지명 /res/values 폴더의 colors.xml 파일에는기본적으로사용되며변경가능한컬러값들이정의되어있습니다. 이값들을원하시는색으로변경가능하며, 형식은 #rrggbb 또는 #aarrggbb 형태로정의합니다. <?xml version="1.0" encoding="utf-8"?> <resources>  <color name="default_list_background">#ffaacc</color> <color name="default_list_selected_background">#fffbf14d</color> <color name="tab_bg">#ffee99bb</color> <color name="tab_bg_p">#ffaaaaaa</color> </resources> 패키지명 /res/color 폴더하위에는좀더상세하게컬러값을지정할수있는요소들이각각의 xml 파일형태로정의되어있으며, 이곳에서변경할수있는컬러값은위표에서 color selector 타입이라고되어있는항목들입니다. 예를들어각탭에서의폰트색깔을설정하고싶다면 thm_tab_text_font_color.xml 파일을열어서원하시는값으로수정하시면됩니다. <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android=" <item android:state_checked="true" android:color="#ffff0000" /> <item android:state_selected="true" android:color="#ffff0000" /> <item android:state_focused="true" android:color="#ffff0000" /> <item android:state_pressed="true" android:color="#ffff0000" /> <item android:color="#ff000000" /> </selector> 안드로이드고급사용자라면, drawable selector 를변경하여기존에이미지타입으로지정되어있는값을컬러값으로바꾸거나 혹은그반대로수정할수도있습니다.

17 STEP 5 폰에설치 Apk 파일설치 작업이모두끝났다면다시 apk 파일로 Compile 및 Sign 하여내폰에설치할수있습니다. 카카오톡테마는설치시에어떠한권한도요청하지않으므로, 만약권한을부여해야한다는메시지가나오면제작한테마에문제가없는지다시한번확인해봐야합니다. 설치가성공적으로끝나게되면카카오톡의더보기탭 > 설정 > 테마설정메뉴에서설치한테마를확인하실수있으며, < 적용하기 > 버튼을누르면바로테마가적용되게됩니다.

android_theme_guide_KR.key

android_theme_guide_KR.key 나만의카카오톡테마만들기 for Android 카카오톡 4.0 사용자테마가이드 creative by TALK Design Team/KAKAO 체크포인트 카카오톡 4.0 이상부터지원 480PX * 800PX (HDPI) 기준으로제작 ( 아이콘일부는고해상도권장 ) 폰트컬러변경가능 레이아웃변경불가 STEP 1 파일다운로드 카카오톡테마는실행속도와확장성을고려하여 apk