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.