Xiaomi MIUI Theme Guide online

[MarkHUK]

Hi all,

In keeping with bringing you all the latest news from China here's a new one for you...

MIUI China are working on making theme support work better than in Gingerbread. They have just put up a site to help guide people through the core components of making themes.

You can take a look at their guide here: http://www.miui.com/themeguider.html

Preview image of theme guide web site:

Thanks to Xiaomi / MIUI for bringing in more support for themes!

Mark

 

[MarkHUK]

Pele will be providing other information in the coming days as to what / where / when.

For now we hope you enjoy the guide above

 

[Infinitely]

Awesome

 

[Bestonius]

Nice, would be awesome if it were in English

 

[XCellFoneSalesRep]

Mark,
The following is new theme stuffs for MIUIv4 and MIUIv4 to MIUI GB theme updating i found on MIUI China yesterday morning. After this post, i will be posting (2) tools that were just updated as well from MIUI China forums, Just in case :

Thread Link : http://www.miui.com/thread-578045-1-1.html
The MIUI the V4 Theme tutorial is long overdue, everyone waiting!

Only the default 4.0 theme is available as if the beginning of time world
some of the brave who try to bring them to explore V4 theme
let us pay tribute to the exploration pioneers!

Today the the MIUI official V4 Theme tutorial ready to go
I will lead everyone into the tour of the production of the V4 theme is
"follow us turned MIUI the V4 theme of people!
v4 theme sample (beta): TF3, car mtz(11.15 MB)

-------- The following is the theme from 2.3 migration needs to be done to v4! ! ! (continuously updated) -------

联系人（contacts）：
1. drawable-hdpi-finger与drawable-hdpi合并，名为drawable-hdpi
2. 新增 账户选择下拉菜单的背景 account_filter_list_background.9.png
3. 新增 返回按钮 action_bar_home_n.png、action_bar_home_p.png
4. 新增 联系人收藏按钮 btn_star_off_normal_holo_dark.png、btn_star_on_norm al_holo_dark.png
5. 新增 联系人详情标题背景 contact_detail_action_bar_bg.9.png
6. 修改 dialer_background.png，键盘高度增加22像素，键盘上侧增加7像素空白（如果需要键 盘顶部阴影，把它做在空白处），并编辑为 dialer_background.9.png
7. 修改 dialer_bottom.png，右侧增加10像素的空白
8. 修改 dialer_btn_call_normal.9.png，宽度减小60像素，并保存为 dialer_btn_call_normal.png
9. 修改 dialer_btn_call_pressed.9.png，宽度减小60像素，并保存为 dialer_btn_call_pressed.png
10. 修改 宽度增加30像素：
dialer_btn_delete_normal.png
dialer_btn_delete_pressed.png
dialer_btn_goto_contact_normal.png
dialer_btn_goto_contact_pressed.png
11. 修改 dialer_btn_open_dialer_normal.9.png、dialer_btn_ope n_dialer_pressed.9.png，按钮宽度减小25像素后，按钮左侧保留20像素的空白，画 布宽度减小5像素
12. 修改 dialer_buttons.png，去掉阴影，并编辑为 dialer_buttons.9.png
13. 新增 拨号数字背景 dialer_digits_background.9.png
14. 新增 联系人头像 ic_contact_picture_holo_light.png、sim_contact_phot o.png
15. 新增 底部图标：
ic_menu_accounts_holo_light.png
ic_menu_add_contact_holo_light.png
ic_menu_add_contact.png
ic_menu_add_favorite.png
ic_menu_add_field_holo_light.png
ic_menu_add_group.png
ic_menu_cancel_holo_dark.png
ic_menu_compose_holo_dark.png
ic_menu_contacts_holo_light.png
ic_menu_dialpad.png
ic_menu_display_all_holo_light.png
ic_menu_done_holo_dark.png
ic_menu_edit.png
ic_menu_group_add_members.png
ic_menu_import_export_holo_light.png
ic_menu_mark.png
ic_menu_merge_holo_light.png
ic_menu_moreoverflow_normal.png
ic_menu_ringtone_group.png
ic_menu_search.png
ic_menu_send_sms.png
ic_menu_send_to_desktop.png
ic_menu_settings_holo_light.png
ic_menu_share_holo_light.png
ic_menu_sms_group.png
ic_menu_split_holo_light.png
ic_menu_star_holo_light.png
ic_menu_trash_holo_light.png
16. 新增 列表项激活指示 list_item_check_indicator.png、list_item_nocheck_in dicator.png
17. 新增 列表分隔符 list_section_divider_holo_custom.9.png、list_sectio n_divider_holo_light.9.png

