In order to fulfill the basic functions of our service, the user hereby agrees to allow Xiaomi to collect, process and use personal information which shall include but not be limited to written threads, pictures, comments, replies in the Mi Community, and relevant data types listed in Xiaomi's Private Policy. By selecting "Agree", you agree to Xiaomi's Private Policy and Content Policy .
Agree

Themes

[Theme tutorials] Make Themes for MIUI 10: Theme Compatibility & Adaptation for MIUI 10

2018-10-05 19:10:22
28011 57
Dear Designers!
Amazing MIUI10 has been launched, along with the system update, there are so many changes on the design level. Here's the official tutorial for all Theme Designers out there who want to update their Themes for MIUI V10, as Themes designed for MIUI V9 will have compatibility issues on MIUI 10.

Ⅰ. Some components on the old version of theme are blocked.
Components that have been changed a lot are blocked by the theme.
Blocked components:
  • framework-res (Applied for all apps on plain Android
  • com.android.systemui (Notification shade/status bar),
  • com.miui.securitycenter,
  • com.android.settings,
  • com.android.deskclock, etc. (Third party apps)

For example: If you’re using MIUI 10, while the theme version is V9, then the notification shade, status bar, settings, clock, and other components won’t be available in the theme.

If you want to make these components fully effective, you need to upload the V10 version of the theme separately. The uploading platform for MIUI 10 is live on designer.xiaomi.com

Ⅱ. Bottom action buttons
Due to the visual effects and size changes of the bottom action buttons, the newly added action buttons, incompatible components in MIUI 9 and MIUI 10 need to be made and adapted individually.
  • New action buttons for MIUI 10: 6cc91715a2.zip (15.52 KB, Downloads: 711)
  • Standard action buttons for MIUI 10: 1085fe4ebf.zip (212.4 KB, Downloads: 468)
Example:
If you want to keep the original action button effect in MIUI 10, add "New action buttons for MIUI 10" to the theme package V9, then update the theme.

Ⅲ. Contacts component com.android.contacts
1. Top action bar uses the component action_bar_bg_light.9.png resource for all apps
  • Search: edit_text_search.png (Magnifying glass)
  • search_mode_edit_text_bg_light.9.png (Search box)
  • edit_text_search_bg_color_light (Color value – search box background)
  • search_mode_bg_radius (Search box background fillet size value –6.67dp by default)

(As shown below)
2. New contacts interface - use global components in top action bar
  • action_mode_bg_light.9.png resource

(As shown below)
3. Top pop-up window immersion
  • immersion_window_bg_light.9.png (Background)
  • immersion_menu_background_radius (Size value – fillet)
  • divider_line_light (Color value – dividing line)
  • list_item_bg_color_pressed_light (Color value – list status when the button is pressed down)

(As shown below)
Ⅳ.  SMS component com.android.mms
  • Adjusted the layout structure of the input box at the bottom of the SMS dialog interface.
  • A distance between the “Send” icon and the screen bottom (Size value):
  • padding_bottom_send_button_group (If it’s unnecessary, set the value as 0)

(As shown below)
Ⅴ. Component for all apps: framework-miui-res
View the adaptation of components for all apps in theme editor V10.

  • This component can be used on MIUI 10 normally without adaptation again. While the newly added styles or icons should be designed and replaced separately.
  • Pay special attention to: Turn on/off buttons
  • Related color value: sliding_btn_bar_off_light.png
  • sliding_btn_bar_on_light.png
  • accent_color_light (Color displayed when the button is selected). It applies to multiple positions: SlidingButton, FAB, CheckBox, etc.
(As shown below)

Ⅵ. Clock on Homepage: clock_2x4, clock_3x4
  • Due to the different screen sizes of different models, the Home clock plug-in should use relative coordinates (not absolute coordinates) as much as possible to avoid incomplete clock display. (Image below shows the clock size and position comparison of 4 models)

Ⅶ. Notification shade/Status bar component com.android.systemui
  • This component has been adjusted greatly and is in the beta testing phase now, this component is not suggested to be made currently.
  • Adaptation method will be posted in the theme editor V10, and also be continually updated in this article.
  • What’s more, the theme editor for MIUI 10 will be released soon, and the MIUI10 theme beta testing has already started. At present, only theme V9 can is compatible with and adaptable to MIUI 10.

Note:
If you find it very difficult in the start, you can always choose these modules to work on which do not have any change in MIUI 9 or MIUI 10 :
  • Lock screen
  • Home screen
  • Icons
  • Wallpapers


Download Theme Editor Tool for MIUI 10


Besides the things mentioned in this article, if you have any other questions, add your comments below, we will reply and fix the issues ASAP.


Rate

Number of participants 3 Experience +31 Pack Reason

View Rating Log

2018-10-05 19:10:22
Favorites31 RateRate

Wizard Bunny

MH Imran | from Redmi Note 4

#1

Thanks for sharing.. Bro
2018-10-05 20:14:53

Grand Master Bunny

Mahmud Af Nahin | from Redmi Note 5

#2

thanks for sharing
2018-10-05 20:15:50
Awesome and useful theme tutorial for us. Thanks for sharing this nice thread with us.
2018-10-05 22:58:00
Shah Md. Sultan
Super Moderator, Mi Community Bangladesh

Read my special thread

Master Bunny

NJ shanto | from Redmi S2

#4

tnx for sharing
2018-10-06 00:18:03

Grand Master Bunny

$huvo | from Redmi 4

#5

Thanks for the tutorial
2018-10-06 05:23:36

Super moderator

rayhanh | from Redmi Note 4X

#6

i'll must try,thanks for the info.
2018-10-06 17:39:36
Rayhan Hasan
Super Moderator, Mi Community Bangladesh.

Master Bunny

Rana 2 | from Redmi Note 5

#7

Thanks for sharing
2018-10-06 17:48:02

Master Bunny

Akram Rahim | from Redmi Note 5

#8

thanks for sharing
2018-10-06 17:54:51
Mi Big Fan

Moderator

Mainul Hasan Rohan | from Redmi Note 5

#9

Great! thanks for sharing
2018-10-06 18:14:17
Moderator, Mi Community Bangladesh

I ❤️ Mi
Thanks for sharing
2018-10-06 22:34:37
Regards,
Abdullah Al Akib
Device Moderator, Mi Community Bangladesh

Facebook | Telegram
Use the Reply button to notify
please sign in to reply.
Sign In Sign Up

mnnahid

Admin

MIUI 8
3 Days Check-In
7 Days Check-In
21 Days Check-In
40 Days Check-In
70 Days Check-In
100 Days Check-In
1 Year Check-In
2018 New Year Medal
MIUI 10
Newbie Member
Eid Mubarak
MIUI 10
10K Members Celebration
2019
Throw Back with Mi 2018
20K Registered Users
Mi Community App Review
9th Birthday of Xiaomi
Redmi Note 7
বাংলা নববর্ষ
Suited and Booted
30K Members
Limited Edition Space Medal
Challenge Photographer
Android Q
Mother's Day
40K Registered Users
Eid Mubarak
Tech Talent
50K Users
MIUI Geek
Fortune 500
Redmi 7A
60K Registered Users
Eid Al-Adha Mubarak
9YearsWithMIUI
70K
Mi A3
MIUI Weekly Poll
80K
90K Registered Users
100K
DXO121
2020 Medal
2020
আন্তর্জাতিক মাতৃভাষা দিবস
HAPPY WOMEN'S DAY
All-Star Battle
150K Registered Users
10th Anniversary of Xiaomi
বাংলা নববর্ষ ১৪২৭
Redmi 8
Ramadan Kareem
Eid Mubarak
30 Million Redmi Note 8 Series
200K Registered Users
2nd Anniversary
Mi Challenge

Read moreGet new

Mi Comm APP

Stay updated on Mi Products and MIUI

Copyright©2010-2020 Xiaomi.com, All Rights Reserved
Quick Reply To Top Return to the list