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
[ACTIVE] Simple Stack, a backstack library / navigation framework for simpler navigation and state management (for fragments, views, or whatevers).

Simple Stack Why do I want this? To make navigation to another screen as simple as backstack.goTo(SomeScreen()), and going back as simple as backstack

Gabor Varadi 1.3k Nov 27, 2022
New style for app design simple bottom navigation with side navigation drawer UI made in Jetpack Compose.😉😎

BottomNavWithSideDrawer New style for app design simple bottom navigtaion with side navigation drawer UI made in Jetpack Compose. ?? ?? (Navigation Co

Arvind Meshram 5 Nov 24, 2022
Cesar Valiente 1 Sep 3, 2022
Alligator is a modern Android navigation library that will help to organize your navigation code in clean and testable way.

Alligator Alligator is a modern Android navigation library that will help to organize your navigation code in clean and testable way. Features Any app

Artur Artikov 291 Nov 24, 2022
Android multi-module navigation built on top of Jetpack Navigation Compose

MultiNavCompose Android library for multi-module navigation built on top of Jetpack Navigation Compose. The goal of this library is to simplify the se

Jeziel Lago 22 Nov 18, 2022
DSC Moi University session on using Navigation components to simplify creating navigation flow in our apps to use best practices recommended by the Google Android Team

Navigation Components Navigate between destination using safe args How to use the navigation graph and editor How send data between destinations Demo

Breens Mbaka 6 Feb 3, 2022
Navigation Component: THE BEST WAY to create navigation flows for your app

LIVE #017 - Navigation Component: A MELHOR FORMA de criar fluxos de navegação para o seu app! Código fonte do projeto criado na live #017, ensinando c

Kaique Ocanha 4 Jun 15, 2022
Bottom-App-Bar-with-Bottom-Navigation-in-Jetpack-compose-Android - Bottom App Bar with Bottom Navigation in Jetpack compose

Bottom-App-Bar-with-Bottom-Navigation-in-Jetpack-compose-Android This is simple

Shruti Patel 1 Jul 11, 2022
Animated Tab Bar is an awesome navigation extension that you can use to add cool, animated and fully customizable tab navigation in your apps

Animated Tab Bar is an awesome navigation extension that you can use to add cool, animated and fully customizable tab navigation in your apps. The extension provides handy methods and properties to change the behaviour as well as the appearance of the navigation bar.

Zain Ul Hassan 3 Jul 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 Nov 21, 2022
A customizable and easy to use BottomBar navigation view with sleek animations, with support for ViewPager, ViewPager2, NavController, and badges.

A customizable and easy to use BottomBar navigation view with sleek animations, with support for ViewPager, ViewPager2, NavController, and badges.

Joery Droppers 1000 Dec 5, 2021
Okuki is a simple, hierarchical navigation bus and back stack for Android, with optional Rx bindings, and Toothpick DI integration.

Okuki A simple, hierarchical navigation bus and back stack for Android, with optional Rx bindings, and Toothpick integration for automatic dependency-

Cain Wong 144 Feb 11, 2022
A simple & curved & material bottom navigation for Android written in Kotlin with ♥ .

A simple & curved & material bottom navigation for Android written in Kotlin with ♥ .

Hamidreza Etebarian 1.1k Nov 19, 2022
A simple navigation library for Android 🗺️

Enro ??️ A simple navigation library for Android "The novices’ eyes followed the wriggling path up from the well as it swept a great meandering arc ar

Isaac Udy 215 Nov 17, 2022
A Simple App to implement Navigation Architecture Component.

Android Navigation codelab Content: https://codelabs.developers.google.com/codelabs/android-navigation/ License Copyright 2018 The Android Open Source

Gilbert Ngeno 0 Nov 5, 2021
A small and simple, yet fully fledged and customizable navigation library for Jetpack Compose

A small and simple, yet fully fledged and customizable navigation library for Jetpack Compose

Vitali Olshevski 278 Nov 23, 2022
A simple, highly customizable compose navigation component for Android & Desktop platform.

介绍 一个简单并提供高度扩展功能的 Compose 导航组件,同时支持 Android 和 Desktop 平台。 常用功能 使用 下载 // Android implementation("io.github.succlz123:compose-screen-android:0.0.1") //

Ning 15 Nov 24, 2022
NastiaGusev 2 Feb 11, 2022
NTabLayout is a simple tab bar custom view under android which has click-sliding and scaling up animation effect.

NTabLayout Brief NTabLayout is a simple tab bar custom view under android which has click-sliding and scaling up animation effect. This tab bar's effe

XellossRyan 1 Oct 22, 2021