时钟(desktop clock):
first 新增顶栏ab_solid_light_holo.9.png
the second 新增底栏bottom_bar_bg_normal.9.png, bottom_bar_bg_pressed.9.png
the third 新增列表
新增列表视图背景listview_bg.9.png

信息（mms）：
1. 新增 添加收件人按钮 add_recipients_normal.png、add_recipients_pressed.p ng
2. 新增 返回按钮 home_button_n.png、home_button_p.png
3. 新增 信息附件图标：
ic_attach_contact_d.png
ic_attach_contact_n.png
ic_attach_festival_sms_d.png
ic_attach_festival_sms_n.png
ic_attach_nickname_d.png
ic_attach_nickname_n.png
ic_attach_photo_d.png
ic_attach_photo_n.png
ic_attach_phrase_d.png
ic_attach_phrase_n.png
ic_attach_record_sound_d.png
ic_attach_record_sound_n.png
ic_attach_record_video_d.png
ic_attach_record_video_n.png
ic_attach_slide_show_d.png
ic_attach_slide_show_n.png
ic_attach_smiley_d.png
ic_attach_smiley_n.png
ic_attach_sound_d.png
ic_attach_sound_n.png
ic_attach_subject_d.png
ic_attach_subject_n.png
ic_attach_subject.png
ic_attach_take_photo_d.png
ic_attach_take_photo_n.png
ic_attach_timing_d.png
ic_attach_timing_n.png
ic_attach_timing.png
ic_attach_video_d.png
ic_attach_video_n.png
4. 新增 底部图标：
ic_menu_add_slide.png
ic_menu_add_sound.png
ic_menu_close_clear_cancel.png
ic_menu_copy_holo_dark.png
ic_menu_delete_played.png
ic_menu_delete.png
ic_menu_duration.png
ic_menu_edit.png
ic_menu_emoticons.png
ic_menu_forward_holo_dark.png
ic_menu_info_holo_dark.png
ic_menu_lock_holo_dark.png
ic_menu_move_down.png
ic_menu_move_up.png
ic_menu_movie.png
ic_menu_msg_compose_holo_dark.png
ic_menu_picture.png
ic_menu_remove_picture.png
ic_menu_remove_sound.png
ic_menu_remove_text.png
ic_menu_remove_video.png
ic_menu_search_holo_dark.png
ic_menu_trash_holo_dark.png
ic_menu_unlock_holo_dark.png
5. 新增 信息泡泡：
message_bubble_out_alert_bg_n.9.png
message_bubble_out_alert_gp_bg_n.9.png
message_bubble_out_gp_bg_n.9.png
message_bubble_out_gp_bg_p.9.png
6. 新增 信息底部编辑面板 message_edit_bottom_panel.9.png

流量监控（monitor）：
1. 新增 列表 network_list_selector_n.9.png、network_list_selecto r_p.9.png
2. 新增 列表 traffic_list_selector_n.9.png、traffic_list_selecto r_p.9.png

通知栏（systemui）：
1. 新增 通知清楚按钮 ic_notify_clear_normal.png、ic_notify_clear_pressed .png
2. 新增 通知标题背景 notification_header_bg.9.png
3. 新增 状态栏背景：
status_bar_background_alternative.9.png
status_bar_background_fullscreen.9.png
status_bar_background_keyguard.9.png
status_bar_background_transparent.9.png
status_bar_background.9.png
4. 新增 通知栏背景 tracking_view_list_style_bg.png、tracking_view_page _style_bg.png

 

[XCellFoneSalesRep]

Part 2 :

