{"id":15626360,"url":"https://github.com/skydoves/indicatorscrollview","last_synced_at":"2025-04-04T21:09:22.612Z","repository":{"id":41453081,"uuid":"217812993","full_name":"skydoves/IndicatorScrollView","owner":"skydoves","description":"🧀 A dynamic scroll view that animates indicators according to its scroll position.","archived":false,"fork":false,"pushed_at":"2021-02-05T10:25:32.000Z","size":519,"stargazers_count":415,"open_issues_count":0,"forks_count":34,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-28T20:08:35.465Z","etag":null,"topics":["android","android-library","android-ui","indicator","indicatorscrollview","kotlin","nestedscrollview","scrollview","skydoves"],"latest_commit_sha":null,"homepage":"","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/skydoves.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null},"funding":{"github":"skydoves","custom":["https://www.paypal.me/skydoves","https://www.buymeacoffee.com/skydoves"]}},"created_at":"2019-10-27T06:12:24.000Z","updated_at":"2025-02-15T02:49:30.000Z","dependencies_parsed_at":"2022-09-26T21:50:15.155Z","dependency_job_id":null,"html_url":"https://github.com/skydoves/IndicatorScrollView","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skydoves%2FIndicatorScrollView","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skydoves%2FIndicatorScrollView/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skydoves%2FIndicatorScrollView/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skydoves%2FIndicatorScrollView/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/skydoves","download_url":"https://codeload.github.com/skydoves/IndicatorScrollView/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247249530,"owners_count":20908212,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","android-library","android-ui","indicator","indicatorscrollview","kotlin","nestedscrollview","scrollview","skydoves"],"created_at":"2024-10-03T10:12:05.739Z","updated_at":"2025-04-04T21:09:22.591Z","avatar_url":"https://github.com/skydoves.png","language":"Kotlin","readme":"# IndicatorScrollView\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://opensource.org/licenses/Apache-2.0\"\u003e\u003cimg alt=\"License\" src=\"https://img.shields.io/badge/License-Apache%202.0-blue.svg\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://android-arsenal.com/api?level=16\"\u003e\u003cimg alt=\"API\" src=\"https://img.shields.io/badge/API-16%2B-brightgreen.svg?style=flat\"/\u003e\u003c/a\u003e\n    \u003ca href=\"https://travis-ci.com/skydoves/IndicatorScrollView\"\u003e\u003cimg alt=\"Build Status\" src=\"https://travis-ci.com/skydoves/IndicatorScrollView.svg\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://skydoves.github.io/libraries/indicatorscrollview/javadoc/indicatorscrollview/com.skydoves.indicatorscrollview/index.html\"\u003e\u003cimg alt=\"Javadoc\" src=\"https://img.shields.io/badge/Javadoc-IndicatorScrollView-yellow\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n🧀 A dynamic way that animates indicators according to positions of a scroll view.\u003cbr\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/24237865/67630703-46b9a100-f8cf-11e9-8731-d16d15794f44.gif\" width=\"32%\"/\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/24237865/67662841-8f448d80-f9a7-11e9-96ad-e66018c5479e.gif\" width=\"32%\"/\u003e\n\u003c/p\u003e\n\n## Including in your project\n[![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)\n[![JitPack](https://jitpack.io/v/skydoves/IndicatorScrollView.svg)](https://jitpack.io/#skydoves/IndicatorScrollView) \u003cbr\u003e\nAdd below codes to your **root** `build.gradle` file (not your module build.gradle file).\n```gradle\nallprojects {\n    repositories {\n        mavenCentral()\n    }\n}\n```\nAnd add a dependency code to your **module**'s `build.gradle` file.\n```gradle\ndependencies {\n    implementation \"com.github.skydoves:indicatorscrollview:1.0.4\"\n}\n```\n\n## Usage\nAdd following XML namespace inside your XML layout file.\n\n```gradle\nxmlns:app=\"http://schemas.android.com/apk/res-auto\"\n```\n\n### IndicatorScrollView \u0026 indicatorView in layout\nHere is a basic example of implementing `IndicatorScrollView` and `indicatorView`.\n\n```gradle\n\u003ccom.skydoves.indicatorscrollview.IndicatorScrollView \n  xmlns:android=\"http://schemas.android.com/apk/res/android\"\n  xmlns:app=\"http://schemas.android.com/apk/res-auto\"\n  android:id=\"@+id/indicatorScrollView\"\n  android:layout_width=\"match_parent\"\n  android:layout_height=\"wrap_content\"\u003e\n\n  \u003cLinearLayout\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"wrap_content\"\n    android:orientation=\"horizontal\"\u003e\n\n    \u003ccom.skydoves.indicatorscrollview.IndicatorView\n      android:id=\"@+id/indicatorView\"\n      android:layout_width=\"60dp\"\n      android:layout_height=\"match_parent\"\n      android:background=\"@color/background800\"\n      android:paddingLeft=\"6dp\"\n      android:paddingRight=\"6dp\"\n      app:indicator_expandingRatio=\"0.2\" // expands when an indicator item reaches the display's height ratio.\n      app:indicator_expandingAllItemRatio=\"0.9\" // expands all items when scroll reaches a specific position ratio.\n      app:indicator_itemPadding=\"6dp\" // padding size between indicator items.\n    /\u003e\n      \n    \u003cLinearLayout\n      android:layout_width=\"match_parent\"\n      android:layout_height=\"match_parent\"\n      android:orientation=\"vertical\"\n      android:paddingBottom=\"40dp\"\u003e\n   \n      // some complicated views..\n   \n      \u003cLinearLayout // This layout will be used for composing indicator.\n        android:id=\"@+id/section1\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"wrap_content\"/\u003e\n        \n      \u003cLinearLayout  // This layout will be used for composing indicator.\n        android:id=\"@+id/section2\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"wrap_content\"        \n   \n    \u003c/LinearLayout/\u003e\n  \u003c/LinearLayout\u003e\n\u003c/com.skydoves.indicatorscrollview.IndicatorScrollView\u003e\n```\n\n### IndicatorScrollView\nIndicatorScrollView is a scrollView for reacting with `IndicatorView` when scroll is changed.\u003c/br\u003e\nIt extends `NestedScrollView`. So it must have a ViewGroup child like what `LinearLayout` or `RelativeLayout`.\n\n### IndicatorView\nIndicatorView is an indicator view for reacting to `IndicatorScrollView` when the scroll is changed.\u003c/br\u003e\nIt should be used in `IndicatorScrollView`.\n\n#### Create using builder class\nWe can create an instance of the `IndicatorView` using `IndicatorView.Builder` class.\n```kotlin\nval indicatorView = IndicatorView.Builder(this)\n  .setIndicatorItemPadding(16)\n  .setExpandingRatio(0.2f)\n  .setExpandingAllItemRatio(1.0f)\n  .build()\n```\n\n### Binding\nWe should bind an `IndicatorView` to `IndicatorScrollView` like bellow.\n```kotlin\nindicatorScrollView.bindIndicatorView(indicatorView)\n```\n\n### IndicatorItem\nIndicatorItem is an attribute item data for composing the `IndicatorView`.\u003cbr\u003e\nWe can create an instance of the `IndicatorItem` using the `IndicatorItem.Builder` class.\n\n```kotlin\nval myIndicatorItem = \n    IndicatorItem.Builder(section1) // section1 is the target view for the start of expanding.\n    .setItemColor(myColor) // sets the background color of the indicator item using value.\n    .setItemColorResource(R.color.colorPrimary) // sets the background color of the item using resource.\n    .setItemIcon(myIcon) // sets the icon of the indicator item using drawable.\n    .setItemIconResource(R.drawable.ic_heart) // sets the icon of the indicator item using resource.\n    .setItemDuration(400) // sets the expanding and collapsing duration.\n    .setItemCornerRadius(40f) // sets the corner radius of the indicator item.\n    .setItemIconTopPadding(12) // sets the padding top value between the indicator items.\n    .setExpandedSize(600) // customizes the fully expanded height size.\n    .build()\n```\nWe can create it using kotlin dsl.\n```kotlin\nval myIndicatorItem = indicatorItem(section1) {\n  setItemColor(myColor) // sets the background color of the indicator item using value.\n  setItemColorResource(R.color.colorPrimary) // sets the background color of the item using resource.\n  setItemIcon(myIcon) // sets the icon of the indicator item using drawable.\n  setItemIconResource(R.drawable.ic_heart) // sets the icon of the indicator item using resource.\n  setItemDuration(400) // sets the expanding and collapsing duration.\n  setItemCornerRadius(40f) // sets the corner radius of the indicator item.\n  setItemIconTopPadding(12) // sets the padding top value between the indicator items.\n  setExpandedSize(600) // customizes the fully expanded height size.\n}\n```\n\nAnd add the instance of the `IndicatorItem` to `IndicatorView`.\n\n```kotlin\nindicatorView.addIndicatorItem(myIndicatorItem)\n\n// or we can use plus operator.\nindicatorView + myIndicatorItem\n```\n\n### IndicatorAnimation\nWe can customize the expanding and collapsing animation.\u003cbr\u003e\n```kotlin\nIndicatorAnimation.NORMAL\nIndicatorAnimation.ACCELERATE\nIndicatorAnimation.BOUNCE\n```\n\nNORMAL | ACCELERATE | BOUNCE\n| :---------------: | :---------------: | :---------------: |\n| \u003cimg src=\"https://user-images.githubusercontent.com/24237865/67663681-69b88380-f9a9-11e9-813f-db695234ee74.gif\" align=\"center\" width=\"100%\"/\u003e | \u003cimg src=\"https://user-images.githubusercontent.com/24237865/67663683-69b88380-f9a9-11e9-9490-8f8d87a82cd0.gif\" align=\"center\" width=\"100%\"/\u003e | \u003cimg src=\"https://user-images.githubusercontent.com/24237865/67663684-69b88380-f9a9-11e9-9f0e-97254f44b41d.gif\" align=\"center\" width=\"100%\"/\u003e\n\n## IndicatorView Attributes\nAttributes | Type | Default | Description\n--- | --- | --- | ---\nexpandingRatio | Float | 0.2 | expands when an indicator item reaches the display's height ratio.\nexpandingAllItemRatio | Float | 0.9 | expands all items when scroll reaches a specific position ratio.\nitemPadding | Dimension | 6dp | padding size between indicator items.\n\n## Find this library useful? :heart:\nSupport it by joining __[stargazers](https://github.com/skydoves/IndicatorScrollView/stargazers)__ for this repository. :star:\u003cbr\u003e\nAnd __[follow](https://github.com/skydoves)__ me for my next creations! 🤩\n\n# License\n```xml\nCopyright 2019 skydoves (Jaewoong Eum)\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n   http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n```\n\n\n","funding_links":["https://github.com/sponsors/skydoves","https://www.paypal.me/skydoves","https://www.buymeacoffee.com/skydoves"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskydoves%2Findicatorscrollview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fskydoves%2Findicatorscrollview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskydoves%2Findicatorscrollview/lists"}