In android10 or above, when the dark mode of the APP is inconsistent with the dark mode of the system, the background rendering of TabLayout is incorrect.

[a1782680475]

Description: Full description of issue here In my app, you can forcibly specify whether the app uses dark mode. However, in Android 10 and above, when the system uses a light color theme, but the app forcibly specifies a dark color theme, TabLayout will display an abnormal background color rendering. Expected behavior: Screenshots and/or description of expected behavior

Android API version: Android API version here 33 Material Library version: Material Android Library version you are using here (e.g., 1.1.0-alpha07) 1.8.0-alpha01

[hunterstich]

Hi @a1782680475,

Can you attach a sample that reproduces the issue? Can you also paste your theme, styles, and layout?

[a1782680475]

Hi @a1782680475,

Can you attach a sample that reproduces the issue? Can you also paste your theme, styles, and layout? There are a lot of codes. I will only show the core code. The first piece of code is the layout xml. I will check the dark mode settings when the application starts, specifically the second piece of code. A bug occurs when the system dark color mode is light, but the APP is forced to specify dark color. layout： <LinearLayout android:id="@+id/main_panel" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <com.google.android.material.tabs.TabLayout android:id="@+id/tab" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintTop_toTopOf="parent" style="@style/Widget.Material3.TabLayout" app:tabMode="fixed"> <com.google.android.material.tabs.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="班次学习" /> <com.google.android.material.tabs.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="个人学习" /> </com.google.android.material.tabs.TabLayout> <androidx.viewpager2.widget.ViewPager2 android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"></androidx.viewpager2.widget.ViewPager2> </LinearLayout> DarkModelUtils: object DarkModelUtils { fun check(context: Context): Boolean { var isDark = false if (!DarkModel.autoRuleEnable) { isDark = DarkModel.model if(isDark){ AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES) }else{ AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO) } } else { when (DarkModel.autoRule) { 0 -> { AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM) isDark = context.resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK == Configuration.UI_MODE_NIGHT_YES DarkModel.model = isDark } 1 -> { val now = System.currentTimeMillis() val sdfOne = SimpleDateFormat("yyyy-MM-dd") val minutes: Long = (now - sdfOne.parse(sdfOne.format(now)).time) / 60000 //深色模式不跨天 if (DarkModel.darkEndTime >= DarkModel.darkStartTime) { if (minutes >= DarkModel.darkStartTime && minutes < DarkModel.darkEndTime) { DarkModel.model = true isDark = true } else { DarkModel.model = false isDark = false } } else { if (minutes >= DarkModel.darkStartTime || minutes < DarkModel.darkEndTime) { DarkModel.model = true isDark = true } else { DarkModel.model = false isDark = false } } } } if(DarkModel.autoRule!=0) { if (isDark) { AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES) } else { AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO) } } } return isDark } }

[hunterstich]

Can you format this?

I really feel a sample that reproduces the issue will be the most helpful in this case since the problem could be anywhere in your themes/styles/layouts/utils and it's difficult for us to debug without something we can actually look through and work with.

Thanks!

[a1782680475]

I made this project public in github: https://github.com/a1782680475/Ixueto.

The app doesn't have English. Please contact me if you have any problems. Thank you very much.

[drchen]

Hi can you provide the link to the problematic source code and XML files? (The repo has a lot of files and it's hard to locate the relevant files.)

[a1782680475]

Hi can you provide the link to the problematic source code and XML files? (The repo has a lot of files and it's hard to locate the relevant files.)

the xml link：https://github.com/a1782680475/Ixueto/blob/main/app/src/main/res/layout/fragment_study.xml

[wax911]

Had a brief look and upon theme change, do you have a custom theme style for @style/Widget.Material3.TabLayout which is being used by your TabLayout?

[a1782680475]

Had a brief look and upon theme change, do you have a custom theme style for @style/Widget.Material3.TabLayout which is being used by your TabLayout? No, I haven't customized TabLayout. The code base is here, you can check it： https://github.com/a1782680475/Ixueto