fix: return default tab background color when the background color is not explicitely set through css (#8240)

* fix: return default tab background color

when the background color is not explicitely set through css

* chore: update NativeScript.api.md

* fix: do not cast return getTabBarBackgroundColor to ColorDrawable

* chore: added comment and method check

Co-authored-by: Alexander Vakrilov <alexander.vakrilov@gmail.com>

Author: vtrifonov

api-reports/NativeScript.api.md

@@ -2197,6 +2197,8 @@ export class TabContentItem extends ContentView {
 export class TabNavigationBase extends View {
     android: any /* android.view.View */;
 
+    getTabBarBackgroundArgbColor(): any
+
     getTabBarBackgroundColor(): any
 
     getTabBarColor(): any

nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts

@@ -578,9 +578,7 @@ export class BottomNavigation extends TabNavigationBase {
 
             // BACKGROUND-COLOR
             const backgroundColor = tabStripItem.style.backgroundColor;
-            if (backgroundColor) {
-                tabItemSpec.backgroundColor = backgroundColor.android;
-            }
+            tabItemSpec.backgroundColor = backgroundColor ? backgroundColor.android : this.getTabBarBackgroundArgbColor();
 
             // COLOR
             const color = titleLabel.style.color;

nativescript-core/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.d.ts

@@ -90,6 +90,12 @@ export class TabNavigationBase extends View {
      */
     getTabBarBackgroundColor(): any
 
+    /**
+     * @private
+     * Method is intended to be overridden by inheritors and used as "protected"
+     */
+    getTabBarBackgroundArgbColor(): any
+
     /**
      * @private
      * Method is intended to be overridden by inheritors and used as "protected"

nativescript-core/ui/tab-navigation-base/tab-navigation-base/tab-navigation-base.ts

@@ -113,6 +113,13 @@ export class TabNavigationBase extends View implements TabNavigationBaseDefiniti
         return null;
     }
 
+    public getTabBarBackgroundArgbColor(): any {
+        // This method is implemented only for Android
+        const colorDrawable = this.getTabBarBackgroundColor();
+
+        return colorDrawable && colorDrawable.getColor && colorDrawable.getColor();
+    }
+
     public setTabBarBackgroundColor(value: any): void {
         // overridden by inheritors
     }

nativescript-core/ui/tabs/tabs.android.ts

@@ -653,9 +653,7 @@ export class Tabs extends TabsBase {
 
             // BACKGROUND-COLOR
             const backgroundColor = tabStripItem.style.backgroundColor;
-            if (backgroundColor) {
-                tabItemSpec.backgroundColor = backgroundColor.android;
-            }
+            tabItemSpec.backgroundColor = backgroundColor ? backgroundColor.android : this.getTabBarBackgroundArgbColor();
 
             // COLOR
             const color = nestedLabel.style.color;