新增的MIUI全局（framework-miui-res）：
1. 在主题根目录新建文件夹 framework-miui-res，在 framework-miui-res 中新建文件夹 res，在 res 中新建文件夹 drawable-hdpi、drawable-xhdpi、drawable-zh-hdpi
2. 在 framework-miui-res 中新建 theme_values.xml，其中的MIUI全局文字颜色配置信息为：
<?xml version="1.0" encoding="utf-8" ?> <MIUI_Theme_Values> <!-- 标签文字颜色 --> <color name="primary_tab_text_color">#ffffffff</color> <color name="primary_tab_text_pressed_color">#ff8fb2bf</color> <color name="primary_tab_text_selected_color">#ff8fb2bf</color> <!-- 次要标签文字颜色 --> <color name="secondary_tab_text_color">#ffffffff</color> <color name="secondary_tab_text_pressed_color">#ff8fb2bf</color> <color name="secondary_tab_text_selected_color">#ff8fb2bf </color> <!-- 字母索引文字颜色 --> <color name="alphabet_indexer_overlay_text_color">#ffffff ff</color> <color name="alphabet_indexer_text_color">#ffffffff</color> <color name="alphabet_indexer_highlight_text_color">#ff8f b2bf</color> <!-- MIUI全局首要文字颜色 --> <color name="primary_text_holo_dark">#ffffffff</color> <color name="primary_text_holo_light">#ffffffff</color> <color name="primary_text_color_inverse">#80ffffff</color> <color name="primary_text_color_shadow">#ff000000</color> <!-- MIUI全局次要文字颜色 --> <color name="secondary_text_holo_dark">#ff8fb2bf</color> <color name="secondary_text_holo_light">#ff8fb2bf</color> <color name="secondary_text_color_inverse">#808fb2bf</color> <color name="secondary_text_color_shadow">#ff000000</color></MIUI_Theme_Values>
3. 在 drawable-zh-hdpi 中 新建 滑动按钮：
sliding_btn_bar.png
sliding_btn_off_disable.png
sliding_btn_on_disable.png
4. 在 drawable-xhdpi 中 新建 下拉按钮、扩展开关、列表项目详细箭头：
dropdown_normal_holo_light.9.png
dropdown_pressed_holo_light.9.png
expander_close_holo_light.9.png
expander_open_holo_light.9.png
list_item_detail_arrow_normal.png
list_item_detail_arrow_pressed.png
5. 在 drawable-hdpi 中 新建：
返回按钮 ab_home_up.png
顶栏 ab_solid_light_holo.9.png
字母索引背景 alphabet_indexer_overlay.png
底部按钮 bottom_button_bar_normal.9.png
底部按钮 bottom_button_bar_pressed.9.png
底部左侧按钮 bottom_button_left_normal.9.png
底部左侧按钮 bottom_button_left_pressed.9.png
底部中间按钮 bottom_button_middle_normal.9.png
底部中间按钮 bottom_button_middle_pressed.9.png
底部右侧按钮 bottom_button_right_normal.9.png
底部右侧按钮 bottom_button_right_pressed.9.png
按钮 btn_bar_normal.9.png
按钮 btn_bar_pressed.9.png
次要按钮 btn_bar_secondary_normal.9.png
底部按钮 btn_bottom_last_normal.9.png
底部按钮 btn_bottom_last_pressed.9.png
底部按钮 btn_bottom_normal.9.png
底部按钮 btn_bottom_pressed.9.png
联系人编辑按钮 btn_edit_contact_pressed.png
次要按钮 btn_secondary_normal.9.png
次要按钮 btn_secondary_pressed.9.png
顶部按钮 btn_title_pressed.9.png
联系人头像 contact_photo.png
自定义动作条 custom_action_bar_bg.9.png
自定义动作条 custom_action_button_p.9.png
详情背景 detail_background.9.png
下拉按钮 dropdown_normal_holo_light.9.png
下拉按钮 dropdown_pressed_holo_light.9.png
扩展开关 expander_close_holo_light.9.png
扩展开关 expander_open_holo_light.9.png
扩展列表标题 expandlistview_header_background_normal.9.png
扩展列表标题 expandlistview_header_background_pressed.9.png
全屏背景 full_screen_background.9.png
右箭头图标 ic_arrow_right_disable.png
右箭头图标 ic_arrow_right.png
闹铃图标 ic_audio_alarm_mute.png
闹铃图标 ic_audio_alarm.png
蓝牙图标 ic_audio_bt_mute.png
蓝牙图标 ic_audio_bt.png
信息图标 ic_audio_notification_mute.png
信息图标 ic_audio_notification.png
电话图标 ic_audio_phone.png
静音图标 ic_audio_ring_notif_mute.png
震动图标 ic_audio_ring_notif_vibrate.png
响铃图标 ic_audio_ring_notif.png
无声图标 ic_audio_vol_mute.png
有声图标 ic_audio_vol.png
联系人头像 ic_contact_group_picture.png
联系人头像 ic_contact_list_picture.png
联系人头像 ic_contact_picture.png
联系人头像 ic_contact_sp_picture.png
联系人头像 ic_contact_unknown_picture.png
ic_expanded_preference_first_normal.9.png
ic_expanded_preference_last_normal.9.png
ic_expanded_preference_middle_normal.9.png
电源键弹窗图标 ic_lock_airplane_mode_off.png
电源键弹窗图标 ic_lock_airplane_mode.png
电源键弹窗图标 ic_lock_power_off.png
电源键弹窗图标 ic_lock_privacy_mode_off.png
电源键弹窗图标 ic_lock_privacy_mode.png
电源键弹窗图标 ic_lock_reboot.png
菜单栏图标 ic_menu_cancel.png
菜单栏图标 ic_menu_done.png
菜单栏图标 ic_menu_firewall.png
菜单栏图标 ic_menu_info_details.png
菜单栏图标 ic_menu_moreoverflow_normal_holo_light.png
菜单栏图标 ic_menu_share.png
菜单栏图标 ic_menu_trash_holo_light.png
列表背景 list_fold_background_pressed.9.png
列表头添加按钮 list_header_add_pressed.png
列表项目背景 list_item_background_activated.9.png
列表项目背景 list_item_background_focused.9.png
列表项目背景 list_item_background_pressed.9.png
列表项目背景 list_item_background_selected.9.png
列表项激活指示 list_item_check_indicator.png
列表项目详细箭头 list_item_detail_arrow_normal.png
列表项目详细箭头 list_item_detail_arrow_pressed.png
列表分隔符 list_item_with_title_background.9.png
大列表底部项目背景 list_large_bottom_item_background_checked.9.png
大列表底部项目背景 list_large_bottom_item_background_normal.9.png
大列表底部项目背景 list_large_bottom_item_background_pressed.9.png
大列表中部项目背景 list_large_middle_item_background_checked.9.png
大列表中部项目背景 list_large_middle_item_background_normal.9.png
大列表中部项目背景 list_large_middle_item_background_pressed.9.png
大列表单一项目背景 list_large_single_item_background_checked.9.png
大列表单一项目背景 list_large_single_item_background_normal.9.png
大列表单一项目背景 list_large_single_item_background_pressed.9.png
大列表顶部项目背景 list_large_top_item_background_checked.9.png
大列表顶部项目背景 list_large_top_item_background_normal.9.png
大列表顶部项目背景 list_large_top_item_background_pressed.9.png
中列表底部项目背景 list_medium_bottom_item_background_checked.9.png
中列表底部项目背景 list_medium_bottom_item_background_normal.9.png
中列表底部项目背景 list_medium_bottom_item_background_pressed.9.png
中列表中部项目背景 list_medium_middle_item_background_checked.9.png
中列表中部项目背景 list_medium_middle_item_background_normal.9.png
中列表中部项目背景 list_medium_middle_item_background_pressed.9.png
中列表单一项目背景 list_medium_single_item_background_checked.9.png
中列表单一项目背景 list_medium_single_item_background_normal.9.png
中列表单一项目背景 list_medium_single_item_background_pressed.9.png
中列表顶部项目背景 list_medium_top_item_background_checked.9.png
中列表顶部项目背景 list_medium_top_item_background_normal.9.png
中列表顶部项目背景 list_medium_top_item_background_pressed.9.png
列表分隔符 list_seperator.9.png
菜单纵向分割线 menu_divider_vertical.9.png
全局弹框 popup_common.9.png
预览单帧 preview_frame.9.png
预览下一个 preview_next_d.png
预览下一个 preview_next_n.png
预览下一个 preview_next_p.png
预览上一个 preview_previous_d.png
预览上一个 preview_previous_n.png
预览上一个 preview_previous_p.png
进度条 progress_primary_seek.9.png
进度条 progress_secondary.9.png
资源组件图标 resource_component_n.png
资源组件图标 resource_component_p.png
资源删除图标 resource_delete_n.png
资源删除图标 resource_delete_p.png
资源详情图标 resource_detail_n.png
资源详情图标 resource_detail_p.png
资源详情标题背景 resource_detail_title_bg.9.png
resource_info_comment_bg_p.9.png
resource_info_rating_star_on.png
screen_view_seekpoint_highlight.png
二级按钮 secondary_button_normal.9.png
二级按钮 secondary_button_pressed.9.png
二级左侧标签 secondary_tab_left_normal.9.png
二级左侧标签 secondary_tab_left_pressed.9.png
二级中间标签 secondary_tab_middle_normal.9.png
二级中间标签 secondary_tab_middle_pressed.9.png
二级右侧标签 secondary_tab_right_normal.9.png
二级右侧标签 secondary_tab_right_pressed.9.png
二级标题背景 secondary_title_background.9.png
滑动按钮 sliding_btn_bar.png
滑动按钮 sliding_btn_frame.png
滑动按钮 sliding_btn_mask.png
滑动按钮 sliding_btn_off_disable.png
滑动按钮 sliding_btn_on_disable.png
滑动按钮 sliding_btn_slider_pressed.png
滑动按钮 sliding_btn_slider.png
已选左侧标签 tab_selected_holo_left.9.png
已选右侧标签 tab_selected_holo_right.9.png
已选中间标签 tab_selected_holo.9.png
已选左侧标签 tab_selected_pressed_holo_left.9.png
已选右侧标签 tab_selected_pressed_holo_right.9.png
已选中间标签 tab_selected_pressed_holo.9.png
未选左侧标签 tab_unselected_holo_left.9.png
未选右侧标签 tab_unselected_holo_right.9.png
未选中间标签 tab_unselected_holo.9.png
未选左侧标签 tab_unselected_pressed_holo_left.9.png
未选右侧标签 tab_unselected_pressed_holo_right.9.png
未选中间标签 tab_unselected_pressed_holo.9.png
文本视图列表背景 textview_list_bg.9.png
文本视图面板背景 textview_panel_bg.9.png
文本视图面板按钮背景 textview_panel_button_bg_pressed.9.png
顶栏 title.9.png

