Skip to content
A custom view that simulates the behaviour of a rubber band for Android
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.idea
app
gradle/wrapper
rubberbandview
screenshots
.gitignore
LICENSE.txt
README.md
build.gradle
gradle.properties
gradlew
gradlew.bat
settings.gradle

README.md

RubberBandView

A custom view that simulates the behaviour of a rubber band for Android. More details here.

Usage

Minimum setup

In your layout file:

<capital.scalable.droid.rubberbandview.RubberBandView
    android:id="@+id/rubberBandView"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Max selectable value

The API of the custom view is similar to that of Android's ProgressBar. You must set the max selectable value, using:

RubberBandView rubberbandView = findViewById(R.id.rubberBandView);
rubberBandView.setMaxSelection(10);

This way, the user can select any value from the range [0,10].

RubberBandListener

To receive updates to the selected value:

rubberBandView.setListener(new RubberBandListener() {
    @Override
    public void onSelectionChanged(int value) {
        Toast.makeText(MainActivity.this, "Selection changed to " + value, Toast.LENGTH_SHORT).show();
    }

    @Override
    public void onSelectionFinished(int value) {
        Toast.makeText(MainActivity.this, "Selection ended with value " + value, Toast.LENGTH_SHORT).show();
    }
});

The onSelectionFinished event is triggered as soon as the user has lifted their finger off the view. Note that the value returned in that case is the final selected one.

Vibration animation

The view comes with a nudge animation, that encourages the user to interact with it.

The default animation uses a ValueAnimator, which looks like this:

vibrationAnimator = ValueAnimator.ofFloat(-1f, 1f, -0.5f, 0.5f, 0);
vibrationAnimator.setInterpolator(new DecelerateInterpolator());
vibrationAnimator.setRepeatCount(3);
vibrationAnimator.setDuration(200 / 3);
vibrationAnimator.setStartDelay(5000);

You can supply your own animator, using:

rubberBandView.setVibrationAnimator(customAnimator)

To turn the animation off completely, simply set the vibration animator to null.

UI Customization

These are the parameters that can be modified through xml:

<capital.scalable.droid.rubberbandview.RubberBandView
    app:loosenessRatio="0.2"
    app:rubberColor="@color/colorAccent"
    app:minRubberWidth="4dp"
    app:maxRubberWidth="5dp"
    app:vibrationPeakAmplitude="3dp"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
  • loosenessRatio: how loose the rubber needs to be. Must be in [0, 1] range. Defaults to 0.4
  • rubberColor: the color of the rubber. Defaults to the theme's colorAccent
  • minRubberWidth: the minimum width of the rubber band, in dp. This will be the width when the rubber band is pulled to its max.
  • maxRubberWidth: the maximum width of the rubber band, in dp. This will be the width when the rubber band is at rest.
  • vibrationPeakAmplitude: the maximum displacement of the rubber band when vibrating, in dp.

Installation

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


dependencies {
    implementation "com.github.ScaCap:RubberBandView:1.0.0"
}

License

RubberBandView is Open Source software released under the Apache 2.0 license.

You can’t perform that action at this time.