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 07:10:22
12927 24
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: 398)
  • Standard action buttons for MIUI 10: 1085fe4ebf.zip (212.4 KB, Downloads: 286)
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 2 Experience +30 Pack Reason

View Rating Log

2018-10-05 07:10:22
Favorites14 RateRate

Moderator

MH Imran | from Redmi Note 4

#1

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

Techie Team

Mahmud Af Nahin | from Redmi Note 5

#2

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

Master

NJ shanto | from Redmi S2

#4

tnx for sharing
2018-10-05 12:18:03

Device team

$huvo | from Redmi 4

#5

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

Super moderator

rayhan4200 | from Redmi Note 4X

#6

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

MIUI beta tester

Rana 2 | from Redmi Note 5

#7

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

Master

Akram Rahim | from Redmi Note 5

#8

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

Moderator

Mainul Hasan Rohan | from Redmi Note 5

#9

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

I ❤️ Mi
Thanks for sharing
2018-10-06 10:34:37
please sign in to reply.
Sign In Sign Up

mnnahid

Mi Bangladesh team

  • Followers

    1370

  • Threads

    166

  • Replies

    762

  • Points

    151816

MIUI 8
Aktywny 3 dni pod rząd
Aktywny 7 dni pod rząd
Aktywny 21 dni pod rząd
Aktywny 40 dni pod rząd
Aktywny 70 dni pod rząd
Aktywny 100 dni pod rząd
2018 New Year Medal
MIUI 10
Newbie Member
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

Read moreGet new
Copyright©2016-2019 Xiaomi.com, All Rights Reserved
Content Policy
Quick Reply To Top Return to the list