Nativescript android remove action bar

Question

I am trying to develop android app using Nativescript and try to remove Action Bar (top bar with "testns" title), but don't know how. I am using code below but not working. Currently using tns v.1.3.0

var frameModule = require("ui/frame"); exports.pageLoaded = function(){ var topmost = frameModule.topmost(); topmost.android.showActionBar = false; };

score 63 · Answer 1 · answered Oct 10 '16 at 16:44

63

You can explicitly control the visibility of the ActionBar by setting the actionBarHidden property of the Page, look this:

import {Page} from "ui/page";

export class AppComponent {
    constructor(page: Page) {
        page.actionBarHidden = true;
    }
}

answered Oct 10 '16 at 16:44

Diego Melo

731
5
6

3

In the earlier versions the root was always a Frame, so by default there will be a Page. Now this is not working on the latest version of nativescript. With the latest version, you are allowed to define flexible root components and any number of frames (page-router-outlet) within your app. So there won't be a default Frame / Page created within app component. Page can be injected only into the components those are loaded inside the page-router-outlet. – Ahmer Ali Ahsan Feb 16 '19 at 12:30

score 41 · Answer 2 · answered Oct 28 '15 at 07:55

41

Finally I find the answer how to remove the actionbar. By adding actionBarHidden = "true" inside tag Page in xml file :

<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded" actionBarHidden="true">
</Page>

answered Oct 28 '15 at 07:55

Dilar

1,011
1
9
14

1

is there another method? I don't use page tag – Ahmed Elgendy Jul 18 '16 at 02:33
@Elgendy If you are using Angular, you use directive, I have posted an answer showing how to use it. – Narendra May 09 '19 at 23:18
is there another method? I don't use page tag or angular – Seph Reed Jun 04 '19 at 19:42

score 19 · Answer 3 · answered Sep 11 '18 at 20:14

19

This is the code for hidding the ActionBar in your NativeScript Angular TypeScript component.

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

export class AppComponent implements OnInit {

    constructor(private page: Page) {
    }

    ngOnInit(): void {
        this.page.actionBarHidden = true;
    }
}

answered Sep 11 '18 at 20:14

Bienvenido David

4,118
1
25
16

works for me in Android and iOS, but crashes when try to run the angular app in the browser – Alex Bean Feb 26 '19 at 14:19

score 15 · Answer 4 · answered Nov 14 '19 at 08:01

15

<page-router-outlet actionBarVisibility="never"></page-router-outlet>

add [actionBarVisibility="never"] this in in your [app.component.html] file. Its working fine in my project.

answered Nov 14 '19 at 08:01

Sambad

147
1
7

2

This answer should be much higher up. With the newer versions of Nativescript using the page-router-outlet more this is easy, quick and clean. Thank you. – wareisjared Sep 16 '21 at 16:46

score 12 · Answer 5 · edited Jun 07 '19 at 03:12

12

If you are using angular and you don't use page in your html or you are using lazy loading of modules or you have multiple page-router-outlet, you take advantage of directives.

Create a new directive:

hideActionBar.ts

import { Directive } from '@angular/core';
import { Page } from 'tns-core-modules/ui/page/page';

@Directive({
    selector: '[hideActionBar]'
})
export class HideActionBarDirective {
    constructor(private page: Page) {
        this.page.actionBarHidden = true;
    }
}

and use this directive for the html where you want to hide the actionbar.

SecondPage.html

<GridLayout tkExampleTitle tkToggleNavButton rows="auto,*" hideActionBar>
 ...// other html goes here
</GridLayout>

P.S. Don't forget to declare it in NgModule as directives are declarables. This is very useful for code sharing projects as you will be declaring it in ngmodule.tns.ts and it will not be compiled for web project.

declarations: [
 AppComponent,
 MyDirective
],

edited Jun 07 '19 at 03:12

Pierre R-A

509
9
13

answered May 09 '19 at 23:16

Narendra

4,514
2
21
38

1

A very elegant solution taking advantage of Angular. – Pierre R-A May 29 '19 at 16:55
This answer is essential (and the only one that works) for [code-sharing](https://docs.nativescript.org/angular/code-sharing/intro) projects. Thank you! – ZX9 Dec 24 '19 at 01:54
not sure why all solutions above works for me - but the first row of the grid is off the screen – Ricky Levi Aug 30 '20 at 05:55

score 2 · Answer 6 · edited May 09 '19 at 23:29

There are two ways to achieve this:

XML markup: just add 'actionBarHidden="true"' to your page markup. i.e<Page loaded="pageLoaded" actionBarHidden="true"> </Page>

<StackLayout verticalAlignment="middle"> 
    <Button text="{{ abHidden ? 'Show ActionBar' : 'Hide ActionBar' }}" tap="onTap" textWrap="true" class="fa" />
</StackLayout>

and in your .ts

export function onNavigatingTo(args: EventData) {
    const page = <Page>args.object;
    const vm = new Observable();
    vm.set("abHidden", value);
    page.bindingContext = vm;
}

score 2 · Answer 7 · answered Aug 31 '18 at 01:23

2

ActionBar {
  height: 0;
}

<ActionBar [title]="appTitle">
</ActionBar>

answered Aug 31 '18 at 01:23

Alexis Tamariz

646
5
4

2

It may help to add a paragraph or to explaining how the poster may use this code to solve his/her problem. And possibly why the code s/he posted doesn't. – ctt Aug 31 '18 at 02:00

score 0 · Answer 8 · edited Sep 14 '22 at 11:05

0

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

@Component({
  selector: "ns-items",
  templateUrl: "./items.component.html",
})
export class ItemsComponent implements OnInit {

  constructor(private page: Page) { 
  }

  ngOnInit(): void {
    this.page.actionBarHidden = true;
  }
}

edited Sep 14 '22 at 11:05

Olcay Ertaş

5,987
8
76
112

answered Dec 21 '20 at 03:26

EliasBG

1
2

Nativescript android remove action bar

8 Answers8

Linked