{"id":13644213,"url":"https://github.com/noties/Scrollable","last_synced_at":"2025-04-21T07:30:31.117Z","repository":{"id":29535149,"uuid":"33073963","full_name":"noties/Scrollable","owner":"noties","description":"Android scrollable tabs","archived":false,"fork":false,"pushed_at":"2024-03-15T19:22:49.000Z","size":5368,"stargazers_count":1238,"open_issues_count":3,"forks_count":229,"subscribers_count":52,"default_branch":"master","last_synced_at":"2024-10-29T21:03:14.447Z","etag":null,"topics":["android","scrollable","scrolling-tabs","ui"],"latest_commit_sha":null,"homepage":"","language":"Java","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/noties.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-03-29T13:30:34.000Z","updated_at":"2024-10-07T05:31:21.000Z","dependencies_parsed_at":"2024-11-09T16:33:36.368Z","dependency_job_id":"35bd8c04-6427-41ee-acd7-06ba287ddd44","html_url":"https://github.com/noties/Scrollable","commit_stats":{"total_commits":70,"total_committers":5,"mean_commits":14.0,"dds":"0.41428571428571426","last_synced_commit":"e93213f04b41870b282dc810db70e29f7d225d5d"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/noties%2FScrollable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/noties%2FScrollable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/noties%2FScrollable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/noties%2FScrollable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/noties","download_url":"https://codeload.github.com/noties/Scrollable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250014532,"owners_count":21360968,"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","scrollable","scrolling-tabs","ui"],"created_at":"2024-08-02T01:01:59.226Z","updated_at":"2025-04-21T07:30:29.364Z","avatar_url":"https://github.com/noties.png","language":"Java","readme":"![logo](art/scrollable_big_logo.png)\n\n[![Maven Central](https://img.shields.io/maven-central/v/ru.noties/scrollable.svg)](http://search.maven.org/#search|ga|1|g%3A%22ru.noties%22%20AND%20a%3A%22scrollable%22)\n\n---\n\n**Scrollable** is a library for an Android application to implement various scrolling technicks. It's all started with **scrolling tabs**, but now much more can be done with it. Scrollable supports all scrolling and non-scrolling views, including: **RecyclerView**, **ScrollView**, **ListView**, **WebView**, etc and any combination of those inside a **ViewPager**. Library is designed to let developer implement desired effect without imposing one solution. Library is small and has no dependencies.\n\n## Preview\n\nAll GIFs here are taken from `sample` application module.\n\n\n\u003cimg src=\"art/scrollable_colorful.gif\" width=\"30%\" alt=\"colorful_sample\"/\u003e \u003cimg src=\"art/scrollable_custom_overscroll.gif\" width=\"30%\" alt=\"custom_overscroll_sample\"/\u003e \u003cimg src=\"art/scrollable_dialog.gif\" width=\"30%\" alt=\"dialog_sample\"/\u003e \n\n\u003csup\u003e*Serving suggestion\u003c/sup\u003e\n\n## Installation\n```groovy\ncompile 'ru.noties:scrollable:1.3.0'\n```\n\n## Usage\n\nTo start using this library `ScrollableLayout` must be aded to your layout.\n\n```xml\n\u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e\n\u003cru.noties.scrollable.ScrollableLayout\n    android:id=\"@+id/scrollable_layout\"\n    xmlns:android=\"http://schemas.android.com/apk/res/android\"\n    xmlns:app=\"http://schemas.android.com/apk/res-auto\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    app:scrollable_autoMaxScroll=\"true\"\n    app:scrollable_defaultCloseUp=\"true\"\u003e\n\n    \u003cru.noties.scrollable.sample.SampleHeaderView\n        style=\"@style/HeaderStyle\"\n        app:shv_title=\"@string/sample_title_fragment_pager\"/\u003e\n\n    \u003cru.noties.scrollable.sample.TabsLayout\n        android:id=\"@+id/tabs\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"@dimen/tabs_height\"\n        android:background=\"@color/md_teal_500\"/\u003e\n\n    \u003candroid.support.v4.view.ViewPager\n        android:id=\"@+id/view_pager\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"match_parent\"\n        android:layout_marginTop=\"@dimen/tabs_height\"/\u003e\n\n\u003c/ru.noties.scrollable.ScrollableLayout\u003e\n```\n\nPlease note, that `ScrollableLayout` positions its children like vertical `LinearLayout`, but measures them like a `FrameLayout`. It is crucial that scrolling content holder dimentions must be set to `match_parent` (minus possible *sticky* view that should be extracted from it, for example, by specifying `android:layoutMarginTop=\"height_of_sticky_view\"`).\n\nNext, `ScrollableLayout` must be initialized in code:\n\n```java\nfinal ScrollableLayout scrollableLayout = findView(R.id.scrollable_layout);\n\n// this listener is absolute minimum that is required for `ScrollableLayout` to function\nscrollableLayout.setCanScrollVerticallyDelegate(new CanScrollVerticallyDelegate() {\n    @Override\n    public boolean canScrollVertically(int direction) {\n        // Obtain a View that is a scroll container (RecyclerView, ListView, ScrollView, WebView, etc)\n        // and call its `canScrollVertically(int) method.\n        // Please note, that if `ViewPager is used, currently displayed View must be obtained\n        // because `ViewPager` doesn't delegate `canScrollVertically` method calls to it's children\n        final View view = getCurrentView();\n        return view.canScrollVertically(direction);\n    }\n});\n```\n\n\n### Draggable View\n\nThis is a View, that can be *dragged* to change `ScrollableLayout` scroll state. For example, to expand header if tabs are dragged. To add this simply call:\n```java\n// Please note that `tabsLayout` must be a child (direct or indirect) of a ScrollableLayout\nscrollableLayout.setDraggableView(tabsLayout);\n```\n\n\n### OnScrollChangedListener\n\nIn order to apply custom logic for different scroll state of a `ScrollableLayout` `OnScrollChangedListener` can be used (to change color of a header, create parallax effect, sticky tabs, etc)\n\n```java\nscrollableLayout.addOnScrollChangedListener(new OnScrollChangedListener() {\n    @Override\n    public void onScrollChanged(int y, int oldY, int maxY) {\n\n        // `ratio` of current scroll state (from 0.0 to 1.0)\n        // 0.0 - means fully expanded\n        // 1.0 - means fully collapsed\n        final float ratio = (float) y / maxY;\n\n        // for example, we can hide header, if we are collapsed\n        // and show it when we are expanded (plus intermediate state)\n        header.setAlpha(1.F - ratio);\n\n        // to create a `sticky` effect for tabs this calculation can be used:\n        final float tabsTranslationY;\n        if (y \u003c maxY) {\n            // natural position\n            tabsTranslationY = .0F;\n        } else {\n            // sticky position\n            tabsTranslationY = y - maxY;\n        }\n        tabsLayout.setTranslationY(tabsTranslationY);\n    }\n});\n```\n\n\n### OnFlingOverListener\n\nTo *continue* a fling event for a scrolling container `OnFlingOverListener` can be used.\n\n```java\nscrollableLayout.setOnFlingOverListener(new OnFlingOverListener() {\n    @Override\n    public void onFlingOver(int y, long duration) {\n        recyclerView.smoothScrollBy(0, y);\n    }\n});\n```\n\n\n### OverScrollListener\n\nTo create custom *overscroll* handler (for example, like in `SwipeRefreshLayout` for loading, or to zoom-in header when cannot scroll further) `OverScrollListener` can be used\n\n```java\nscrollableLayout.setOverScrollListener(new OverScrollListener() {\n    @Override\n    public void onOverScrolled(ScrollableLayout layout, int overScrollY) {\n\n    }\n\n    @Override\n    public boolean hasOverScroll(ScrollableLayout layout, int overScrollY) {\n        return false;\n    }\n\n    @Override\n    public void onCancelled(ScrollableLayout layout) {\n\n    }\n\n    @Override\n    public void clear() {\n\n    }\n});\n```\n\n`OverScrollListener` gives you full controll of overscrolling, but it implies a lot of handling. For a simple case `OverScrollListenerBase` can be used\n\n```java\nscrollableLayout.setOverScrollListener(new OverScrollListenerBase() {\n    @Override\n    protected void onRatioChanged(ScrollableLayout layout, float ratio) {\n\n    }\n});\n```\n\nFor example, this is `onRatioChanged` method from `ZoomInHeaderOverScrollListener` from `sample` application:\n```java\n@Override\nprotected void onRatioChanged(ScrollableLayout layout, float ratio) {\n    final float scale = 1.F + (.33F * ratio);\n    mHeader.setScaleX(scale);\n    mHeader.setScaleY(scale);\n\n    final int headerHeight = mHeader.getHeight();\n    mContent.setTranslationY(((headerHeight * scale) - headerHeight) / 2.F);\n}\n```\n\n### Scrolling Header\n\nThere is support for scrolling header. This means that if header can scroll, it will scroll first to the final position and only after that scroll event will be redirected. There are no extra steps to enable this feature if scrolling header is the first view in `ScrollableLayout`. Otherwise a XML attribute `app:scrollable_scrollingHeaderId` can be used, it accepts an id of a view.\n\n\n## Various customizations\n\n### CloseUpAlgorithm\n\nIn order to *close-up* `ScrollableLayout` (do not leave in intermediate state, allow only two scrolling states: collapsed \u0026 expanded, etc), `CloseUpAlgorithm` can be used. Its signature is as follows:\n\n```java\npublic interface CloseUpAlgorithm {\n\n    int getFlingFinalY(ScrollableLayout layout, boolean isScrollingBottom, int nowY, int suggestedY, int maxY);\n\n    int getIdleFinalY(ScrollableLayout layout, int nowY, int maxY);\n}\n```\n\nAnd usage is like this:\n\n```java\nscrollableLayout.setCloseUpAlgorithm(new MyCloseUpAlgorithm());\n```\n\nLibrary provides a `DefaultCloseUpAlgorithm` for a most common usage (to allow `ScrollableLayout` only 2 scrolling states: collapsed and expanded). It can be set via java code: `scrollableLayout.setCloseUpAlgorithm(new DefaultCloseUpAlgorithm())`  and via XML with `app:scrollable_defaultCloseUp=\"true\"`.\n\nAlso, there is an option to set duration after which CloseUpAlgorithm should be evaluated (idle state - no touch events). Java: `scrollableLayout.setConsiderIdleMillis(100L)` and XML: `app:scrollable_considerIdleMillis=\"100\"`. `100L` is the default value and may be omitted.\n\nIf *close-up* need to have different animation times, `CloseUpIdleAnimationTime` can be used. Its signature:\n\n```java\npublic interface CloseUpIdleAnimationTime {\n    long compute(ScrollableLayout layout, int nowY, int endY, int maxY);\n}\n```\nIf animation time is constant (do not depend on current scroll state), `SimpleCloseUpIdleAnimationTime` can be used. Java: `scrollableLayout.setCloseUpIdleAnimationTime(new SimpleCloseUpIdleAnimationTime(200L))`, XML: `app:app:scrollable_closeUpAnimationMillis=\"200\"`. `200L` is default value and can be omitted.\n\nIf one want to get control of `ValueAnimator` that is used to animate between scroll states, `CloseUpAnimatorConfigurator` can be used. Its signature:\n\n```java\npublic interface CloseUpAnimatorConfigurator {\n    // when called will already have a duration set\n    void configure(ValueAnimator animator);\n}\n```\n\nIf only `Interpolator` must be configured, a `InterpolatorCloseUpAnimatorConfigurator` can be used. Java: `scrollableLayout.setCloseAnimatorConfigurator(new InterpolatorCloseUpAnimatorConfigurator(interpolator))`, XML: `app:scrollable_closeUpAnimatorInterpolator=\"app:scrollable_closeUpAnimatorInterpolator=\"@android:interpolator/decelerate_cubic\"`\n\n\n### Auto Max Scroll\n\nIf you layout has a header with dynamic height, or it's height should be obtained at runtime, there is an option to automatically obtain it. Java: `scrollableLayout.setAutoMaxScroll(true)`, XML: `app:scrollable_autoMaxScroll=\"true\"`. With this option there is no need manually set `maxScrollY`. Please note, that if not specified explicitly this option will be set to `true` if `maxScroll` option is not set (equals `0`). Also, if at runtime called `scrollableLayout.setMaxScroll(int)`, `autoMaxScroll` if set to `true`, will be set to `false`.\n\nBy default the first View will be used to calculate height, but if different one must be used, there is an option to specify `id` of this view. XML: `app:scrollable_autoMaxScrollViewId=\"@id/header\"`\n\n\n### Disable Handling\n\nIf `ScrollableLayout` must not evaluate its scrolling logic (skip all touch events), `scrollableLayout.setSelfUpdateScroll(boolean)` can be used. Pass `true` to disable all handling, `false` to enable it.\n\n\n### Animate Scroll\n\nTo animate scroll state of a `ScrollableLayout`, `animateScroll(int)` can be used:\n\n```java\n// returns ValueAnimator, that can be configured as desired\n// `0` - expand fully\n// `scrollableLayout.getMaxScroll()` - collapse\nscrollableLayout.animateScroll(0)\n        .setDuration(250L)\n        .start();\n```\n\nPlease note that `ScrollableLayout` caches returned `ValueAnimator` and reuses it. First of all because it doesn't make sense to have two different scrolling animations on one `ScrollableLayout`. So, it's advisable to clear all possible custom state before running animation (just like `View` handles `ViewPropertyAnimator`)\n\n\n## License\n\n```\n  Copyright 2015 Dimitry Ivanov (mail@dimitryivanov.ru)\n\n  Licensed under the Apache License, Version 2.0 (the \"License\");\n  you may not use this file except in compliance with the License.\n  You may obtain a copy of the License at\n\n      http://www.apache.org/licenses/LICENSE-2.0\n\n  Unless required by applicable law or agreed to in writing, software\n  distributed under the License is distributed on an \"AS IS\" BASIS,\n  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  See the License for the specific language governing permissions and\n  limitations under the License.\n```\n","funding_links":[],"categories":["滚动效果(Scroll)","Java","Libs","\u003ca name=\"Tricks\"\u003eTricks\u003c/a\u003e"],"sub_categories":["\u003cA NAME=\"Widget\"\u003e\u003c/A\u003eWidget","Personal Blog"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnoties%2FScrollable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnoties%2FScrollable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnoties%2FScrollable/lists"}