
A modern activity design is to use an appbar with the coordinatorlayout. With this combination we can further modernize our application by including animations and synchronizing the scroll with the floating action button. Let's look at some of these libraries and examples.
(a). AppBar with FAB
Syncing AppBar with Floating Action Button.
appbarsyncedfab
An Android library for getting a FAB to slide in and out in sync with a scrolling AppBarLayout.
Appearance


Usage
Add as gradle dependency via jitpack.io: Add the JitPack repository in your root build.gradle at the end of repositories:
allprojects {
repositories {
...
maven { url "https://jitpack.io" }
}
}
Add the dependency in your app build.gradle file:
dependencies {
implementation 'com.github.strooooke:appbarsyncedfab:v0.5'
}
Add either the behavior to your FAB in XML
<androidx.coordinatorlayout.widget.CoordinatorLayout
...
>
<com.google.android.material.appbar.AppBarLayout
...
>
</com.google.android.material.appbar.AppBarLayoutt>
...
<com.google.android.material.floatingactionbutton.FloatingActionButton
...
app:layout_behavior="@string/appbarsyncedfab_fab_behavior"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
You can also wire up the listener, the CoordinatorLayout, the AppBarLayout and the FAB by hand:
CoordinatorLayout coordinatorLayout = findViewById(R.id.coordinatorLayout);
AppBarLayout appBarLayout = findViewById(R.id.app_bar);
FloatingActionButton fab = findViewById(R.id.fab);
FabOffsetter fabOffsetter = new FabOffsetter(coordinatorLayout, fab);
appBarLayout.addOnOffsetChangedListener(fabOffsetter);
This way is not recommended; you will lose proper interaction with the snackbar.
License
Copyright 2016-2019 Juliane Lehmann <jl@lambdasoup.com>
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.
An Android library for getting a FAB to slide in and out in sync with a scrolling AppBarLayoutNo. | Key | Value |
---|---|---|
1. | Created | 2016-06-06T08:52:35Z |
2. | Updated | 2020-02-05T19:16:52Z |
3. | Stars | 26 |
5. | Forks | 6 |
6. | Language | Java |
7. | Lib Author | strooooke |

Android Toolbar Button Library
The problem with anchoring a floating action button to a collapsing toolbar is that the CTA gets hidden on scroll. This library allows you to artificially add a button in the toolbar with an animation as soon as the FAB hides itself.
Works with Android 4.0+ (minSdkVersion 14
).
Gradle
dependencies {
...
compile 'com.android.support:design:25.3.1'
compile 'am.gaut.android.toolbarbutton:toolbarbutton:0.1.0'
}
Usage
Add this at the same level where your floating action button is defined in the activity. Example.
<am.gaut.android.toolbarbutton.ToolbarButton
android:id="@+id/btn_toolbar_checkin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="?attr/borderlessButtonStyle"
android:background="@drawable/selector_toolbar_button"
android:textAppearance="@style/TextAppearance.AppCompat.Widget.Button.Inverse"
android:paddingLeft="@dimen/toolbar_button_padding"
android:paddingRight="@dimen/toolbar_button_padding"
android:drawablePadding="@dimen/toolbar_button_padding"
android:drawableLeft="@drawable/ic_message_white_18dp"
android:drawableStart="@drawable/ic_message_white_18dp"
android:text="@string/checkin"
app:layout_anchor="@id/appbar"
app:layout_anchorGravity="right|end" />
You can treat the view as a Button. Properties in the snippet produce a similar result as in the screen capture.
@dimen/toolbar_button_padding
(16dp), @drawable/selector_toolbar_button
(see,
v21)
are supplied by the library.
@drawable/ic_message_white_18dp
is a material icon.
?attr/borderlessButtonStyle
and @style/TextAppearance.AppCompat.Widget.Button.Inverse
come from
the design support library.
Credits
- Gordon Evans for concept
- Awesome folks at Wirkn (where the idea originated from), h/t Joseph Voung
- Cheesesquare by Chris Banes for the material design demo app
Troubleshooting
Q. The button hides on scroll. Why is this happening?
The default elevation of 6dp is getting overridden, making it compete with the elevation of the
appbar. Try adding android:elevation="6dp"
property on the view.
Q. Does this work for Android versions before 4.0?
It can be made to work for previous Android versions as well, using different implementation classes like the Floating Action Button. If you take up the initiative, please submit a PR.
License
Copyright 2016 Gautam Gupta
Licensed to the Apache Software Foundation (ASF) under one or more contributor
license agreements. See the NOTICE file distributed with this work for
additional information regarding copyright ownership. The ASF licenses this
file to you 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.
FAB to Toolbar Button library for Android Material Collapsing ToolbarNo. | Key | Value |
---|---|---|
1. | Created | 2016-04-11T05:12:35Z |
2. | Updated | 2021-02-09T03:14:13Z |
3. | Stars | 300 |
5. | Forks | 48 |
6. | Language | Java |
7. | Lib Author | GautamGupta |
(b). AppBar Animation
ScalingLayout
Scale your layout on user interaction. Live Demo
Motivated by layout in Blinkist app and search bar in Spotify app.

Demo

Fab Demo

Spotify Search Demo

Usage
<iammert.com.view.scalinglib.ScalingLayout
android:id="@+id/scalingLayout"
android:layout_width="300dp"
android:layout_height="48dp"
app:radiusFactor="1">
<!-- Your content here -->
</iammert.com.view.scalinglib.ScalingLayout>
scalingLayout.expand(); //use this if you want to expand all
scalingLayout.collapse(); //user this if you want to collapse view to initial state.
scalingLayout.setProgress(float progress); //1 is fully expanded, 0 is initial state.
Listener
scalingLayout.setListener(new ScalingLayoutListener() {
@Override
public void onCollapsed() {}
@Override
public void onExpanded() {}
@Override
public void onProgress(float progress) {}
});
Attribute
app:radiusFactor
value is between 0 and 1 float value. 1 = full rounded corner. 0 = no rounded corner.
ScalingLayoutBehaviour

