A simple Floating Action Button that shows an anchored Navigation View

Overview

License Apache 2.0 minSdkVersion 19 compileSdkVersion 30 maven-central

Android Arsenal Floating-Navigation-View MaterialUp Floating-Navigation-View Android Weekly #224 Android Sweets #38 Android UI OpenSource Awesome Android

Floating Navigation View

A simple Floating Action Button that shows an anchored Navigation View and was inspired by Menu Material Fixed created by Tommaso Poletti

Sample

Installation

Include the library in your build.gradle

dependencies{
    compile 'com.github.andremion:floatingnavigationview:1.3.0'
}

or in your pom.xml if you are using Maven

<dependency>
  <groupId>com.github.andremion</groupId>
  <artifactId>floatingnavigationview</artifactId>
  <version>1.3.0</version>
  <type>aar</type>
</dependency>

Usage example

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true">

    ...

    <com.andremion.floatingnavigationview.FloatingNavigationView
        android:id="@+id/floating_navigation_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        android:theme="@style/AppTheme.AppBarOverlay"
        app:layout_anchor="@id/toolbar"
        app:layout_anchorGravity="bottom|end"
        app:drawMenuBelowFab="true"
        app:headerLayout="@layout/navigation_view_header"
        app:menu="@menu/menu_navigation_view" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Custom attributes

  • The menu resource to inflate and populate items from <attr name="menu" format="reference" />

  • Layout resource to inflate as the header <attr name="headerLayout" format="reference" />

  • Item text customizations <attr name="itemIconTint" format="color"/> <attr name="itemTextColor" format="color"/> <attr name="itemBackground" format="reference"/> <attr name="itemTextAppearance" format="reference"/>

  • If menu must be drawn below the FAB <attr name="drawMenuBelowFab" format="boolean" />

The recommended way to customize the background color is by using the app:backgroundTint attribute in xml or setBackgroundTintList in Java

<com.andremion.floatingnavigationview.FloatingNavigationView
        android:id="@+id/floating_navigation_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:backgroundTint="#009688" />
mNavigationView.setBackgroundTintList(ColorStateList.valueOf(Color.parseColor("#009688")));

You can also set the button icon color according to the theme by setting the android:tint to a theme attribute:

<com.andremion.floatingnavigationview.FloatingNavigationView
        android:id="@+id/floating_navigation_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:tint="?android:textColorPrimary" />

See more at the sample

Libraries and tools used in the project

  • Design Support Library The Design package provides APIs to support adding material design components and patterns to your apps.
  • VectAlign VectAlign is a developer's tool which aligns two VectorDrawable "pathData" strings (or SVG images) in order to allow morphing animations between them using an AnimatedVectorDrawable.

License

