android_theme_guide_수정_121112

Size: px

Start display at page:

Download "android_theme_guide_수정_121112"

상태 민
5 years ago
Views:

1 나만의테마만들기실제테마파일을만드시려면아래의절차를따라하시면됩니다. 1. 샘플 apk 또는프로젝트파일다운로드카카오톡테마는실행속도와확장성을고려하여 apk 파일형태로제작하도록설계되었습니다. [ 카카오톡홈페이지 > 카카오톡사용자테마 ] 에 zip 파일의카카오톡샘플테마를제공해드리고있습니다. 원하시는샘플테마를다운로드받으세요. 2. 변경가능리소스확인테마기능을이용하여변경할수있는카카오톡의리소스 ( 이미지및컬러값 ) 는아래와같습니다. 변경가능리소스는계속확대해나갈예정입니다. 카테고리항목 ( 지원카카오톡버전 ) 리소스이름권장타입 일반테마이름 (3.0.0~) theme_title string 스플래쉬이미지 (3.0.0~) thm_general_splash_image 스플래쉬썸네일이미지 (3.0.0~) 리스트항목타이틀폰트색 (3.0.0~) 리스트항목기본배경 (3.0.0~) thm_general_splash_thumbnail_image thm_general_default_list_item_title_font_c olor thm_general_default_list_item_bg 120 x 180 이미지 리스트헤더기본배경 (3.0.0~) 리스트헤더폰트색 (3.0.0~) thm_general_default_list_section_header_ bg thm_general_default_list_section_headerf ont_ 리스트검색섹션배경 (3.0.0~) thm_general_default_list_search_item_bg 사용자프로필기본이미지 (3.0.0~) 그룹채팅기본이미지 (3.0.0~) thm_general_default_profile_image thm_general_default_group_image 검색박스배경 (3.0.0~) thm_general_searchbox_bg 검색박스아이콘 (3.0.0~) 토스트메세지배경 (3.4.0~) thm_general_searchbox_icon thm_general_toast_bg 푸쉬메세지팝업배경 (3.0.0~) thm_general_push_popup_bg 푸쉬메세지팝업선택버튼배경 (3.0.0~) thm_general_push_popup_button_bg 푸시메세지팝업의 [ 보기 ], [ 닫기 ] 버튼폰트색 (3.4.0~) thm_general_push_popup_button_font_c olor

2 카테고리항목 ( 지원카카오톡버전 ) 리소스이름권장타입 더보기메뉴아이콘 (3.0.0~) thm_general_menu_more_icon 타이틀바배경 (3.1.0~) thm_general_title_bg 메인탭 탭폰트색상 (3.0.0~) thm_tab_text_font_ 탭배경 (3.0.0~) thm_tab_indicator_bg 친구탭아이콘 (3.0.0~) thm_tab_friend_icon 채팅탭아이콘 (3.0.0~) thm_tab_chatting_icon 친구추천탭아이콘 (3.0.0~) thm_tab_recommend_icon 더보기탭아이콘 (3.0.0~) thm_tab_more_icon 채팅방 채팅방배경 (3.0.0~) thm_chatroom_bg 하단입력바배경 (3.0.0~) thm_chatroom_input_bar_bg 내말풍선배경 (3.0.0~) thm_chatroom_message_bubble_me_bg 상대방말풍선배경 (3.0.0~) thm_chatroom_message_bubble_you_bg 플러스친구말풍선배경 (3.0.0~) 내이모티콘말풍선배경 (3.0.0~) 상대방이모티콘말풍선배경 (3.0.0~) thm_chatroom_message_bubble_plus_bg thm_chatroom_message_bubble_emotic on_me_bg thm_chatroom_message_bubble_emotic on_you_bg 말풍선전송정보배경 (3.4.0~) thm_chatroom_message_info_bg 채팅멤버추가메뉴아이콘 (3.0.0~) 방나가기메뉴아이콘 (3.0.0~) 메세지입력바버튼배경 (3.0.0~) 이모티콘버튼아이콘 (3.0.0~) 미디어선택버튼아이콘 (3.0.0~) 이모티콘버튼배경, 미디어선택버튼배경 (3.4.0~) thm_chatroom_menu_add_friend_icon thm_chatroom_menu_exit_icon thm_chatroom_button_bg thm_chatroom_emoticon_button_icon thm_chatroom_media_button_icon thm_chatroom_media_button_bg