<iammert.com.view.scalinglib.ScalingLayout
android:id="@+id/scalingLayout"
android:layout_width="300dp"
android:layout_height="48dp"
app:radiusFactor="1"
app:layout_behavior="iammert.com.view.scalinglib.ScalingLayoutBehavior">
<!-- Your content here -->
</iammert.com.view.scalinglib.ScalingLayout>
Download
maven { url 'https://jitpack.io' }
dependencies {
compile 'com.github.iammert:ScalingLayout:1.2.1'
}
License
Copyright 2017 Mert Şimşek.
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.
With Scaling Layout scale your layout on user interaction.No. | Key | Value |
---|---|---|
1. | Created | 2017-10-01T12:28:34Z |
2. | Updated | 2021-03-08T13:56:50Z |
3. | Stars | 3243 |
5. | Forks | 326 |
6. | Language | Java |
7. | Lib Author | iammert |
(c). NavigationToolbar

NAVIGATION TOOLBAR
Navigation toolbar is a Kotlin slide-modeled UI navigation controller.
We specialize in the designing and coding of custom UI for Mobile Apps and Websites.

Stay tuned for the latest updates:

Inspired by Aurélien Salomon shot
Requirements
- Android 5.0 Lollipop (API lvl 21) or greater
- Your favorite IDE
Installation
Just download the package from here and add it to your project classpath, or just use the maven repo:
Gradle:
implementation 'com.ramotion.navigationtoolbar:navigation-toolbar:0.1.3'
SBT:
libraryDependencies += "com.ramotion.navigationtoolbar" % "navitagiton-toolbar" % "0.1.3"
Maven:
<dependency>
<groupId>com.ramotion.navigationtoolbar</groupId>
<artifactId>navigation-toolbar</artifactId>
<version>0.1.3</version>
<type>aar</type>
</dependency>
Basic usage
NavigationToolBarLayout is the successor to CoordinatorLayout. Therefore, NavigationToolBarLayout must be the root element of your layout. Displayed content must be inside NavigationToolBarLayout, as shown below:
<com.ramotion.navigationtoolbar.NavigationToolBarLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="@layout/content_layout"/>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="@id/com_ramotion_app_bar"
app:layout_anchorGravity="bottom|end"
app:srcCompat="@android:drawable/ic_dialog_email" />
</com.ramotion.navigationtoolbar.NavigationToolBarLayout>
Next, you must specify an adapter for NavigationToolBarLayout, from which NavigationToolBarLayout will receive the displayed View.
NavigationToolBarLayout contains android.support.v7.widget.Toolbar
and
android.support.design.widget.AppBarLayout
, access to which can be obtained through
the appropriate identifiers:
@id/com_ramotion_toolbar <!-- identifier of Toolbar -->
@id/com_ramotion_app_bar <!-- identifier of AppBarLayout -->
or through the appropriate properties of the NavigationToolBarLayout class:
val toolBar: Toolbar
val appBarLayout: AppBarLayout
Here are the attributes you can specify through XML or related setters:
headerOnScreenItemCount
- The maximum number of simultaneously displayed cards (items) in vertical orientation.headerCollapsingBySelectDuration
- Collapsing animation duration of header (HeaderLayout), when you click on the card in vertical orientation.headerTopBorderAtSystemBar
- Align the top card on the systembar or not.headerVerticalItemWidth
- Specifies the width of the vertical card. It can be equal tomatch_parent
, then the width of the card will be equal to the width of NavigationToolBarLayout.headerVerticalGravity
- Specifies the alignment of the vertical card. Can take the values: left, center, or right.
🗂 Check this library on other language:

📄 License
Navigation Toolbar Android is released under the MIT license. See LICENSE for details.
This library is a part of a selection of our best UI open-source projects
If you use the open-source library in your project, please make sure to credit and backlink to www.ramotion.com
📱 Get the Showroom App for Android to give it a try
Try this UI component and more like this in our Android app. Contact us if interested.


No. | Key | Value |
---|---|---|
1. | Created | 2017-12-29T07:55:06Z |
2. | Updated | 2021-03-11T18:46:54Z |
3. | Stars | 732 |
5. | Forks | 152 |
6. | Language | Kotlin |
7. | Lib Author | Ramotion |
(d). Toolbar Title
Examples in this section regard positioning the title in the toolbar.
Toolbar-Center-Title 

Toolbar-Center-Title is build to align title center within existing ActionBar.
Dependency
Add this in your project level build.gradle
file (not your module build.gradle
file):
allprojects {
repositories {
maven { url "https://jitpack.io" } // add this line
}
}
Then, add the library to your module build.gradle
dependencies {
compile 'com.github.RaviKoradiya:Toolbar-Center-Title:1.0.3'
}
Usage
With Data Binding...
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay"
bind:centerTitle='@{true}' />
Or
CenterTitle.centerTitle(toolbar,true);
That's it!
Java and Kotlin Support...
License
Copyright 2018 Ravi Koradiya
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.
A Library for align title on ActionBar.No. | Key | Value |
---|---|---|
1. | Created | 2018-01-09T12:05:51Z |
2. | Updated | 2020-12-29T21:29:32Z |
3. | Stars | 17 |
5. | Forks | 3 |
6. | Language | Kotlin |
7. | Lib Author | RaviKoradiya |