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-03 08:18:02
240339 276

Dear Designers!
Amazing MIUI10 has been launched, along with the system update there are so many changes on 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: V10 new small buttons (V9 size).zip (15.52 KB, Downloads: 7587)
  • Standard action buttons for MIUI 10: V10 standard small buttons.zip (212.4 KB, Downloads: 6062)

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.
2018-10-03 08:18:02
Favorites447 RateRate

Resource Team

Sujit Kumar Sinha | from Redmi Note 4

#1

Thanks for Sharing
2018-10-03 08:29:15

Pro Bunny

Mitesh Dandasena | from Redmi Note 5 Pro

#2

Waiting for compatible theme i for MIUI 10
2018-10-03 08:31:52
Waiting.....  Awesome !!
2018-10-03 08:33:37
Mi Fan - I ❤️ MI
Always Believe That Something Wonderful Is About To Happen.

Advanced Bunny

1642728766 | from Redmi 6 Pro

#4

any update for reddish 6pro
2018-10-03 08:35:06

Rookie Bunny

TARGEN SINGH | from Redmi Note 4

#5

nice info provided
2018-10-03 08:35:37

Grandmaster Bunny

Solver13 | from Redmi Note 4

#6

Wow! That's awesome!! :)
2018-10-03 08:35:42
Mitesh Dandasena
Waiting for compatible theme i for MIUI 10

yeah I'm waiting for miui10 for Poco F1
2018-10-03 08:43:45

Pro Bunny

bhaveshraval | from Mi A2

#8

Thanks for Sharing
2018-10-03 08:49:26

Semi Pro Bunny

vikendra nirmal | from Redmi Note 4

#9

thanks for sharing
2018-10-03 09:03:28

App Review Team

Surya Prakash Gautam | from Redmi Note 4

#10

amazing and nice
2018-10-03 09:06:57
please sign in to reply.
Sign In Sign Up

R0user

Admin

Beta Tester
MIUI 8
Power At Last
AP2 Livestream
2016 Diwali with Mi
3 Days Check-In
7 Days Check-In
21 Days Check-In
40 Days Check-In
70 Days Check-In
100 Days Check-In
Shake!!Shake!!
Lucky Draw No.
500K Members
2016 Christmas
Mi Explorers
2016 #ThrowbackwithMiComm
1 million members
Xiaomi 7th Birthday
Fitness Guru
June-100 replies in a month
Тема мая 2017
1st Anniversary
Columnist
71st Independence Day
MIUI 9
MIUI 7th Anniversary
2 million registered members
Mi A1 Review Contest
Newbie Member
Diwali
Twitter Medal
Android O Tester
Mi Apps
Christmas 2017
2018 New Year Medal
ThrowBackWithMiCommunity
MIUI Instagram
MIUI Beta Tester
Mi Community Updater
STAR Bug Hunter
5-Star Motivator
MIUI 10
MIUI Subscriber
MIUI 8th Anniversary
5 Million Registered Users
Mi Music: 20 FREE Downloads
Ringtones Mania
App Review Team
10 Million Downloads
2019
Throwback With Mi 2018
Xiaomi's 9th Birthday
9 Years of MIUI

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