나만의카카오톡테마만들기 for Android 카카오톡 4.0 사용자테마가이드 creative by TALK Design Team/KAKAO
체크포인트 카카오톡 4.0 이상부터지원 480PX * 800PX (HDPI) 기준으로제작 ( 아이콘일부는고해상도권장 ) 폰트컬러변경가능 레이아웃변경불가
STEP 1 파일다운로드 카카오톡테마는실행속도와확장성을고려하여 apk 파일형태로제작하도록설계되었습니다. [Kakao.com > 서비스 > 카카오톡 > 사용자테마 ] 에서원하시는카카오톡샘플테마를다운로드받으세요.
기본 테마이름 theme_title string 공통 스플래시 thm_general_splash_image 480*854 / PNG 썸네일 thm_general_splash_thumbnail_image 180*286 PNG 20KB 이하 아이콘 icon.png 72*72 / PNG Action Bar 공통액션바배경 thm_general_title_bg 9-patch 액션바텍스트컬러 thm_action_bar_title_font_color color selector 이전버튼아이콘컬러 thm_actionbar_back_button_icon 13 * 25 / PNG - 디자인유지컬러 - 변경가능 액션바정보및버튼정의 Done 아이콘컬러 bar_icon_check_disable bar_icon_check 25 * 16 / PNG - 디자인유지컬러 - 변경가능 버튼텍스트컬러 action_bar_done_font_normal action_bar_done_font_pressed action_bar_done_font_disabled color selector
상단 TAP 메뉴 공통 탭메뉴배경 thm_tab_indicator_bg thm_tab_indicator_p_bg 탭선택바 thm_main_tab_underline_image 9-patch 9-patch drawable selector 친구아이콘 thm_tab_friend_icon_n thm_tab_friend_icon_p 채팅아이콘 thm_tab_chatting_icon_n thm_tab_chatting_icon_p 아이콘 친구추천아이콘 thm_tab_recommend_icon_n thm_tab_recommend_icon_p? * 84 / PNG? * 106 / PNG XHDPI 권장 게임아이콘 thm_tab_game_icon_n thm_tab_game_icon_p 더보기아이콘 thm_tab_more_icon_n thm_tab_more_icon_p 채팅 채팅목록배경 thm_chatlist_bg 480 *630 / PNG 9-patch 불가 공통 채팅시작버튼 thm_chat_start_n thm_chat_start_p 100 * 100 / PNG 130 * 130 / PNG XHDPI 권장 목록정보 최근메시지텍스트컬러 thm_chatlist_message_font_color color selector 메시지수신시각컬러 thm_chatlist_message_time_font_color color selector
채팅 > 채팅방 공통채팅방배경 thm_chatroom_bg 480 *724 / PNG 알림정보 알림바배경 thm_chatroom_navigation_bg 9-patch 알림바텍스트 thm_chatroom_navigation_font_color color selector 내메시지말풍선배경 thm_chatroom_message_bubble_me_bg 9-patch 내메시지텍스트컬러 thm_chatroom_my_message_font_color color selector 흰색사용불가 상대방메시지말풍선배경 thm_chatroom_message_bubble_you_bg 9-patch 상대방이름텍스트컬러 thm_chatroom_other_nickname_font_color color selector 상대방메시지텍스트컬러 thm_chatroom_other_message_font_color color selector 흰색사용불가 메시지관련정보 메시지정보배경 thm_chatroom_message_info_bg 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-patch 내부박스는흰색필수 상대방이모티콘말풍선배경 thm_chatroom_message_bubble_emotion_you_bg 9-patch 내부박스는흰색필수 플러스친구메시지말풍선배경 thm_chatroom_message_bubble_plus_bg 9-patch
채팅 > 채팅방 > 하단메시지입력창 메시지입력창배경 thm_chatroom_input_bar_bg 9-patch 공통 메시지인풋창배경 thm_chatroom_input_message_bg 플. 친메시지입력창배경 thm_chatroom_plusfriend_input_bar_bg 9-patch 전송버튼배경 chatroom_button_bg_n chatroom_button_bg_p 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
채팅 > 채팅방 > 스팸신고 공통 1:1 스팸신고배경 그룹스팸신고배경 chatroom_spam_alert_bg_normal chatroom_spam_alert_button_bg_pressed thm_chatroom_spam_alert_view_bg_color
친구 공통친구목록배경 thm_friendlist_bg 480 * 630 / 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 친구목록 친구이름텍스트컬러 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 480 * 630 / 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-patch 메뉴텍스트컬러 recommendlist_description_font 목록플러스친구상태메시지컬러 recommendlist_description_font 친구추가버튼 thm_btn_add_friend_n thm_btn_add_friend_p 63 * 51 / PNG
더보기 공통더보기전체배경이미지 thm_setting_bg 480 * 630 / PNG 그리드메뉴배경컬러 more_function_item_background 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 60 * 60 / PNG 80 * 80 / PNG XHDPI 권장 플러스친구아이콘 thm_more_function_item_plusfriend_icon 게임아이콘 thm_more_function_item_gamecenter_icon. 메뉴텍스트컬러 thm_more_function_item_font_color
미니프로필 공통미니프로필영역배경 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
알림팝업 공통팝업배경이미지 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_broadcast_picker_tab_font_color_selected hm_broadcast_picker_tab_font_color_normal
암호입력 공통암호배경이미지 thm_passlock_bg 482 * 726 / PNG 9-patch < 암호 > 텍스트컬러 thm_passlock_title_font_color color selector 입력박스영역 설명글텍스트컬러 thm_passlock_description_font_color color selector 입력박스인풋이미지 입력박스체크이미지 thm_passlock_code_image thm_passlock_code_image_checked 90 * 83 / PNG 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 한값으로설정하여야만다른테마로덮어씌워지는일을막을수있습니다. 제작자의사이트 ( 또는블로그등 ) 도메인등식별자로사용할수있는값을사용해주세요. 이외의다른정보는수정하지않으시는것이좋습니다. <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.kakao.talk.theme.kakaofriendsa" android:versioncode="3" android:versionname="4.0.0" > <-- kakaotalk theme : 아래권한부여가있어야만테마를사용할수있습니다 --> <permission android:name="com.kakao.talk.theme.v1" /> <uses-sdk android:minsdkversion="4" /> <application android:label="@string/app_name" android:icon="@drawable/icon" /> </manifest>
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 방법에대해서는인터넷의강좌또는아래의링크를참조하시면됩니다. http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch
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="http://schemas.android.com/apk/res/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 를변경하여기존에이미지타입으로지정되어있는값을컬러값으로바꾸거나 혹은그반대로수정할수도있습니다.
STEP 5 폰에설치 Apk 파일설치 작업이모두끝났다면다시 apk 파일로 Compile 및 Sign 하여내폰에설치할수있습니다. 카카오톡테마는설치시에어떠한권한도요청하지않으므로, 만약권한을부여해야한다는메시지가나오면 제작한테마에문제가없는지다시한번확인해봐야합니다. 설치가성공적으로끝나게되면카카오톡의더보기탭 > 설정 > 테마설정메뉴에서설치한테마를확인하실수있으며, < 적용하기 > 버튼을누르면바로테마가적용되게됩니다.