# IndicatorScrollView **Repository Path**: bubunuo/IndicatorScrollView ## Basic Information - **Project Name**: IndicatorScrollView - **Description**: 🧀 Animates indicators dynamically when the position of the scrollView is changed. - **Primary Language**: Unknown - **License**: Apache-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2020-08-12 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # IndicatorScrollView

License API Build Status Javadoc

🧀 Reacts dynamically with an indicator when the scroll is changed.

## Including in your project [![Download](https://api.bintray.com/packages/devmagician/maven/indicatorscrollview/images/download.svg) ](https://bintray.com/devmagician/maven/indicatorscrollview/_latestVersion) [![JitPack](https://jitpack.io/v/skydoves/IndicatorScrollView.svg)](https://jitpack.io/#skydoves/IndicatorScrollView)
Add below codes to your **root** `build.gradle` file (not your module build.gradle file). ```gradle allprojects { repositories { jcenter() } } ``` And add a dependency code to your **module**'s `build.gradle` file. ```gradle dependencies { implementation "com.github.skydoves:indicatorscrollview:1.0.2" } ``` ## 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. ```