• Stars
    star
    104
  • Rank 330,539 (Top 7 %)
  • Language
    Kotlin
  • License
    Apache License 2.0
  • Created about 5 years ago
  • Updated over 3 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Easily create TabLayout.Tab animations that sync with the scrolling progress of ViewPager

Tab Animation

License Release CI

Easily create TabLayout.Tab animations that sync with the scrolling progress of ViewPager.

Features

  • Animate Tab when scrolling ViewPager
  • Animate Tab after selected/unselected
  • Support ViewPager and ViewPager2
  • Create animations with DSL

Demo

Tab Indicator Bottom Navigation

Usage

Gradle

implementation 'jp.co.cyberagent.android:tab-animation:x.y.z'

Step 1

Create animation info for Tab:

val animationInfo = viewIdAnimationInfo {
  animateText<Float> {
    property(View.SCALE_X)
    startValue(0.8f)
    endValue(1f)
  }
  animateText<Float> {
    property(View.SCALE_Y)
    startValue(0.8f)
    endValue(1f)
  }
}

Step 2

Link the TabLayout, ViewPager and animation info:

// TabLayout extension function
tabLayout.setupAnimationTabWithViewPager(
  viewPager,
  animationInfo,
  SimpleTab.TEXT
)

Advanced Usage

Custom tab view

Provide the layout file id instead of SimpleTab:

tabLayout.setupAnimationTabWithViewPager(
  viewPager,
  animationInfo,
  R.layout.my_custom_tab
) { tab, view, position ->
  // bind data here
}

Custom animate target

Specify the target id in viewIdAnimationInfo:

viewIdAnimationInfo {
  animate<MyView, Float>(R.id.my_view) {
    ...
  }
}

Custom property

// Create tint property
animateIcon<ColorStateList> {
  property(
    getter = { ImageViewCompat.getImageTintList(this)!! },
    setter = { ImageViewCompat.setImageTintList(this, it) }
  )
  ...
}

Custom evaluator

Current support property types:

  • Int (ARGB)
  • Float
  • IntArray
  • FloatArray
  • PointF
  • Rect
  • ColorStateList

You must specify the evaluator if the property type you want to animate is not listed:

animate<MyView, MyType> {
  evaluator(MyEvaluator)
  ...
}

Specify KeyFrames

animateText<Float> {
  property(View.ALPHA)
  startValue(0f)
  endValue(1f)
  keyFrame(0.8f, 0.2f)
}

Lazy value

Animation info will be evaluated after the layout of Tab. You can calculate the value based on the view:

animateIcon<Float> {
  property(View.TRANSLATION_X)
  startValue { view ->
    view.width / 2f
  }
  endValue { 0f }
}

License

Copyright 2019 CyberAgent, Inc.

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.

More Repositories

1

android-gpuimage

Android filters based on OpenGL (idea from GPUImage for iOS)
Java
8,952
star
2

Sica

๐ŸฆŒ Simple Interface Core Animation. Run type-safe animation sequencially or parallelly
Swift
1,056
star
3

VideoCast-Swift

A framework for broadcasting live video
Swift
190
star
4

Chausie

Chausie provides a customizable view containers that manages navigation between pages of content. ๐Ÿฑ
Swift
178
star
5

Unio

๐Ÿ”„ KeyPath based Unidirectional Input / Output framework with RxSwift.
Swift
159
star
6

use-intersection

React Hooks for IntersectionObserver.
TypeScript
108
star
7

android-license-sample

Kotlin
86
star
8

AcknowledgementsPlist

AcknowledgementsPlist manages the licenses of libraries that depend on your iOS app.
Swift
76
star
9

Matcha

๐Ÿต Matcha is Framework that can get parameters from URL Path.
Swift
58
star
10

grpc-swift-client

๐Ÿ” Client-side library that depends on SwiftGRPC which is a library of gRPC written in Swift.
Swift
49
star
11

cujira

๐Ÿณ cujira is a command line tool that makes easy to show issue list from Jira.
Swift
48
star
12

fastlane-plugin-firebase_test_lab_android

Test your app with Firebase Test Lab with ease using fastlane for Android
Ruby
48
star
13

RxDucks

๐Ÿฆ† RxDucks is a Redux-like framework working on RxSwift.
Swift
40
star
14

Ship

๐Ÿšข Ship is a APIKit plugin that can inject common processing to requests on APIKit.
Swift
28
star
15

yarn-outdated-notifier

๐Ÿš€ Add link to CHANGELOG the result of $ yarn outdated, and notify to GitHub Issue.
JavaScript
25
star
16

Degu

๐Ÿญ Degu is debug utility for iOS, tvOS and macOS.
Swift
24
star
17

Mag

๐ŸงฒMag is Framework which wraps NSLayoutAnchor.
Swift
21
star
18

kite

A Kotlin DSL to bind Android UI components to your app state.
Kotlin
20
star
19

github-action-auto-assign

The GitHub Actions assigns reviewers & changes the status labels.
JavaScript
18
star
20

xcbt

โŒ›๏ธxcbt shows Xcode build time of a specified project.
Swift
14
star
21

intly

intly is Type-safe (TS friendly) i18n library.
TypeScript
12
star
22

ts-proto-optimize

It's CLI tool for optimize TypeScript protobuf type-definition file.
TypeScript
9
star
23

fastlane-plugin-accessibility_test

Java
8
star
24

ExtensionProperty

๐Ÿ—œThe utility interface for Associated Object
Swift
8
star
25

fastlane-plugin-snapshot_test

Ruby
7
star
26

docker-node-headless-chrome-ja

๐Ÿณ Docker image for headless Chrome.
Dockerfile
6
star
27

github-action-detect-unmergeable

The GitHub Action to detect an unmergeable pull request on changing its upstream.
Go
5
star
28

eslint-config-abema

This project is presets of eslint configurations which we used in our some internal projects.
JavaScript
4
star
29

docker-node-headless-chrome

Docker Image for Chrome headless.
Dockerfile
3
star
30

fastlane-plugin-screenshot_notifier

2
star
31

hugo-cats-studio

A simple and minimal Hugo theme.
CSS
1
star