3 카테고리 항목 ( 지원카카오톡버전 ) 리소스이름 권장타입 채팅방 [ 전송 ] 버튼폰트색 (3.4.0~) thm_chatroom_send_font_ 메시지입력창배경 (3.1.0~) thm_chatroom_input_message_bg 내메세지폰트색 (3.1.0~) 상대방메세지폰트색 (3.1.0~) 메세지시간폰트색 (3.1.0~) 읽지않은메세지수폰트색 (3.1.0~) thm_chatroom_my_message_font_ thm_chatroom_other_message_font_col or thm_chatroom_infobox_time_font_ thm_chatroom_infobox_count_font_ 알림창배경 (3.1.0~) thm_chatroom_navigation_bg 알림메세지폰트색 (3.1.0~) thm_chatroom_navigation_message_font _ 미디어선택팝업 팝업배경 (3.0.0~) thm_media_select_bg 사진앨범아이콘 (3.0.0~) thm_media_select_menu_picture_icon 사진촬영아이콘 (3.0.0~) thm_media_select_menu_camera_icon 음성메시지아이콘 (3.0.0~) thm_media_select_menu_recorder_icon 연락처아이콘 (3.0.0~) thm_media_select_menu_contact_icon 보이스톡아이콘 (3.0.0~) thm_media_select_menu_voicetalk_icon 선물하기아이콘 (3.0.0~) thm_media_select_menu_gift_icon 일정아이콘 (3.5.5~) thm_media_select_menu_scheduler_icon 채팅플러스 채팅플러스배경 (3.5.0~) thm_chat_plus_bg 채팅리스트 채팅리스트배경 (3.0.0~) thm_chatlist_bg 채팅방만들기메뉴아이콘 (3.0.0~) thm_chatlist_menu_new_icon 채팅방리스트편집메뉴아이콘 (3.0.0~) thm_chatlist_menu_edit_icon 친구리스트 친구리스트배경 (3.0.0~) thm_friendlist_bg 친구상태말풍선배경 (3.0.0~) 친구리스트편집아이콘 (3.0.0~) thm_friendlist_friend_status_bubble_bg thm_friendlist_menu_edit_icon

4 카테고리항목 ( 지원카카오톡버전 ) 리소스이름권장타입 친구상태메시지폰트색 (3.1.0~) thm_friendlist_message_font_ 미니프로필 미니프로필배경 (3.0.0~) thm_minipf_bg 상단버튼영역배경 (3.0.0~) thm_minipf_addon_box_bg 버튼배경 (3.0.0~) 선물하기아이콘 (3.0.0~) 즐겨찾기추가아이콘 (3.0.0~) 즐겨찾기제거아이콘 (3.0.0~) 이름수정아이콘 (3.0.0~) 닫기아이콘 (3.0.0~) thm_minipf_button_bg thm_minipf_gift_button_icon thm_minipf_favorite_add_button_icon thm_minipf_favorite_remove_button_icon thm_minipf_edit_name_button_icon thm_minipf_close_button_icon 플러스친구미니프로필홈방문하기배경 (3.4.0~) 플러스친구미니프로필홈방문하기폰트색 (3.4.0~) 플러스친구미니프로필홈방문하기화살표 (3.4.0~) 플러스친구미니프로필친구수배경 (3.4.0~) 플러스친구미니프로필친구수폰트색 (3.4.0~) thm_minipf_visit_plus_home_bg thm_minipf_visit_plus_home_font_ thm_minipf_visit_plus_home_arrow thm_minipf_friends_count_bg thm_minipf_friends_count_font_ 친구찾기 친구추천리스트배경 (3.0.0~) thm_recommend_bg ID 로찾기 (3.5.0~) thm_recommend_menu_find_id_icon QR 코드로찾기 (3.5.0~) thm_recommend_menu_find_qr_icon 카카오톡알리기 (3.5.0~) thm_recommend_menu_share_icon 추천리스트편집아이콘 (3.0.0~) 차단리스트편집아이콘 (3.0.0~) 플러스친구아이콘 (3.0.0~) thm_recommend_menu_edit_recommen d_list_icon thm_recommend_menu_edit_blocked_list _icon thm_recommend_menu_plus_friend_icon

