Navigation Toolbar [Kotlin, Open Source]


Navigation Toolbar for Android

Twitter Codacy Badge Donate

Inspired by Aurélien Salomon shot

Looking for developers for your project?
This project is maintained by Ramotion, Inc. We specialize in the designing and coding of custom UI for Mobile Apps and Websites.


The Android mockup available here.


  • Android 4.1 Jelly Bean (API lvl 16) or greater

  • Your favorite IDE


Just download the package from here and add it to your project classpath, or just use the maven repo:


implementation 'com.ramotion.navigationtoolbar:navigation-toolbar:0.1.0'


libraryDependencies += "com.ramotion.navigationtoolbar" % "navitagiton-toolbar" % "0.1.0"



Basic usage

NavigationToolBarLayout is the successor to CoordinatorLayout. Therefore, NavigationToolBarLayout must be the root element of your layout. Displayed content must be inside NavigationToolBarLayout, as shown below:

<com.ramotion.navigationtoolbar.NavigationToolBarLayout    android:layout_width="match_parent"

    <include layout="@layout/content_layout"/>

    <        android:id="@+id/fab"
        app:srcCompat="@android:drawable/ic_dialog_email" />


Next, you must specify an adapter for NavigationToolBarLayout, from which NavigationToolBarLayout will receive the displayed View.

NavigationToolBarLayout contains, access to which can be obtained through the appropriate identifiers:

@id/com_ramotion_toolbar <!-- identifier of Toolbar -->@id/com_ramotion_app_bar <!-- identifier of AppBarLayout -->

or through the appropriate properties of the NavigationToolBarLayout class:

val toolBar: Toolbarval appBarLayout: AppBarLayout

Here are the attributes you can specify through XML or related setters:

  • headerOnScreenItemCount - The maximum number of simultaneously displayed cards (items) in vertical orientation.

  • headerCollapsingBySelectDuration - Collapsing animation duration of header (HeaderLayout), when you click on the card in vertical orientation.

  • headerTopBorderAtSystemBar - Align the top card on the systembar or not.

  • headerVerticalItemWidth - Specifies the width of the vertical card. It can be equal to match_parent, then the width of the card will be equal to the width of NavigationToolBarLayout.

  • headerVerticalGravity - Specifies the alignment of the vertical card. Can take the values: left, center, or right.


Navigation Toolbar for Android is released under the MIT license. See LICENSE for details.

Get the Showroom App for Android to give it a try

Try our UI components in our mobile app. Contact us if interested.


Follow us for the latest updates:

收藏 赞 (0) 踩 (0)