原生全局（framework-res）：
1. framework-res 中 theme_values.xml 的原生全局颜色配置信息为：
<?xml version="1.0" encoding="utf-8" ?>
<MIUI_Theme_Values>

<!-- V4 -->
<!-- 全局窗口背景颜色 -->
<drawable name="screen_background_holo_light">#ff000000</drawable>
<drawable name="screen_background_holo_dark">#ff000000</drawable>
<!-- 全局首要文字颜色 -->
<color name="bright_foreground_holo_dark">#ffffffff</color>
<color name="bright_foreground_holo_light">#ffffffff</color>
<color name="bright_foreground_disabled_holo_dark">#80fff fff</color>
<color name="bright_foreground_disabled_holo_light">#80ff ffff</color>
<!-- 全局次要文字颜色 -->
<color name="dim_foreground_holo_dark">#ff8fb2bf</color>
<color name="dim_foreground_disabled_holo_dark">#808fb2bf </color>
<color name="dim_foreground_inverse_holo_dark">#ff8fb2bf</color>
<color name="dim_foreground_inverse_disabled_holo_dark"># 808fb2bf</color>
<color name="dim_foreground_holo_light">#ff8fb2bf</color>
<color name="dim_foreground_disabled_holo_light">#808fb2b f</color>
<color name="dim_foreground_inverse_holo_light">#ff8fb2bf </color>
<color name="dim_foreground_inverse_disabled_holo_light"> #808fb2bf</color>
<!-- 列表分隔符文字颜色 -->
<color name="list_separator_foreground_holo_light">#fffff fff</color>
<!-- 弹窗标题文字颜色 -->
<color name="holo_blue_dark">#ffffffff</color>
<color name="holo_blue_light">#ffffffff</color>
<!-- 弹窗标题分割线颜色 -->
<color name="holo_orange_dark">#ff8fb2bf</color>
<color name="holo_orange_light">#ff8fb2bf</color>
<!-- 下拉菜单文字颜色 -->
<color name="bright_foreground_light">#ffffffff</color>
<color name="bright_foreground_light_disabled">#ffffffff</color>