5 카테고리항목 ( 지원카카오톡버전 ) 리소스이름권장타입 플러스친구전체보기화살표 (3.4.0~) thm_icon_plusfriend_more_arrow 설정화면 잠금화면 설정화면배경이미지 (3.0.0~) thm_setting_bg 암호 폰트색 (3.4.0~) thm_passlock_title_font_ 암호 밑글씨의폰트색 (3.4.0~) thm_passlock_description_font_ 암호입력필드빈상태 (3.0.0~) 암호입력필드입력상태 (3.0.0~) 키패드버튼배경 (3.0.0~) 키패드버튼숫자아이콘 (3.0.0~) 암호입력창배경 (3.1.0~) 키패드버튼배경 (3.1.0~) thm_passlock_code_image thm_passlock_code_image_checked thm_passlock_keypad_button_bg thm_passlock_keypad_[ back]_button_icon thm_passlock_bg thm_passlock_keypad_button_bg 더보기 항목배경 (3.0.0~) thm_more_function_item_bg 항목폰트색 (3.4.0~) thm_more_function_item_font_ 카카오계정항목아이콘 (3.0.0~) 공지사항항목아이콘 (3.0.0~) 설정항목아이콘 (3.0.0~) 선물하기항목아이콘 (3.0.0~) 아이템스토어항목아이콘 (3.0.0~) 플러스친구항목아이콘 (3.0.0~) 게임센터항목아이콘 (3.1.0~) thm_more_function_item_account_icon thm_more_function_item_notice_icon thm_more_function_item_setting_icon thm_more_function_item_giftshop_icon thm_more_function_item_itemstore_icon thm_more_function_item_plusfriend_icon thm_more_function_item_gamecenter_ic on

6 3. AndroidManifest.xml 수정하기패키지명폴더하위에 AndroidManifest.xml 파일이있습니다. 이파일을이용하여패키지명과버전정보를변경합니다. 패키지명은 unique 한값으로설정하셔야만다른테마로덮어씌워지는일을막을수있으니제작자의사이트 ( 또는블로그등 ) 도메인등식별자로사용할수있는값으로변경해주셔야합니다. 이외의다른정보는수정하지않으시는것이좋습니다. <manifest android:versioncode="1" android:versionname="1.0.0" package="com.kakaotalk.theme.sample" xmlns:android=" <!- - kakaotalk theme : 아래권한부여가있어야만테마를사용할수있습니다 - - > <permission android:name="com.kakao.talk.theme.v1" /> <uses- sdk android:minsdkversion="4" /> <application android:label="@string/app_name" android:icon="@/icon" android:debuggable="true" /> </manifest> 4. 리소스수정하기 (1) 테마이름바꾸기패키지명 /res/values/ 폴더의 strings.xml 파일을열면아래와같은내용을확인하실수있으며, 붉은색으로표시된부분에자신의테마에맞는이름을적어줍니다. 테마이름은가급적 20 자이내로해주셔야설정화면에서정상적으로보여집니다. <resources> <!- - 카카오톡테마설정에서보여줄제목 - - > <string name="theme_title"> 샘플테마 </string> <!- - 안드로이드설치페이지에서보여줄제목 - - > <string name="app_name"> 카카오톡테마샘플 </string> </resources> (2) 이미지수정하기패키지명 /res/-hdpi 폴더에는테마기능을이용하여변경하실수있는샘플이미지들이있습니다. 상단의리소스표를참조하셔서, 변경하고자하는이미지를동일한파일명으로교체하시면됩니다. 예를들어카카오톡을실행할때나타나는초기화면을변경하고자하시는경우, 위폴더내의 thm_general_splash_img.png 파일을교체하시면됩니다. 특별히바꿀필요가없는이미지가있으시다면, 그대로두시거나삭제하셔도무방합니다. 이미지중권장타입이 로표시된항목은폰사이즈나상황에따라크기가변하는이미지로서, 추가작업이필요합니다. 방법에대해서는인터넷의강좌또는아래의링크를참조하시면됩니다.

7 (3) 컬러값수정하기패키지명 /res/values 폴더의 s.xml 파일에는기본적으로사용되며변경가능한컬러값들이정의되어있습니다. 이값들을원하시는색으로변경가능하며, 형식은 #rrggbb 또는 #aarrggbb 형태로정의합니다. <resources> <!- - 변경가능한컬러값예시 - - > < name="default_list_background">#00ffaacc</> < name="default_list_selected_background">#ffaaaaaa</> < name="tab_bg">#ffee99bb</> < name="tab_bg_p">#ffaaaaaa</> </resources> 패키지명 /res/ 폴더하위에는좀더상세하게컬러값을지정할수있는요소들이각각의 xml 파일형태로정의되어있으며, 이곳에서변경할수있는컬러값은위표에서 타입이라고되어있는항목들입니다. 예를들어각탭에서의폰트색깔을설정하고싶다면 thm_tab_text_font_.xml 파일을열어서원하시는값으로수정하시면됩니다. < xmlns:android=" <item android:state_checked="true" android:="#ffff0000" /> <item android:state_selected="true" android:="#ffff0000" /> <item android:state_focused="true" android:="#ffff0000" /> <item android:state_pressed="true" android:="#ffff0000" /> <item android:="#ff000000" /> </> 안드로이드고급사용자라면, 를변경하여기존에이미지타입으로지정되어있는값을컬러값으로바꾸거나혹은그반대로수정할수도있습니다. 5. 폰에설치하기작업이모두끝났다면다시 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