Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
ActionBar TabView colors - NS 1.4
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="AppThemeBase" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Set the text color used for ActionItems to white-->
<item name="actionMenuTextColor">#FFFFFF</item>
<!-- ... -->
</style>
<!-- ... -->
</resources>
var color = require("color");
var platform = require("platform");
function pageLoaded(args) {
var page = args.object;
if (platform.device.os === platform.platformNames.android) {
// ------ ActionBar --------
// Set ActionBar background color - done in XML/CSS
// Set ActionBar title color
var actionBarTextColor = new color.Color("white");
page.actionBar._nativeView.setTitleTextColor(actionBarTextColor.android);
// ------ TabView --------
var tabView = page.getViewById("tabView");
var tabContainer = tabView._tabLayout;
// Set TabView background
var bgColor = new color.Color("blue");
tabContainer.setBackgroundColor(bgColor.android);
// Set TabView selected-indicator color
var selectedIndicatorColor = new color.Color("yellow");
tabContainer.setSelectedIndicatorColors([selectedIndicatorColor.android]);
// Set title color of TabView items - currently no easy way to do it.
}
}
exports.pageLoaded = pageLoaded;
<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded">
<Page.actionBar>
<ActionBar title="My Title" style="background-color:blue; color:white">
</ActionBar>
</Page.actionBar>
<TabView id="tabView">
<TabView.items>
<TabViewItem title="First">
<TabViewItem.view>
<Label text="First Tab" />
</TabViewItem.view>
</TabViewItem>
<TabViewItem title="Second">
<TabViewItem.view>
<Label text="Second Tab" />
</TabViewItem.view>
</TabViewItem>
</TabView.items>
</TabView>
</Page>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment