Home

Awesome

Spruce Logo

Flinger (Only compatible with compose)

License MIT Public Yes <a href="https://jetc.dev/issues/067.html"><img src="https://img.shields.io/badge/As_Seen_In-jetc.dev_Newsletter_Issue_%2367-blue?logo=Jetpack+Compose&amp;logoColor=white" alt="As Seen In - jetc.dev Newsletter Issue #67"></a>

<a href = "https://github.com/iamjosephmj/flinger/stargazers"> <img src = "https://img.shields.io/github/stars/iamjosephmj/flinger" /> </a> <a href = "https://android-arsenal.com/details/1/8249"> <img src = "https://img.shields.io/badge/Android%20Arsenal-Flinger-green.svg?style=flat" /> </a>

What is Flinger?

<p>

Flinger is a plugin that is made on top of <a style = "color: white" href ="https://developer.android.com/jetpack/compose">jetpack compose</a> that will help the developer to tweak the LazyList's fling behaviour. This Library will help the developers to change the fling behaviours much easier without digging deep. Here is a prototype of Flinger:

</p> <p align="center"> <img src="https://github.com/iamjosephmj/flinger/blob/main/repo-media/flinger-demo.gif" width="250" height="600" /> </p>

Gradle

Add the following to your project's root build.gradle file

repositories {
    maven {
        url "https://jitpack.io"
    }
}

Add the following to your project's build.gradle file

dependencies {
    implementation 'com.github.iamjosephmj:Flinger:1.3.0'
}

Basics

<p>

By the launch of Jetpack compose at least some of you might have thought if did they port the old scroll behaviour to it. The answer to that is YES, they had ported the old <a style = "color: white" href ="https://developer.android.com/reference/android/widget/OverScroller">Overscroller</a> behaviour to the latest compose. The Overscroller is the component that is responsible for flings in ScrollView/RecyclerViews in Android. If we dig deeper into the implementation of the Overscroller, you can see that Android uses a fixed set of values so that the flings will look almost similar throughout different devices. The whole idea behind the creation of this library is that the developers will have full access to all the internal parameters that governs the fling behaviour. This library can be easily integrated with the <a style = "color: white" href ="https://developer.android.com/jetpack/compose/lists">LazyColumns</a> , <a style = "color: white" href ="https://developer.android.com/jetpack/compose/lists">LazyRows</a> , <a style = "color: white" href ="https://developer.android.com/jetpack/compose/lists">LazyLists</a> that is provided by compose.

</p>

Usage

Refer to the Sample project under to get more insights about the implementation.


LazyColumn(
    flingBehavior = flingBehavior(

        ScrollViewConfiguration.Builder()
            /*
             * This variable manages the friction to the scrolls in the LazyColumn
             */
            .scrollViewFriction(0.008f)

            /*
             * This is the absolute value of a velocity threshold, below which the
             * animation is considered finished.
             */
            .absVelocityThreshold(0f)

            /*
             * Gravitational obstruction to the scroll.
             */
            .gravitationalForce(9.80665f)

            /*
             * Scroll Inches per meter
             */
            .inchesPerMeter(39.37f)

            /*
             * Rate of deceleration of the scrollView.
             */
            .decelerationRate((ln(0.78) / ln(0.9)).toFloat())

            /*
             * Friction at the time of deceleration.
             */
            .decelerationFriction(0.09f)

            /*
             * Inflection is the place where the start and end tension lines cross each other.
             */
            .splineInflection(0.1f)

            /*
             * Spline's start tension.
             */
            .splineStartTension(0.1f)

            /*
             * Spline's end tension.
             */
            .splineEndTension(1.0f)

            /*
             * number of sampling points in the spline
             */
            .numberOfSplinePoints(100)

            // builder pattern.
            .build(),
    )
)
{
    // Columns/Rows
}

Stock Behaviours

If you are not comfortable with tweaking values, we provide you some pre-defined methods that can be used to bring the behaviour to your project, you can refer to <a style = "color: white" href ="https://github.com/iamjosephmj/flinger/blob/main/flinger/src/main/java/io/iamjosephmj/flinger/bahaviours/StockFlingBehaviours.kt">StockFlingBehaviours.kt</a>

Custom Behaviours

If you are interested in designing your own behaviours for the Flings, you can tryout different possibilities in the <a style = "color: white" href ="https://github.com/iamjosephmj/flinger/tree/develop/apk/">Flinger app</a>

Contribution, Issues or Future Ideas

If part of Flinger is not working correctly be sure to file a Github issue. In the issue provide as many details as possible. This could include example code or the exact steps that you did so that everyone can reproduce the issue. Sample projects are always the best way :). This makes it easy for our developers or someone from the open-source community to start working!

If you have a feature idea submit an issue with a feature request or submit a pull request and we will work with you to merge it in!

Contribution guidelines

Contributions are more than welcome!

Please Share & Star the repository to keep me motivated.

<a href = "https://github.com/iamjosephmj/flinger/stargazers"> <img src = "https://img.shields.io/github/stars/iamjosephmj/flinger" /> </a> <a href = "https://twitter.com/iamjosephmj"> <img src = "https://img.shields.io/twitter/url?label=follow&style=social&url=https%3A%2F%2Ftwitter.com" /> </a> <a href="https://star-history.com/#iamjosephmj/flinger&Timeline"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=iamjosephmj/flinger&type=Timeline&theme=dark" /> <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=iamjosephmj/flinger&type=Timeline" /> <img alt="Star History Chart" src="https://api.star-history.com/svg?repos=iamjosephmj/flinger&type=Timeline" /> </picture> </a>