<!-- 2.3 -->
<!-- 弹出对话框背景颜色 -->
<color name="dlg_bright_background_dark">#ff000000</color>
<!-- 弹出对话框首要文字颜色 -->
<color name="dlg_bright_foreground_dark">#ffffffff</color>
<color name="dlg_bright_foreground_dark_disabled">#80ffff ff</color>
<color name="dlg_bright_foreground_dark_inverse">#ff00000 0</color>
<!-- 弹出对话框次要文字颜色 -->
<color name="dlg_dim_foreground_dark">#ffbebebe</color>
<color name="dlg_dim_foreground_dark_disabled">#80bebebe</color>
<color name="dlg_dim_foreground_dark_inverse">#ff323232</color>
<color name="dlg_dim_foreground_dark_inverse_disabled">#8 0323232</color>
<!-- 按钮文字颜色/阴影颜色/阴影大小 -->
<color name="button_text_color">#ffffffff</color>
<color name="button_text_color_disabled">#33ffffff</color>
<color name="button_text_shadow">#00000000</color>
<integer name="button_text_shadow_dy">-1</integer>
<!-- 可扩展目录标题文字颜色 -->
<color name="expandlistview_header_text_color">#ffffffff</color>
<color name="expandlistview_header_shadow_color">#0000000 0</color>
<integer name="expandlistview_header_shadow_dy">-1</integer>
<!-- 标签高度 -->
<dimen name="tab_indicator_height">50dp</dimen>
<!-- 标签文字颜色 -->
<color name="tab_text_color">#ffffffff</color>
<color name="tab_text_pressed_color">#ff8fb2bf</color>
<!-- 次要标签文字颜色 -->
<color name="secondary_tab_text_color">#ffffffff</color>
<color name="secondary_tab_text_pressed_color">#ffffffff</color>
<!-- 状态栏首要文字颜色 -->
<color name="status_bar_event_title_normal">#ffffffff</color>
<color name="status_bar_event_title_inverse">#ff000000</color>
<!-- 状态栏次要文字颜色 -->
<color name="status_bar_event_content_normal">#66ffffff</color>
<color name="status_bar_event_content_inverse">#66000000</color>

