Parallax Navigation Drawer

Parallax Navigation Drawer is a custom Native Android navigation drawer that supports sliding from the left and right ends with parallax effect.

Uses

Parallax Navigation Drawer can be used to provide left and right navigation drawers. Each drawer can contain dynamic content.

Installation

There are several ways to install this library.

Grab a JAR artefact from the Maven Central Repository:

On Gradle

implementation 'io.github.iodevblue:parallaxnavigationdrawer:1.1.1'

On Apache Maven

<dependency>
  <groudId> io.github.iodevblue </groudId>
  <artifactId> parallaxnavigationdrawer </artifactId>
  <version> 1.1.1 </version>
</dependency>

If it is a snapshot version, add the snapshot Maven Nexus OSS repository:

maven {   
  url 'https://s01.oss.sonatype.org/content/repositories/snapshots/'
}

Then retrieve a copy:

implementation 'io.github.iodevblue:parallaxnavigationdrawer:1.1.1-SNAPSHOT'

Grab a JAR or AAR artifact from the release section.

Place it in libs folder in your project module and install in your project.

implementation fileTree(dir:' libs', include:'*jar')

If you do not prefer the compiled JAR and want access to the source files directly:

Download the project zip file.

Create a new module with name parallaxnavigationdrawer in your project.
Copy the contents of the parallaxnavigationdrawer module from the downloaded project zip file to the new module parallaxnavigationdrawer.
This method makes the source code accessible. If you do make major or minor improvements to the source code, consider making a pull request or an issue to make a contribution.

Check the Contributing for more information.

Usage

To use ParallaxNavigationDrawer, you will need three layout files

One representing the left navigation drawer.
One representing the right navigation drawer.
One representing the main User Interface content.

Suppose these are the layouts...

The Left drawer content layout representing the left navigation drawer (drawer_left.xml)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <ImageView/>

</RelativeLayout>

The Right drawer content layout representing the right navigation drawer (drawer_right.xml)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView/>
    
</LinearLayout>

Main content layout representing the Main User Interface (drawer_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout/>

    <ImageView/>

    <TextView/>

    <ImageButton/>

</RelativeLayout>

Navigate to your Activity or Fragment XML layout file (e.g activity_main.xml), add a ParallaxNavigationDrawer widget and include the layouts in the following order

Left navigation drawer layout
Right navigation drawer layout
Main content layout

<com.blueiobase.api.android.parallaxnavigationdrawer.ParallaxNavigationDrawer
        android:id="@+id/pnd"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/white"
        app:mainContentShadowAlpha="0.5"
        app:mainContentCloseOnTouch="true"
        app:drawerMode="both"
        app:parallax="true"
        >

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

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

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

</com.blueiobase.api.android.parallaxnavigationdrawer.ParallaxNavigationDrawer>

NOTE: The layouts MUST be in the specified order (Left, Right, Main) and there MUST be no more than 3 layout files included in the ParallaxNavigationDrawer widget unless an IllegalStateException would be thrown.

To utilize one of either drawers, add the drawerMode attribute to the ParallaxNavigationDrawer widget specifying either left or right enum value. Then <include/> at least two layouts.

One layout representing the navigation drawer.
The other representing the main content User Interface.

NOTE: The layout included last would be considered the main User Interface content.

<com.blueiobase.api.android.parallaxnavigationdrawer.ParallaxNavigationDrawer
        android:id="@+id/pnd"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/white"
        app:mainContentShadowAlpha="0.5"
        app:mainContentCloseOnTouch="true"
        app:drawerMode="right"
        app:parallax="true"
        >
  
        <include layout="@layout/drawer_right"/>

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

</com.blueiobase.api.android.parallaxnavigationdrawer.ParallaxNavigationDrawer>

Specifying none indicates that drawers are deactivated.

NOTE: By default, ParallaxNavigationDrawer has the drawerMode attribute set to none. This means it must be explicitly set either in the XML layout file or in the class file.

To open the left drawer:

parallaxNavigationDrawer.openLeftDrawer()

To close the close drawer:

parallaxNavigationDrawer.closeLeftDrawer()

To toggle between open and close states of the left drawer:

parallaxNavigationDrawer.toggleLeftDrawer()

You can utilize the onBackPressed() function which closes either the left or right drawer and returns a boolean indicating the closed state of both drawers. This can be implemented in the overridden onSupportNavigateUp() of an Activity class.

override fun onSupportNavigateUp(): Boolean {
  return if (parallaxNavigationDrawer.onBackPressed()) super.onNavigateUp() else false
}

Listen to drawer open and close events by using either one or both of these depending on your implementation:

OnDrawerStateChangedListener: Listens for open and close events for both drawers.
OnLeftDrawerStateChangedListener: Listens for open and close events for only the left drawer.
OnRightDrawerStateChangedListener: Listens for open and close events for only the right drawer.

private val parallaxNavigationDrawer: ParallaxNavigationDrawer by lazy { findViewById(R.id.pnd) }

parallaxNavigationDrawer.apply {
    setOnLeftDrawerStateChangedListener {
        if(it)
            Toast.makeText(this@MainActivity, "Left Drawer Open!", Toast.LENGTH_SHORT).show()
        else
            Toast.makeText(this@MainActivity, "Left Drawer Close!", Toast.LENGTH_SHORT).show()
    }
    setOnRightDrawerStateChangedListener {
        if(it)
            Toast.makeText(this@MainActivity, "Right Drawer Open!", Toast.LENGTH_SHORT).show()
        else
            Toast.makeText(this@MainActivity, "Right Drawer Close!", Toast.LENGTH_SHORT).show()
    }
}

Alternatively, you can specify a drawer state listener using Kotlin DSL:

parallaxNavigationDrawer.setOnLeftDrawerStateChangedListener {
    if(it)
        Toast.makeText(this@MainActivity, "Left Drawer Open!", Toast.LENGTH_SHORT).show()
    else
        Toast.makeText(this@MainActivity, "Left Drawer Close!", Toast.LENGTH_SHORT).show()
}

parallaxNavigationDrawer.setOnRightDrawerStateChangedListener {
    if(it)
        Toast.makeText(this@MainActivity, "Right Drawer Open!", Toast.LENGTH_SHORT).show()
    else
        Toast.makeText(this@MainActivity, "Right Drawer Close!", Toast.LENGTH_SHORT).show()
}

To use ParallaxNavigationDrawer in a declarative manner:

Create a ParallaxNavigationDrawer instance using a Context:

private val parallaxNavigationDrawer = ParallaxNavigationDrawer(context)

Inflate the layouts representing the drawers and main User Interface content to View objects and add them dynamically to the `ParallaxNavigationDra

ParallaxNavigationDrawer

Install / Use

README

Parallax Navigation Drawer

Uses

Installation

Usage