나만의카카오톡테마만들기 for Android 카카오톡사용자테마가이드 creative by TALK Design Team/KAKAO
체크포인트 카카오톡 4.0 이상부터지원 480PX * 800PX (HDPI) 기준으로제작 ( 아이콘일부는고해상도권장 ) 폰트컬러변경가능 레이아웃변경불가
STEP 1 파일다운로드 카카오톡테마는실행속도와확장성을고려하여 apk 파일형태로제작하도록설계되었습니다. [Kakao.com > 서비스 > 카카오톡 > 사용자테마 ] 에서원하시는카카오톡샘플테마를다운로드받으세요.
기본 테마이름 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
상단 TAP 메뉴 공통 탭메뉴배경 thm_tab_indicator_bg.9.png thm_tab_indicator_p_bg.9.png thm_tab_bg.9.png 9-patch / H77px drawable selector 각탭의배경을합칠경우전체영역을나인패치로 탭선택바 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? * 84 / PNG? * 106 / PNG XHDPI 권장 게임아이콘 thm_tab_game_icon_n.png thm_tab_game_icon_p.png 더보기아이콘 thm_tab_more_icon_n.png thm_tab_more_icon_p.png
프로필 프로필 이미지 프로필기본이미지 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 공통 채팅시작버튼 thm_chat_start_n.png thm_chat_start_p.png 100 * 100 / PNG 130 * 130 / PNG XHDPI 권장 닫기버튼 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 친구찾기버튼영역 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_plusfriend_n.png thm_btn_plusfriend_p.png 63 * 51 / PNG 친구추가버튼 thm_btn_add_friend_n.png thm_btn_add_friend_p.png 280 * 65 / PNG 친구추가버튼 + 아이콘 thm_btn_add_friend_plus_n.png thm_btn_add_friend_plus_p.png 28 * 28 / PNG
더보기탭 공통더보기전체배경이미지 thm_setting_bg.9.png 480 * 670 / PNG 내프로필영역새소식아이콘 thm_more_function_item_notification_icon 그리드메뉴배경컬러 colors.xml > more_function_item_background colors.xml > more_function_item_selected_background 60 * 60 / PNG 80 * 80 / PNG (XHDPI 권장 ) 5.7.0 버전이상 그리드메뉴구분선컬러메뉴텍스트컬러아이템스토어아이콘선물하기아이콘플러스친구아이콘 thm_more_function_item_grid_line_color thm_more_function_item_font_color thm_more_function_item_itemstore_icon thm_more_function_item_giftshop_icon thm_more_function_item_plusfriend_icon 그리드메뉴영역 게임아이콘 thm_more_function_item_gamecenter_icon. 핫딜아이콘충전소아이콘주문생산아이콘 thm_more_function_item_hotdeal_icon. thm_more_function_item_reward_icon thm_more_function_item_makers_icon 60 * 60 / PNG 80 * 80 / PNG (XHDPI 권장 ) 5.1.0 버전이상 5.3.0 버전이상 5.4.0 버전이상 헤어샵예약아이콘 thm_more_function_item_hairshop_icon 5.7.0 버전이상 장보기아이콘 thm_more_function_item_mart_icon 신규 (6.0.0 버전이상 )
더보기탭 카카오계정아이콘 ( 글로벌 ) thm_more_function_item_account_icon 그리드메뉴영역 테마아이콘 ( 글로벌 ) 바게인아이콘 (only 일본 ) thm_more_function_item_theme_icon thm_more_function_item_bargain_icon 60 * 60 / PNG 80 * 80 / PNG (XHDPI 권장 ) 글로벌메뉴는필수사항은아님
공유, 전달시대화상대선택 탭텍스트 활성화 비활성화 thm_broadcast_picker_tab_font_color_selected hm_broadcast_picker_tab_font_color_normal 더보기탭 > 새소식 공통안읽은새소식배경컬러 thm_notification_list_unread_item_bg color selector
알림팝업 공통팝업배경이미지 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_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 : 아래권한부여가있어야만테마를사용할수있습니다 --> <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>
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 하여내폰에설치할수있습니다. 카카오톡테마는설치시에어떠한권한도요청하지않으므로, 만약권한을부여해야한다는메시지가나오면 제작한테마에문제가없는지다시한번확인해봐야합니다. 설치가성공적으로끝나게되면카카오톡의더보기탭 > 설정 > 테마설정메뉴에서설치한테마를확인하실수있으며, < 적용하기 > 버튼을누르면바로테마가적용되게됩니다.