Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/skydoves/indicatorscrollview
🧀 A dynamic scroll view that animates indicators according to its scroll position.
https://github.com/skydoves/indicatorscrollview
android android-library android-ui indicator indicatorscrollview kotlin nestedscrollview scrollview skydoves
Last synced: 7 days ago
JSON representation
🧀 A dynamic scroll view that animates indicators according to its scroll position.
- Host: GitHub
- URL: https://github.com/skydoves/indicatorscrollview
- Owner: skydoves
- License: apache-2.0
- Created: 2019-10-27T06:12:24.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2021-02-05T10:25:32.000Z (almost 4 years ago)
- Last Synced: 2024-10-22T16:46:40.205Z (16 days ago)
- Topics: android, android-library, android-ui, indicator, indicatorscrollview, kotlin, nestedscrollview, scrollview, skydoves
- Language: Kotlin
- Homepage:
- Size: 507 KB
- Stars: 414
- Watchers: 6
- Forks: 35
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# IndicatorScrollView
🧀 A dynamic way that animates indicators according to positions of a scroll view.
## Including in your project
[](https://search.maven.org/search?q=g:%22com.github.skydoves%22%20AND%20a:%22indicatorscrollview%22)
[](https://jitpack.io/#skydoves/IndicatorScrollView)
Add below codes to your **root** `build.gradle` file (not your module build.gradle file).
```gradle
allprojects {
repositories {
mavenCentral()
}
}
```
And add a dependency code to your **module**'s `build.gradle` file.
```gradle
dependencies {
implementation "com.github.skydoves:indicatorscrollview:1.0.4"
}
```
## Usage
Add following XML namespace inside your XML layout file.
```gradle
xmlns:app="http://schemas.android.com/apk/res-auto"
```
### IndicatorScrollView & indicatorView in layout
Here is a basic example of implementing `IndicatorScrollView` and `indicatorView`.
```gradle
// some complicated views..
```
### IndicatorScrollView
IndicatorScrollView is a scrollView for reacting with `IndicatorView` when scroll is changed.
It extends `NestedScrollView`. So it must have a ViewGroup child like what `LinearLayout` or `RelativeLayout`.
### IndicatorView
IndicatorView is an indicator view for reacting to `IndicatorScrollView` when the scroll is changed.
It should be used in `IndicatorScrollView`.
#### Create using builder class
We can create an instance of the `IndicatorView` using `IndicatorView.Builder` class.
```kotlin
val indicatorView = IndicatorView.Builder(this)
.setIndicatorItemPadding(16)
.setExpandingRatio(0.2f)
.setExpandingAllItemRatio(1.0f)
.build()
```
### Binding
We should bind an `IndicatorView` to `IndicatorScrollView` like bellow.
```kotlin
indicatorScrollView.bindIndicatorView(indicatorView)
```
### IndicatorItem
IndicatorItem is an attribute item data for composing the `IndicatorView`.
We can create an instance of the `IndicatorItem` using the `IndicatorItem.Builder` class.
```kotlin
val myIndicatorItem =
IndicatorItem.Builder(section1) // section1 is the target view for the start of expanding.
.setItemColor(myColor) // sets the background color of the indicator item using value.
.setItemColorResource(R.color.colorPrimary) // sets the background color of the item using resource.
.setItemIcon(myIcon) // sets the icon of the indicator item using drawable.
.setItemIconResource(R.drawable.ic_heart) // sets the icon of the indicator item using resource.
.setItemDuration(400) // sets the expanding and collapsing duration.
.setItemCornerRadius(40f) // sets the corner radius of the indicator item.
.setItemIconTopPadding(12) // sets the padding top value between the indicator items.
.setExpandedSize(600) // customizes the fully expanded height size.
.build()
```
We can create it using kotlin dsl.
```kotlin
val myIndicatorItem = indicatorItem(section1) {
setItemColor(myColor) // sets the background color of the indicator item using value.
setItemColorResource(R.color.colorPrimary) // sets the background color of the item using resource.
setItemIcon(myIcon) // sets the icon of the indicator item using drawable.
setItemIconResource(R.drawable.ic_heart) // sets the icon of the indicator item using resource.
setItemDuration(400) // sets the expanding and collapsing duration.
setItemCornerRadius(40f) // sets the corner radius of the indicator item.
setItemIconTopPadding(12) // sets the padding top value between the indicator items.
setExpandedSize(600) // customizes the fully expanded height size.
}
```
And add the instance of the `IndicatorItem` to `IndicatorView`.
```kotlin
indicatorView.addIndicatorItem(myIndicatorItem)
// or we can use plus operator.
indicatorView + myIndicatorItem
```
### IndicatorAnimation
We can customize the expanding and collapsing animation.
```kotlin
IndicatorAnimation.NORMAL
IndicatorAnimation.ACCELERATE
IndicatorAnimation.BOUNCE
```
NORMAL | ACCELERATE | BOUNCE
| :---------------: | :---------------: | :---------------: |
| 
| 
| 
## IndicatorView Attributes
Attributes | Type | Default | Description
--- | --- | --- | ---
expandingRatio | Float | 0.2 | expands when an indicator item reaches the display's height ratio.
expandingAllItemRatio | Float | 0.9 | expands all items when scroll reaches a specific position ratio.
itemPadding | Dimension | 6dp | padding size between indicator items.
## Find this library useful? :heart:
Support it by joining __[stargazers](https://github.com/skydoves/IndicatorScrollView/stargazers)__ for this repository. :star:
And __[follow](https://github.com/skydoves)__ me for my next creations! 🤩
# License
```xml
Copyright 2019 skydoves (Jaewoong Eum)
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.
```