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
Floating Action Button for Android based on Material Design specification

FloatingActionButton Yet another library for drawing Material Design promoted actions. Features Support for normal 56dp and mini 40dp buttons. Customi

Zendesk 6.4k Nov 21, 2022
Kotlin Expanding Floating Action button

Kotlin-Expanding-Floating-Action_button Home Screen As you can see there is only a siongle floating button with + icon Expanding Fab button When we cl

Akshay Teli 0 Nov 3, 2021
Android library providing an implementation of the Material Design Floating Action Button Speed Dial.

Android library providing an implementation of the Material Design Floating Action Button Speed Dial.

Sanyam Mehta 5 Aug 15, 2022
Floating Action Button But Moveable And Expandalbe

MeFab todo add the maven bacge here Floating Action Button but MOVEABLE and EXPA

Hussien Fahmy 4 Nov 11, 2022
➕ An efficient and beaufitul Multi Float action button library based on Twitter implemented in Jetpack Compose 🚀

Multi Float Action Button ➕ An efficient and beaufitul Multi Float action button library based on Twitter implemented in Jetpack Compose ?? Including

Geovani Amaral 8 Oct 15, 2022
Base on android-process-button this is the advanced version of the android-process-button.

Rock Button release log Base on android-process-button this is the advanced version of the android-process-button ##Main Features ActionProcessButton

MDCCLXXVI KPT 119 Nov 25, 2022
comtomize view submit button which you use for submit operation or download operation and so on.

This is library project with a custom view that implements concept of Submit Button (https://dribbble.com/shots/1426764-Submit-Button?list=likes&offse

ZhangLei 129 Feb 5, 2021
Android Floating ActionButton with a progress indicator ring

FabProgress Android Circular floating action button with intergrated progress indicator ring As per material design docs Demo: Demo apk HOW TO ADD TO

Kurt Mbanje 779 Nov 28, 2022
Android Circular Progress Button

?? Before using this library, read information below ?? This library is not more supported. If you want to add new feature or fix a bug, grab source

Dmytro Danylyk 5.6k Nov 22, 2022
Circle button widget for Android

DEPRECATED This library is deprecated and no new development is taking place. Consider using a FAB(Floating action button) instead. E.g. the Android D

Markus Hintersteiner 1.5k Nov 26, 2022
FButton - a flat button library for Android

FButton FButton is a custom Button of Android with "Flat UI" concept. FButton's design get inspiration from designmono. This library is very small and

Le Van Hoang 1.4k Nov 17, 2022
Android button which moves in eight direction.

Moving Button Android button which moves in eight direction. Preview Sample Demo You can download demo movie file here : demo.mov It's also on Youtube

Leonardo Taehwan Kim 131 Nov 16, 2022
Button for android with animations for transition and error states.

Transition Button Android Preview Expand animation: Shake animation: Installation Gradle dependencies { implementation 'com.royrodriguez:transitionbu

Roy Rodriguez 133 Dec 1, 2022
A cute widget of Switch Button for you to create beautiful and friendly UI.

SwitchButton To get a quick preview, you can get Demo apk in Google Play or Directly download. This project provides you a convenient way to use and c

kyleduo 4.6k Nov 18, 2022
A download button with pretty cool animation

ArrowDownloadButton A download button with pretty cool animation, this is an implemention of https://dribbble.com/shots/2012292-Download-Animation Enj

Rongchan Liu 967 Oct 16, 2022
Button which is visible while user holds it. Main use case is controlling audio recording state (like in Telegram, Viber, VK).

HoldingButton Button which is visible while user holds it. Main use case is controlling audio recording state (like in Telegram, Viber, VK). Getting s

Artem Hluhovskyi 593 Nov 25, 2022
[] An Android library for an expandable button menu

ExpandableButtonMenu ExpandableButtonMenu is an Android library which implements an expandable button that can be used as a substitute of a fixed size

Lemon Labs 325 Nov 14, 2022
This is a Material Design loading button

This is a library project with a custom view that implements concept of Send Comment (https://dribbble.com/shots/1986254-Send-Comment-Shoppr) made by

DevinShine 295 Jul 31, 2022
A raised button that lowers down to 0dp of elevation

RaiflatButton A raised button that lowers down to 0dp of elevation. From my blog post: https://rubensousa.github.io/2016/10/raiflatbutton It behaves l

Rúben Sousa 328 Sep 11, 2022