Navigation Header

Navigation Header inspired by dribble menu built with MotionLayout and ObjectAnimator.

Screenshots

Setup

Add it in project root build.gradle:

	allprojects {
		repositories {
			...
			maven { url 'https://jitpack.io' }
		}
	}

Add the dependency in app build.gradle:

	dependencies {
	        ...
	        implementation 'com.github.QArtur99:NavigationHeader:1.0.1'
	}

Usage

You need to include child layout inside parent layout (ConstraintLayout, RelativeLayout):

    <com.artf.navigationheader.NavigationHeaderLayout
            android:id="@+id/navigationHeader"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:theme="@style/ThemeOverlay.MaterialComponents.Dark.ActionBar"
            app:headerHeight="?attr/actionBarSize"
            app:baseElevation="6dp"
            app:animationDuration="500"
            app:layoutDescription="@xml/motion_scene"/>

Attributes

• app:headerHeight - header size on collapse.
• app:baseElevation - elevation of header on collapse. (optional)
• app:animationDuration - duration of animation on state change. (optional)
• app:layoutDescription - motion scene for Layout.

Create empty MotionScene in res/xml

            <MotionScene/>

In activity file

Create Header (statusBar and content colors are optional)

        val titleList = mutableListOf<Header>().apply {
            add(Header(title1, R.color.header1, R.color.statusBar1, R.color.content1))
            add(Header(title2, R.color.header2, R.color.statusBar2, R.color.content2))
            ...
        }

Create HeaderView

        titleList.forEach {
            val headerView = layoutInflater.inflate(R.layout.header, null)
            headerView.tag = it.title
            headerView.title.text = it.title
            headerView.setBackgroundColor(ContextCompat.getColor(this, it.headerColor!!))
            headerList.add(HeaderView(headerView, it.headerColor, it.statusBarColor, it.contentColor))
        }

Create List of content views (optional)

        val contentList = mutableListOf<View>().apply {
            add(c1)
            add(c2)
            ...
        }

Create listeners

        navigationHeader.setOnCollapseListener {
            when(it.tag){
                title1 -> {}
                title2 -> {}
                ...
            }
        }

Init NavigationHeader

        navigationHeader.initNavigationHeader(this, headerList, contentList)

Extra settings

Arrow color

        navigationHeader.arrow.setColorFilter(Color.BLACK)

Arrow invisible

        navigationHeader.arrow.setImageDrawable(null)

For more information see simple app included in this repo

Features

• ActionBar stack menu animation with MotionLayout.
• Menu element elevation animation with ObjectAnimator.
• Menu arrow fade in/out animation with ObjectAnimator.
• StatusBar color animation with ObjectAnimator.
• Content elements color animation with ObjectAnimator
• Menu element ripple effect.

How to run the project in development mode

• Clone or download repository as a zip file.
• Open project in Android Studio.
• Run 'app' SHIFT+F10.

Report issues

Something not working quite as expected? Do you need a feature that has not been implemented yet? Check the issue tracker and add a new one if your problem is not already listed. Please try to provide a detailed description of your problem, including the steps to reproduce it.

License

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