@N3ll - do you think this will make it in the 1.5 release? If not, what is the native code to setBackgroundColor for the tabview? I'm a web dev and I have no idea how to figure out the abstraction to do this as someone pointed out it was possible via the native options on another the forums related to this.

This is pretty important for us as well... we can't match the app to the designers mockup, so we can't complete it to deploy at all.

All app samples on NativeScript shows how to change navigation style, but only on iOS.

Until there is an API or support for CSS to apply to the tabs, you can create a styles.xml file in your App_Resources/Android/values folder with the following and it should at least change the background of your TabView.

        <!--If you are using revision 22.1 please use just windowNoTitle. Without android:-->
<item name="windowNoTitle">true</item>
<!--We will be using the toolbar so no need to show ActionBar-->
<item name="windowActionBar">false</item>
<!-- Set theme colors from http://www.google.com/design/spec/style/color.html#color-color-palette-->
<!-- colorPrimary is used for the default action bar background -->
<item name="colorPrimary">@color/primaryColor</item>
<!-- colorPrimaryDark is used for the status bar -->
<item name="colorPrimaryDark">@color/primaryColorDark</item>
<!-- colorAccent is used as the default value for colorControlActivated
     which is used to tint widgets -->
<item name="colorAccent">@color/accentColor</item>
<!-- You can also set colorControlNormal, colorControlActivated
     colorControlHighlight and colorSwitchThumbNormal. -->


<item name="actionBarTabStyle">@color/primaryColor</item>
<item name="actionBarTabBarStyle">@color/primaryColor</item>

Also make sure you have those colors defined in a colors.xml file in the same folder. It's working for my app, I can't get the ActionBar to style but the TabView should work. Maybe someone more familiar with Android styling can help out.

@N3ll These things are just so key right now...can you guys maybe throw us a bone and do like a 1.4.4 or 1.4.5 that exposes\fixes actionbar\tab styling?

@sitefinitysteve @calebeaires
Styling the ActionBar and TabBar colors is something we are currently working on for the 1.5 milestone. Currently - you should be able to set only the background-color of the action bar for Android.

That said you can set some of the colors by accessing the native Android views and working on them directly. Check out this gist to see how to do that.

Hope that helps for now.

After the #999 PR here are the styling options:
ActionBar

• color (CSS) - the title font color.
• background-color (CSS) - background color of the ActionBar/NavigationBar.

TabView

• color (CSS) - the text color used for the tab items and the content(as color is inherited).
• background-color(CSS) - background color of the content of the TavView.
• tabsBackgroundColor (property of the TabView) - background color of the tab items.
• selectedColor (property of the TabView) - accent color for the selected tab-item. This is the text color in iOS and the color of the selection indicator in Android.

Amazing!

Yes :)

What @calebeaires said. :) can't wait to try this.

Can't wait for 1.5 now!

Thanks for that snippet.

Also how do you change the color of the ellipses when you have these:

<ActionBar.actionItems>
        <ActionItem text="Edit Room" android.position="popup" />
        <ActionItem text="Add Device" android.position="popup" />
        <ActionItem text="Add Room" android.position="popup" />
        <ActionItem text="Log Out" tap="logOut" android.position="popup" />
</ActionBar.actionItems>

@rclai
You can change the color of the action items by modifying the styles.xml file with the android themes (located at [project]\App_Resource\Android\values).
I have updated the gist to include that.

Thanks @vakrilov.

Is it possible to change the background color per tab?

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.