Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-28493] Custom Theme on SDK 10 fails with Titanium.UI.Android.TABS_STYLE_BOTTOM_NAVIGATION on tabs

GitHub Issuen/a
TypeBug
PriorityCritical
StatusClosed
ResolutionNot Our Bug
Resolution Date2021-06-23T18:12:36.000+0000
Affected Version/sRelease 10.0.0
Fix Version/sn/a
ComponentsAndroid
Labelsn/a
ReporterRay Belisle
AssigneeJoshua Quick
Created2021-06-10T17:08:44.000+0000
Updated2021-06-23T18:12:36.000+0000

Description

When creating a custom theme in SDK10 using a material theme as the parent, create a tab group and set the style to Titanium.UI.Android.TABS_STYLE_BOTTOM_NAVIGATION. If you set the following property in the style XML file: When you load the app, it will fail referencing issues with *APPCOMPAT* so I believe that the bottom navigation configuration is still referencing the old theme structure instead of the new one.

Comments

  1. Gary Mathews 2021-06-18

    master: https://github.com/appcelerator/titanium_mobile/pull/12908
  2. Joshua Quick 2021-06-23

    [~raybelisle], this is not a Titanium bug. It's a limitation in Google's material components/widgets which Titanium switch to as of Titanium 10.0.0. Please see the following issue report submitted to Google below since it's the exact same issue you're facing. https://github.com/material-components/material-components-android/issues/226 Basically, Google's bottom tabs widget does *NOT* accept raw color values for the "textColorSecondary" style. Instead, you must assign it a color constant. For example, use an \@android:color/* constant as shown below... 
       <resources>
   	<style name="Theme.testTheme" parent="@style/Theme.Titanium.Light">
   		<item name="android:textColorSecondary">@android:color/black</item>
   	</style>
   </resources>
    Alternatively, set up your own color constant like this... 
       <resources>
   	<color name="mySecondaryColor">#000000</color>
   	<style name="Theme.testTheme" parent="@style/Theme.Titanium.Light">
   		<item name="android:textColorSecondary">@color/mySecondaryColor</item>
   	</style>
   </resources>
    That said, the top and bottom "material" tabs ignore the "textColorSecondary" primary style. They use the "colorPrimary" and "colorOnSurface" styles instead for the text/icon colors. Please see the "Tab item text label attributes" section in the link below where Google fully documents all styles used. https://material.io/components/tabs/android#scrollable-tabs
  3. Ray Belisle 2021-06-23

    @Joshua Quick, that was great. Thanks for the information! All working now!

JSON Source