Google Newsstand Navigation Toolbar Pattern Kotlin Library

0
1365

Hey Geekier,  Every Android developer know about the Google NewsStand App and well aware of their Navigation Toolbar Pattern Animation. And if you want to add that type of animation for your application then this article is for you. If you don’t know about Google NewsStand Animation then don’t worry. Just look out demo of this library below:

1Demo of Navigation Toolbar Pattern Project

Navigation Toolbar Pattern Animation Library
Navigation Toolbar Pattern Animation Library

Here is a quick exploration of a navigation pattern. This idea comes while using the Google Newsstand app. Basically, like my previous article about Trello exploration, it is the ability to pull to navigate between categories more easily. Assuming you are not using the pull to refresh. As usual, looking forward to get your comments!

Lets move on to implementation of Navigation Toolbar Pattern

Navigation toolbar pattern is an animation library with slide-modeled UI navigation controller.

See this too : Comparison : Android O Vs Android N

2Requirements

  • Android 5.0 Lollipop (API lvl 21) or greater
  • Your favorite IDE (Android Studio or IntelliJ)

3Download Navigation Toolbar Pattern Library

You’ve to aware about this: Android MVP Pattern Example

4Installation

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

Gradle:

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

SBT:

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

Maven:

<dependency>
  <groupId>com.ramotion.navigationtoolbar</groupId>
  <artifactId>navigation-toolbar</artifactId>
  <version>0.1.0</version>
  <type>aar</type>
</dependency>

5Add NavigationToolBarLayout  in layout

NavigationToolBarLayout is the successor to CoordinatorLayout. Therefore, NavigationToolBarLayout must be the root element of your layout.

Do you know: Why Kotlin better than Java For Android Development?

Displayed content must be inside NavigationToolBarLayout, as shown below:

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

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

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_anchor="@id/com_ramotion_app_bar"
        app:layout_anchorGravity="bottom|end"
        app:srcCompat="@android:drawable/ic_dialog_email" />

</com.ramotion.navigationtoolbar.NavigationToolBarLayout>

6Create adapter for NavigationToolBarLayout

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

NavigationToolBarLayout contains android.support.v7.widget.Toolbar and android.support.design.widget.AppBarLayout, 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: Toolbar
val appBarLayout: AppBarLayout

7Some attributes used in this library

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.

Facebook

Twitter

That’s it. Hope you enjoy this library and click on to share with your friends.

Share your thoughts

Loading Facebook Comments ...
Loading Disqus Comments ...