Android status bar color with NS-Vue

android

#1

Hi, I want to change the color of the status bar on Android.

I followed this tutorial: https://bradmartin.net/2016/03/10/fullscreen-and-navigation-bar-color-in-a-nativescript-android-app/

And was able to replicate on pure NativeScript: https://play.nativescript.org/?template=play-js&id=i8kBeN&v=22

But I can’t get the same effect on NativeScript-Vue. Because it does not throws any errors: https://play.nativescript.org/?template=play-vue&id=nLPMwf&v=2

Any ideas?


#2

Try foregroundActivity instead of startActivity


#3

Hi, thanks for the quick reply.

It worked perfectly on the playground example (link).

But I getting an error on a current project that says:

System.err: com.tns.NativeScriptException:
System.err: Calling js method onCreateView failed
System.err: TypeError: Cannot read property 'getWindow' of undefined

I will try to figure it out by my own but if you have some insight it would be great.

Thanks for responding all my answers in the other post too!


#4

Hi again. I created a empty project using the Vue-CLI-Template

I only edited the HelloWorld.vue file with this code and it gets the same error:

<template>
  <Page class="page" @loaded="pageLoaded">
    <ActionBar class="action-bar" title="Hello world">
    </ActionBar>

    <StackLayout class="hello-world">
      <Label class="body" textWrap=true text="This is a hello world component, tap the button if you dare" />

      <Button class="btn btn-primary" @tap="surprise = !surprise" text="Tap me!" />
      <Image v-if="surprise" src="~/images/NativeScript-Vue.png" />

    </StackLayout>

  </Page>
</template>

<script>
export default {
  data() {
    return {
      surprise: false
    };
  },
  methods: {
    pageLoaded(args) {
      var app = require("application");
      var platform = require("platform");
      var color = require("color");

      var page = args.object;

      if (app.android && platform.device.sdkVersion >= "21") {
        var window = app.android.foregroundActivity.getWindow();
        window.setStatusBarColor(new color.Color("#FED225").android);
        window.setNavigationBarColor(new color.Color("#FED225").android);
      }
    }
  }
};
</script>

<style scoped>
.hello-world {
  margin: 20;
}

label {
  color: red;
}
</style>

Any ideas?


#5

Not sure if you mate it work, but this is what i did.

<template>
    <Page @loaded="pageLoaded">
        <ActionBar title="Title"/>
        <StackLayout orientation="vertical" width="210" height="210" backgroundColor="gray">
            <Label text="Label 1" width="70" height="50" backgroundColor="red"/>
        </StackLayout>
    </Page>
</template>

<script>
    import * as app from 'tns-core-modules/application'
    import * as platform from 'tns-core-modules/platform'
    import * as color from 'tns-core-modules/color'
    export default {
        data() {
            return {}
        },
        methods: {
            pageLoaded() {
                if (app.android && platform.device.sdkVersion >= "21") {
                    const window = app.android.foregroundActivity.getWindow();
                    window.setStatusBarColor(new color.Color("#123f94").android);
                }
            }
        }
    }
</script>


#6

The user where a need to know the state bar color with ns vue where the valuation is needed for the user to know it the steps through hp support australia where it is managing the part which is enhanced all the functionality of it.