</MIUI_Theme_Values>

 

[XCellFoneSalesRep]

Either someone from the Developement Team, or someone close to it, from MIUI China also provided these tools which require JDK 1.6.

MIUI Theme Editor : Download

Lockscreen Text Editor : Download

 

[moar]

Awesome XCellFoneSalesRep, thanks! Will they release that Theme Editor in English too?

 

[MarkHUK]

Nice work guys.... get this all written into English and we'll post it in the Theme forum... time we get a v4 theme forum open I think

 

[Marco Bokhorst]

Hi all,

In keeping with bringing you all the latest news from China here's a new one for you...

MIUI China are working on making theme support work better than in Gingerbread. They have just put up a site to help guide people through the core components of making themes.

You can take a look at their guide here: http://www.miui.com/themeguider.html

Preview image of theme guide web site:

Thanks to Xiaomi / MIUI for bringing in more support for themes!

Mark

Ok so I'm new on these parts of the web.
New to MIUI and new to the ongoing changes of Android.
I do however have an unlocked rooted One X currently running your MIUI 2.6.1 ROM and I love it.
I landed here as I am interested in creating themes.
Not entirely new to themes as is, I do graphics for a living, it's more the technical side I need to learn.

Long story short...your post looks promising, but I can't help wondering why your preview image is in English while the link when clicked goes to the same layout, but very much in Chinese.

Help me Obi Wan Markobi...you're my only hope...

 

[iBotPeaches]

We use Google Chrome, which auto translates the site into a very bad English. We are still working with Xiaomi to create a true English website.

 

[Marco Bokhorst]

Ahhh! ok thank you

 

[fodi]

can you tell xiaomi the site is off? it would be awsome by the way
it refers to a missing template (as per google translate)