Merge pull request #9 from bradmartin/master

Fix android translucent flags

Author: TheOriginalJosh

README.md

@@ -66,8 +66,9 @@ the `<Slides:SlideContainer>` element also has a property called `loop` which is
 
 the `<Slides:SlideContainer>` element also has a property called `interval` which is a integer value and the value is in milliseconds. The suggested use case would be for a Image Carousel or something of that nature which can change the image for every fixed intervals. In unloaded function call `page.getViewById("your_id").stopSlideshow()` to unregister it (your_id is the id given to `<Slides:SlideContainer>`), it can be restarted with `startSlidShow`.
 
-#### Android Optional Attribute
-- `AndroidTransparentStatusBar`: boolean - If true, the Android status  bar will be transparent on devices that support it. Typically this is API >=21 (Lollipop).
+#### Android Optional Attributes
+- `androidTranslucentStatusBar`: boolean - If true, the Android status bar will be translucent on devices that support it. (Android sdk >= 19).
+- `androidTranslucentNavBar`: boolean - If true, the Android navigation bar will be translucent on devices that support it. (Android sdk >= 19).
 
 ###Plugin Development Work Flow:
 

demo/package.json

@@ -1,24 +1,24 @@
 {
-	"nativescript": {
-		"id": "org.nativescript.demo",
-		"tns-android": {
-			"version": "2.0.0"
-		},
-		"tns-ios": {
-			"version": "2.0.0"
-		}
-	},
-	"dependencies": {
-		"nativescript-slides": "file:..",
-		"tns-core-modules": "2.0.0"
-	},
-	"devDependencies": {
-		"babel-traverse": "6.9.0",
-		"babel-types": "6.9.0",
-		"babylon": "6.8.0",
-		"filewalker": "0.1.2",
-		"lazy": "1.0.11",
-		"nativescript-dev-typescript": "^0.3.1",
-		"typescript": "^1.8.7"
-	}
-}
+  "nativescript": {
+    "id": "org.nativescript.demo",
+    "tns-android": {
+      "version": "2.0.0"
+    },
+    "tns-ios": {
+      "version": "2.0.0"
+    }
+  },
+  "dependencies": {
+    "nativescript-slides": "file:..",
+    "tns-core-modules": "^2.0.1"
+  },
+  "devDependencies": {
+    "babel-traverse": "6.9.0",
+    "babel-types": "6.9.0",
+    "babylon": "6.8.0",
+    "filewalker": "0.1.2",
+    "lazy": "1.0.11",
+    "nativescript-dev-typescript": "^0.3.1",
+    "typescript": "^1.8.7"
+  }
+}

nativescript-slides.d.ts

@@ -15,11 +15,13 @@ export declare class SlideContainer extends AbsoluteLayout {
     private _pageWidth;
     private _loop;
     private _interval;
-    private _AndroidTransparentStatusBar;
+    private _androidTranslucentStatusBar;
+    private _androidTranslucentNavBar;
     private timer_reference;
     interval: number;
     loop: boolean;
-    AndroidTransparentStatusBar: boolean;
+    androidTranslucentStatusBar: boolean;
+    androidTranslucentNavBar: boolean;
     pageWidth: number;
     android: any;
     ios: any;
@@ -31,6 +33,7 @@ export declare class SlideContainer extends AbsoluteLayout {
     startSlideshow(): void;
     nextSlide(): void;
     previousSlide(): void;
+    resetAndroidTranslucentFlags(): void;
     private setupLeftPanel();
     private setupRightPanel();
     private applySwipe(pageWidth);

nativescript-slides.ts

@@ -9,6 +9,8 @@ import * as AnimationModule from 'ui/animation';
 import * as gestures from 'ui/gestures';
 import {AnimationCurve} from 'ui/enums';
 
+const LayoutParams = android.view.WindowManager.LayoutParams;
+
 export class Slide extends StackLayout { }
 
 enum direction {
@@ -31,7 +33,8 @@ export class SlideContainer extends AbsoluteLayout {
 	private _pageWidth: number;
 	private _loop: boolean;
 	private _interval: number;
-	private _AndroidTransparentStatusBar: boolean;
+	private _androidTranslucentStatusBar: boolean;
+	private _androidTranslucentNavBar: boolean;
 	private timer_reference: number;
 
 	get interval() {
@@ -50,12 +53,20 @@ export class SlideContainer extends AbsoluteLayout {
 		this._loop = value;
 	}
 
-	get AndroidTransparentStatusBar() {
-		return this._AndroidTransparentStatusBar;
+	get androidTranslucentStatusBar() {
+		return this._androidTranslucentStatusBar;
+	}
+
+	set androidTranslucentStatusBar(value: boolean) {
+		this._androidTranslucentStatusBar = value;
 	}
 
-	set AndroidTransparentStatusBar(value: boolean) {
-		this._AndroidTransparentStatusBar = value;
+	get androidTranslucentNavBar() {
+		return this._androidTranslucentNavBar;
+	}
+
+	set androidTranslucentNavBar(value: boolean) {
+		this._androidTranslucentNavBar = value;
 	}
 
 	get pageWidth() {
@@ -93,12 +104,19 @@ export class SlideContainer extends AbsoluteLayout {
 			if (!this._loaded) {
 				this._loaded = true;
 
-				// Android Transparent Status Bar
-				if (this.AndroidTransparentStatusBar === true && app.android && Platform.device.sdkVersion >= '21') {
-					const View = android.view.View;
+				// Android Translucent bars API >= 19 only
+				if (this.androidTranslucentStatusBar === true || this._androidTranslucentNavBar === true && app.android && Platform.device.sdkVersion >= '19') {
 					let window = app.android.startActivity.getWindow();
-					// set the status bar to Color.Transparent
-					window.setStatusBarColor(0x000000);
+
+					// check for status bar
+					if (this._androidTranslucentStatusBar === true) {
+						window.addFlags(LayoutParams.FLAG_TRANSLUCENT_STATUS);
+					}
+
+					// check for nav bar
+					if (this._androidTranslucentNavBar === true) {
+						window.addFlags(LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
+					}
 				}
 
 				let slides: StackLayout[] = [];
@@ -172,6 +190,16 @@ export class SlideContainer extends AbsoluteLayout {
 		});
 	}
 
+	public resetAndroidTranslucentFlags(): void {
+		if (this._androidTranslucentStatusBar === true) {
+			let window = app.android.startActivity.getWindow();
+			window.clearFlags(LayoutParams.FLAG_TRANSLUCENT_STATUS);
+		}
+		if (this._androidTranslucentNavBar === true) {
+			window.clearFlags(LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
+		}
+	}
+
 	private setupLeftPanel(): void {
 		this.direction = direction.none;
 		this.transitioning = false;