Copyright 2019 André Mion

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
Comments
  • Class cast exception

    Class cast exception

    Process: com.andremion.floatingnavigationview.sample, PID: 28109 java.lang.ClassCastException: android.support.design.widget.AppBarLayout$LayoutParams cannot be cast to android.support.design.widget.CoordinatorLayout$LayoutParams at android.support.design.widget.FloatingActionButton$Behavior.isBottomSheet(FloatingActionButton.java:597) at android.support.design.widget.FloatingActionButton$Behavior.onDependentViewChanged(FloatingActionButton.java:589) at android.support.design.widget.FloatingActionButton$Behavior.onDependentViewChanged(FloatingActionButton.java:528) at android.support.design.widget.CoordinatorLayout.offsetChildToAnchor(CoordinatorLayout.java:1564) at android.support.design.widget.CoordinatorLayout.onChildViewsChanged(CoordinatorLayout.java:1233) at android.support.design.widget.CoordinatorLayout$OnPreDrawListener.onPreDraw(CoordinatorLayout.java:1812) at android.view.ViewTreeObserver.dispatchOnPreDraw(ViewTreeObserver.java:847) at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:1989) at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1079) at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:5839) at android.view.Choreographer$CallbackRecord.run(Choreographer.java:836) at android.view.Choreographer.doCallbacks(Choreographer.java:635) at android.view.Choreographer.doFrame(Choreographer.java:601) at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:822) at android.os.Handler.handleCallback(Handler.java:739) at android.os.Handler.dispatchMessage(Handler.java:95) at android.os.Looper.loop(Looper.java:135) at android.app.ActivityThread.main(ActivityThread.java:5318) at java.lang.reflect.Method.invoke(Native Method) at java.lang.reflect.Method.invoke(Method.java:372) at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:922) at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:717)

    invalid 
    opened by Stanly-Mindssoft 6
  • Themes/colors

    Themes/colors

    Hello, thanks for the nice lib. I had the accent color as default color for the lib. I want to have a fab with a different background and icon tint, no problems there. But when I open the navigationview I am not able to set properly the colors inside it (I forced the background color programmatically and it works, but if the color is light I need a dark color for the text, and I don't know how to achieve that). Thanks in advance

    opened by GGLabCenter 4
  • How can I inflate Navigation Header Item?

    How can I inflate Navigation Header Item?

    Caused by: java.lang.IllegalStateException: Required view 'navImageView' with ID 2131296615 for field 'navImageView' was not found.
     If this view is optional add '@Nullable' (fields) or
     '@Optional' (methods) annotation.at butterknife.internal.Utils.findRequiredView(Utils.java:92) at 
    butterknife.internal.Utils.findRequiredViewAsType(Utils.java:104)
    
    opened by JAICHANGPARK 2
  • Doent work in android version 4

    Doent work in android version 4

    android.content.res.Resources$NotFoundException: File res/drawable/ic_menu_animated.xml from drawable resource ID #0x7f020064 at android.content.res.Resources.loadDrawable(Resources.java:3451) at android.content.res.Resources.getDrawable(Resources.java:1894) at android.support.v4.content.ContextCompat.getDrawable(ContextCompat.java:354) at widgets.FloatingNavigationView.startOpenAnimations

    Caused by: org.xmlpull.v1.XmlPullParserException: Binary XML file line #16: invalid drawable tag animated-vector at android.graphics.drawable.Drawable.createFromXmlInner(Drawable.java:969) at android.graphics.drawable.Drawable.createFromXml(Drawable.java:913) at android.content.res.Resources.loadDrawable(Resources.java:3447) at android.content.res.Resources.getDrawable(Resources.java:1894)  at android.support.v4.content.ContextCompat.getDrawable(ContextCompat.java:354) 

    invalid wontfix 
    opened by Stanly-Mindssoft 1
  • Customize the menu background color by the FAB background color.

    Customize the menu background color by the FAB background color.

    Context

    We need to be able to customize menu background color by the FAB background color. Both need to be the same.

    Result

    Use the app:backgroundTint attribute in xml or setBackgroundTintList in Java

    enhancement 
    opened by andremion 0
  • FloatingActionButton interact with Snackbar even inside NavigationBar

    FloatingActionButton interact with Snackbar even inside NavigationBar

    If you select any menuItem in NavigationBar, FloatingActionButton will be heaved by SnackBar and will not be unheaved if you open NavigationBar again before SnackBar disappear.

    There is a gif so you can understand what I am talking about.

    enhancement 
    opened by Nexen23 2
Releases(v1.3.0)
Owner
André Mion
🇧🇷 Android Engineer living in 🇵🇹 • Full time Husband and Dad • Occasionally Drummer and Inline Skater… I build mostly Android stuffs…
André Mion
Android library that provides the floating action button to sheet transition from Google's Material Design.

MaterialSheetFab Library that implements the floating action button to sheet transition from Google's Material Design documentation. It can be used wi

Gordon Wong 1.6k Dec 13, 2022
A dual-function menu button that offers a default action as well as the possibility of choosing a different action by selecting from a set of alternatives.

A dual-function menu button that offers a default action as well as the possibility of choosing a different action by selecting from a set of alternatives.

Kojo Fosu Bempa Edue 114 Nov 29, 2022
Bottom Navigation widget component inspired by the Google Material Design Guidelines at https://www.google.com/design/spec/components/bottom-navigation.html

Material Bottom Navigation Library Lightweight Bottom Navigation library component inspired by the Google Material Design Guidelines at https://www.go

Alessandro Crugnola 1.4k Dec 18, 2022
Space Navigation is a library allowing easily integrate fully customizable Google Spaces like navigation to your app.

Space-Navigation-View Introduction Space Navigation is a library allowing easily integrate fully customizable Google [Spaces][1] like navigation to yo

Arman 2k Dec 23, 2022
A floating menu library for Android.

Hover Hover is a floating menu implementation for Android. Goals The goals of Hover are to: Provide an easy-to-use, out-of-the-box floating menu imple

Google 2.7k Dec 27, 2022
A customizable and easy to use BottomBar navigation view with sleek animations, with support for ViewPager, ViewPager2, NavController, and badges.

AnimatedBottomBar A customizable and easy to use bottom bar view with sleek animations. Examples Playground app Download the playground app from Googl

Joery 1.2k Dec 30, 2022
Simple library which enable you to add a drawer(slide-out) navigation to your android application

SimpleSideDrawer is an android library to add a drawer navigation into your android application. This library has high affinity with other libraries l

null 217 Nov 25, 2022
A new way to implement navigation in your app 🏎

ExpandableBottomBar A new way to improve navigation in your app Its really easy integrate to your project take it, faster, faster Important: library w

Alexander Dadukin 692 Dec 29, 2022
Navigation menu for Android (based off Google+ app)

RibbonMenu Navigation menu for Android (based on Google+ app). Usage Menus are created in xml as normal, adding text and an icon. In the layout you wa

David Scott 487 Nov 24, 2022
Implementation of "Side Navigation" or "Fly-in app menu" pattern for Android (based on Google+ app)

Android SideNavigation Library Implementation of "Side Navigation" or "Fly-in app menu" pattern for Android (based on Google+ app). Description The Go

Evgeny Shishkin 319 Nov 25, 2022
Android - Blur Navigation Drawer like Etsy app.

Blur Navigation Drawer Library[DEPRECATED] Blur Navigation Drawer like Etsy app. Demo You can download a demo here. Updates Version 1.1 Add support fo

Vasilis Charalampakis 414 Nov 23, 2022
Spotify like android material bottom navigation bar library.

SuperBottomBar About Spotify like android material bottom navigation bar library. GIF Design Credits All design and inspiration credits belongs to Spo

Ertugrul 73 Dec 10, 2022
An android custom view which looks like the menu in Path 2.0 (for iOS).

ArcMenu & RayMenu ArcMenu An android custom view which looks like the menu in Path 2.0 (for iOS). RayMenu About The user experience in Path 2.0 (for i

daCapricorn 1.3k Nov 29, 2022
Bottom Sheet fragment with a sticky header and a content recycler view

Sticky Header Bottom Sheet A simple library to create a Bottom Sheet with a sticky header and a content recycler view. The bottom sheet expands on scr

Kshitij Kumar 12 Sep 21, 2022
Neat library, that provides a simple way to implement guillotine-styled animation

Guillotine animation Neat library, that provides a simple way to implement guillotine-styled animation Check this [project on Dribbble] (https://dribb

Yalantis 2.7k Jan 3, 2023
Kai Liao 2.2k Jan 3, 2023
Simple and easy to use circular menu widget for Android.

Deprecated This project is no longer maintained. No new issues or pull requests will be accepted. You can still use the source or fork the project to

Anup Cowkur 420 Nov 25, 2022
BottomSheet-Android - A simple customizable BottomSheet Library for Android Kotlin

BottomSheet-Android A simple customizable BottomSheet Library for Android Kotlin

Munachimso Ugorji 0 Jan 3, 2022