Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Hiding action bar for android #353

Closed
ahmedelgendy opened this issue Jul 18, 2016 · 13 comments

Comments

@ahmedelgendy
Copy link

commented Jul 18, 2016

I want to hide the action bar for Android
I tried actionBarHidden="true" but didn't work because I am using native script with Angular2 and I can't use the <page> tag due to an error
Are there any solutions to hide it for all activities?
Thanks

@vakrilov

This comment has been minimized.

Copy link
Member

commented Jul 18, 2016

For the initial page you can use the startPageActionBarHidden property of the in the application options when bootstrapping you app. Docs link.
Update: You can use the next approach in all cases now. The startPageActionBarHidden is deprecated

For subsequent page navigations you can inject the Page in your component and use actionBarHidden. Docs link

Hope that helps.

@vakrilov vakrilov closed this Jul 18, 2016
@ahmedelgendy

This comment has been minimized.

Copy link
Author

commented Jul 19, 2016

Oh thank you

@dianjuar

This comment has been minimized.

Copy link

commented Jun 23, 2017

Just for the record

import { Component, OnInit } from '@angular/core';

import { Page } from "ui/page";

export class YourComponent implements OnInit {

    constructor(private _page: Page) { }

    ngOnInit() {
        this._page.actionBarHidden = true;
    }
}

Is not better if the documentation is improved @vakrilov ?
I face the same problem and the documentation doesn't tell any of this.

https://docs.nativescript.org/angular/code-samples/ui/action-bar.html

@vakrilov vakrilov added the T:Docs label Jun 27, 2017
@vakrilov

This comment has been minimized.

Copy link
Member

commented Jun 27, 2017

@dianjuar You are absolutely right!
@NickIliev Can you please update the angular action-bar article with a section about startPageActionBarHidden when bootstrapping angular app.

@NickIliev NickIliev self-assigned this Jun 27, 2017
@NickIliev NickIliev removed their assignment Jul 5, 2017
@NickIliev

This comment has been minimized.

Copy link
Member

commented Jul 5, 2017

@vakrilov it appears this is already done in this article section

@erkanarslan

This comment has been minimized.

Copy link

commented Aug 1, 2018

This option was working prior to Nativescript 4 but doesn't work anymore.

@NickIliev

This comment has been minimized.

Copy link
Member

commented Aug 2, 2018

@erkanarslan than you for noticing that - I will investigate the case.

Meanwhile, as a workaround, you could explicitly hide the action bar on the page it is shown while directly accessing the Page instance via DI.

constructor(private itemService: ItemService, private _page: Page) { 
    this._page.actionBarHidden = true;
}

Update: confirmed as unexpected behavior and logged as a bug here

@d4rkd0s

This comment has been minimized.

Copy link

commented Oct 24, 2018

So I've tried myself and the action bar is still showing... hmm...

import { Component, OnInit } from "@angular/core";
import { Page } from "ui/page";

@Component({
    selector: "Auth",
    moduleId: module.id,
    templateUrl: "./auth.component.html",
    styleUrls: ["./auth.component.css"]
})
export class AuthComponent implements OnInit {
    constructor(private _page: Page) {
        // Hides the action bar, that appears on android
        this._page.actionBarHidden = true;
    }

    ngOnInit(): void {

    }
}

Also tried

import { Component, OnInit } from "@angular/core";
import { Page } from "ui/page";

@Component({
    selector: "Auth",
    moduleId: module.id,
    templateUrl: "./auth.component.html",
    styleUrls: ["./auth.component.css"]
})
export class AuthComponent implements OnInit {
    constructor(page: Page) {
        // Hides the action bar, that appears on android
        page.actionBarHidden = true;
    }

    ngOnInit(): void {

    }
}

For ref my auth component html is:

<FlexboxLayout>
    <StackLayout>
        <Image src="~/assets/images/logo.png"></Image>
        <Button text="Login"></Button>
        <Button text="Register"></Button>
    </StackLayout>
</FlexboxLayout>


Also I have it turned off in my main.ts

// this import should be first in order to load some required settings (like globals and reflect-metadata)
import { platformNativeScriptDynamic } from "nativescript-angular/platform";

import { AppModule } from "./app.module";

platformNativeScriptDynamic({ createFrameOnBootstrap: true, startPageActionBarHidden: true }).bootstrapModule(AppModule);

@d4rkd0s

This comment has been minimized.

Copy link

commented Oct 24, 2018

Ahh! I figured it out, so you can't have createFrameOnBootstrap: true in your main.ts and expect the ActionBar to go away, so you must set it to createFrameOnBootstrap: false I found my answer here: #1439 (comment)

@larssn

This comment has been minimized.

@vakrilov

This comment has been minimized.

Copy link
Member

commented Nov 16, 2018

Thanks @larssn
I have updated the comment - no need to use the startPageActionBarHidden - you should be able to do this in a similar way for all pages (the 2nd approach in the answer)

@jktaylor21

This comment has been minimized.

Copy link

commented Jan 11, 2019

@vakrilov is there any way to globally disable the action bar for all pages? I'm converting my app to use schematics (adding web support) and I'm trying to tease out the nativescript specific stuff from my components. I haven't been able tease out the page DI though since I need it to hide the action bar so I am currently stuck with nativescript specific components so I can hide the action bar.

Any ideas would be appreciated, oh, and sorry for commenting on a closed issue. :-)

@jktaylor21

This comment has been minimized.

Copy link

commented Jan 11, 2019

FYI - just in case anyone else stumbles on this thread. I was able to solve my problem with the following simple method:

    hideActionBar() {
        const rootFrame = topmost();
        rootFrame.actionBarVisibility = 'never';
    }

That method lives in a service with a nativescript implementation (above) and a web implementation (empty) and it gets called from ngOnInit() for the components that have to worry about hiding the action bar. That allowed met to only have one component file.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
8 participants
You can’t perform that action at this time.