A material implementation of the appbar layout for iOS and Android. With animation and coordinator plugin (scroll effect)
npm i --save nativescript-nbmaterial-appbar
  • Version: 1.0.1
  • GitHub:
  • Downloads:
    • Last Day:   0
    • Last Week:  2
    • Last Month: 6

Nativescript implementation of the Material AppBarLayout

The module implement AppBarLayout on both iOS and Android. The layout extends the nativescript GridLayout. Use "nativescript-nbmaterial-coordinator" to make animation effects like sticky header or hide header on scroll. AppBarIcon and AppBarTitle extends nativescript Label. You can use a font library like material-icons or font-awesome.

The markup in NativeScript apps contains a series of user interface components, each
of which NativeScript renders with a platform-specific iOS or Android native control.
You can find a full list of user interface components you can use in your app at

<Page xmlns=""
xmlns:app="nativescript-nbmaterial-appbar" navigatingTo="onNavigatingTo">

<GridLayout rows="*" columns="*" id="root">
<app:AppBarLayout columns="auto,*,auto,auto" rows="auto,auto" id="actionbar">
<app:AppBarIcon text="list" col="0"/>
<app:AppBarTitle text="My Application" col="1"/>
<app:AppBarIcon text="notifications" col="2"/>
<app:AppBarIcon text="search" col="3" tap="openSearch"/>


See all modules here