Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: about 3 hours 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 (almost 5 years ago)
Default Branch: master
Last Pushed: 2021-02-05T10:25:32.000Z (over 3 years ago)
Last Synced: 2024-09-30T06:30:50.425Z (3 days ago)
Topics: android, android-library, android-ui, indicator, indicatorscrollview, kotlin, nestedscrollview, scrollview, skydoves
Language: Kotlin
Homepage:
Size: 507 KB
Stars: 413
Watchers: 6
Forks: 34
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

[![Maven Central](https://img.shields.io/maven-central/v/com.github.skydoves/indicatorscrollview.svg?label=Maven%20Central)](https://search.maven.org/search?q=g:%22com.github.skydoves%22%20AND%20a:%22indicatorscrollview%22)

[![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 {

        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.

```