Android AppBar: Scrolling and Animation

0
User Management System
Learn Kotlin, Retrofit, MVVM and MySQL using this all-in-one app. It is designed to be beginner friendly.

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.

  • AppBarSync
  • AppBar Anchoring

appbarsyncedfab

An Android library for getting a FAB to slide in and out in sync with a scrolling AppBarLayout.

Appearance

SimpleAppBar ComplexAppBar

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 AppBarLayout
No. 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

This Library was written By: strooooke

Toolbar Button Example

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

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 Toolbar
No. 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

This Library was written By: GautamGupta

 

(b). AppBar Animation

  • ScalingLayout

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

Buy Me a Coffee at ko-fi.com

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

This Library was written By: iammert

 

(c). NavigationToolbar

  • ScalingLayout

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


Twitter Codacy Badge Donate

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 to match_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.

:octocat: Navigation toolbar is a slide-modeled UI navigation controller made by @Ramotion
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

This Library was written By: Ramotion

(d). Toolbar Title

Examples in this section regard positioning the title in the toolbar.

  • ScalingLayout

Toolbar-Center-Title Platform

Toolbar-Center-Title is build to align title center within existing ActionBar.

CenterTitle CenterTitle2

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

This Library was written By: RaviKoradiya

 

Android MySQL Retrofit2 Multipart CRUD,Search,Pagination rating

When I was a 2nd year Software Engineering student, I buillt a now defunct online tool called Camposha(from Campus Share) using my then favorite language C#(ASP.NET) to compete OLX in my country(Kenya). The idea was to target campus students in Kenya. I got a few hundred signups but competing OLX proved too daunting. I decided to focus on my studies, learning other languages like Java,Python,Kotlin etc while meanwhile publishing tutorials at my YouTube Channel ProgrammingWizards TV which led to this site(camposha.info). Say hello or post me a suggestion: oclemmi@gmail.com . Follow me below; Github , and on my channel: ProgrammingWizards TV

We will be happy to hear your thoughts

Leave a reply

26 − = twenty two

Reset Password
Compare items
  • Total (0)
Compare
0
Shopping cart