Android library for adding price range with chart like in airbnb with flexible customization. Made by Stfalcon

Last update: Nov 25, 2022

Overview

Stfalcon-PriceRangeBar

Demo Application

Who we are

Need iOS and Android apps, MVP development or prototyping? Contact us via [email protected]. We develop software since 2009, and we're known experts in this field. Check out our portfolio and see more libraries from stfalcon-studio.

Download

Add jitpack to the root build.gradle file of your project at the end of repositories.

allprojects {
  repositories {
    ...
    maven { url 'https://jitpack.io' }
  }
}

Add the dependency

dependencies {
  ...
  implementation "com.github.stfalcon-studio:StfalconPriceRangeBar-android:[latest_version]"
}

Where the latest_version is the value from JitPack.io.

Usage

For adding default seekbar with chart just put this code into your layout:

<com.stfalcon.pricerangebar.SeekBarWithChart
   android:layout_width="match_parent"
   android:layout_height="wrap_content"/>

Or you can use default rangebar with chart just put this code into your layout:

<com.stfalcon.pricerangebar.RangeBarWithChart
   android:layout_width="match_parent"
   android:layout_height="wrap_content"/>

After that you should to add list entries with data to displaying

val barEntrys = ArrayList<BarEntry>()

seekBarEntries.add(BarEntry(30.0f, 5.0f))
seekBarEntries.add(BarEntry(32.0f, 7.0f))
seekBarEntries.add(BarEntry(34.0f, 10.0f))
seekBarEntries.add(BarEntry(36.0f, 11.0f))
seekBarEntries.add(BarEntry(38.0f, 14.0f))
seekBarEntries.add(BarEntry(40.0f, 15.0f))

seekBar.setEntries(barEntrys)

You can use many attributes for more flexibility and convenience of use. Here's the full list:

barActiveLineColor - color of selected part of rangebar/seekbar
barLineColor - color of unselected part of rangebar/seekbar
barThumbColor - color of thumb
barActiveThumbColor - color of active radius in thumb
barActiveTickRadius - clicked size of thumb
barChartSelectedBackgroundColor - background color of selected part of chart
barChartSelectedLineColor - color of selected part of top line in chart
barChartUnSelectedLineColor - color of unelected part of top line in chart
barChartUnselectedBackgroundColor - background color of unelected part of chart

For example:

<com.stfalcon.pricerangebar.SeekBarWithChart
    android:id="@+id/seekBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:barActiveLineColor="@android:color/holo_orange_dark"
    app:barActiveThumbColor="@android:color/holo_blue_light"
    app:barActiveTickRadius="@dimen/custom_active_tick_radius"
    app:barChartSelectedBackgroundColor="@android:color/holo_red_dark"
    app:barChartSelectedLineColor="@android:color/holo_green_dark"
    app:barChartUnSelectedLineColor="@android:color/holo_green_light"
    app:barChartUnselectedBackgroundColor="@android:color/holo_red_light"
    app:barLineColor="@android:color/holo_blue_light"/>

If you want to observe any changes in seekbar you should to add callbacks like:

onPinPositionChanged
onSelectedEntriesSizeChanged
onSelectedItemsSizeChanged

If you want to observe any changes in rangebar you should to add callbacks like:

onRangeChanged
onLeftPinChanged
onRightPinChanged
onSelectedEntriesSizeChanged
onSelectedItemsSizeChanged

Let's take look a small sample for seekbar:

seekBar.onPinPositionChanged = { index, pinValue ->
    println("$pinValue $index")
}
seekBar.onSelectedEntriesSizeChanged = { selectedEntriesSize ->
    println("$selectedEntriesSize column was selected")
}
seekBar.onSelectedItemsSizeChanged = { selectedItemsSize ->
    println("selectedItemsSize elements was selected")
}

And for rangebar:

rangeBar.onRangeChanged = { leftPinValue, rightPinValue ->
    println("$leftPinValue $rightPinValue")
}
rangeBar.onLeftPinChanged = { index, leftPinValue ->
    println("$index $leftPinValue")
}
rangeBar.onRightPinChanged = { index, rightPinValue ->
    println("$index $rightPinValue")
}
rangeBar.onSelectedEntriesSizeChanged = { selectedEntriesSize ->
    println("$selectedEntriesSize column was selected")
}
rangeBar.onSelectedItemsSizeChanged = { selectedItemsSize ->
    println("$selectedItemsSize elements was selected")
}

If you want pre select some values you should use setSelectedEntries method.

For example:

seekBar.setSelectedEntries(30)
seekBar.setSelectedEntries(selectedEntriesSublist)

...
rangeBar.setSelectedEntries(20, 40)
rangeBar.setSelectedEntries(selectedEntriesSublist)

How to use it in Java?

We need init all views and variables

private static final String TAG = "Sample";

private ArrayList<BarEntry> seekBarEntries;
private ArrayList<BarEntry> rangeBarEntries;

private SeekBarWithChart seekBar;
private RangeBarWithChart rangeBar;
private TextView seekBarAreaInfo;
private TextView seekbarAreaValue;
private TextView rangeBarValue;
private TextView rangeBarInfo;

...

seekBar = findViewById(R.id.seekBar);
rangeBar = findViewById(R.id.rangeBar);
seekBarAreaInfo = findViewById(R.id.seekbarAreaInfo);
seekbarAreaValue = findViewById(R.id.seekbarAreaValue);
rangeBarValue = findViewById(R.id.rangeBarValue);
rangeBarInfo = findViewById(R.id.rangeBarInfo);

SeekBar

private void initSeekBar() {
   seekBar.setEntries(seekBarEntries);
   seekBar.setOnPinPositionChanged(this::onPinPositionChanged);
   seekBar.setOnSelectedEntriesSizeChanged(this::onSelectedEntriesSizeChanged);
   seekBar.setOnSelectedItemsSizeChanged(this::onSelectedItemsSizeChanged);

   float perimeter = seekBarEntries.get(seekBarEntries.size() - 1).getX();
   seekbarAreaValue.setText(getString(R.string.formatter_meter, Float.toString(perimeter)));

   int totalSelectedSize = 0;
   for (BarEntry entry : seekBarEntries) {
       totalSelectedSize += entry.getY();


   seekBarAreaInfo.setText(getString(R.string.formatter_elements, Float.toString(totalSelectedSize)));
}

RangeBar

private void initRangeBar() {
   rangeBar.setEntries(rangeBarEntries);
   rangeBar.setOnRangeChanged(this::onRangeChanged);
   rangeBar.setOnLeftPinChanged(this::onLeftPinChanged);
   rangeBar.setOnRightPinChanged(this::onRightPinChanged);
   rangeBar.setOnSelectedEntriesSizeChanged(this::onSelectedRangeEntriesSizeChanged);
   rangeBar.setOnSelectedItemsSizeChanged(this::onRangeSelectedItemsSizeChanged);
   int totalSelectedSize = 0;
   for (BarEntry entry : rangeBarEntries) {
       totalSelectedSize += entry.getY();
   }
   rangeBarInfo.setText(getString(R.string.formatter_elements, Float.toString(totalSelectedSize)));
   rangeBarValue.setText(
           getString(
                   R.string.area_range,
                   Float.toString(rangeBarEntries.get(0).getX()),
                   Float.toString(rangeBarEntries.get(rangeBarEntries.size() - 1).getX())
           )
   );
}

Main callbacks

private Unit onPinPositionChanged(Integer index, String pinValue) {
    seekbarAreaValue.setText(getString(R.string.formatter_meter, pinValue));
    Log.d(TAG, "Index value = " + index);
    return Unit.INSTANCE;
}

private Unit onSelectedEntriesSizeChanged(Integer selectedEntriesSize) {
    Log.d(TAG, "SelectedEntriesSize = " + selectedEntriesSize);
    return Unit.INSTANCE;
}

private Unit onSelectedItemsSizeChanged(Integer selectedItemsSize) {
    seekBarAreaInfo.setText(getString(R.string.formatter_elements_int, selectedItemsSize));
    return Unit.INSTANCE;
}

private Unit onRangeChanged(String leftPinValue, String rightPinValue) {
    rangeBarValue.setText(getString(R.string.area_range, leftPinValue, rightPinValue));
    return Unit.INSTANCE;
}

private Unit onLeftPinChanged(Integer index, String leftPinValue) {
    Log.d(TAG, "index = " + index + " $leftPinValue = " + leftPinValue);
    return Unit.INSTANCE;
}

private Unit onRightPinChanged(Integer index, String rightPinValue) {
    Log.d(TAG, "index = " + index + " rightPinValue = " + rightPinValue);
    return Unit.INSTANCE;
}

private Unit onSelectedRangeEntriesSizeChanged(Integer entriesSize) {
    Log.d(TAG, "Range EntriesSize = " + entriesSize);
    return Unit.INSTANCE;
}

private Unit onRangeSelectedItemsSizeChanged(Integer selectedItemsSize) {
    rangeBarInfo.setText(getString(R.string.formatter_elements, selectedItemsSize.toString()));
    return Unit.INSTANCE;
}

Unit - it is a type from package kotlin.

You can check it from full example on Java.

License

Copyright 2018 stfalcon.com

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.

Comments

ERROR: Failed to resolve: com.github.PhilJay:MPAndroidChart:v3.1.0

This is the message I get when I add implementation 'com.github.stfalcon:StfalconPriceRangeBar:0.1.1' to Gradle

ERROR: Failed to resolve: com.github.PhilJay:MPAndroidChart:v3.1.0 Show in Project Structure dialog Affected Modules: app

opened by emailsubjekt 5
Reload already selected values

Is there any way to reload already selected values?

Let say i have price range between 1-100

User have selected 10-30.

Now can i load 10-30 when user navigate for 2nd time?

opened by MustanserIqbal93 4

Error inflating class com.stfalcon.pricerangebar.SeekBarWithChart

An error occurs: java.lang.RuntimeException: Unable to start activity ComponentInfo{com.example.test/com.example.test.MainActivity}: android.view.InflateException: Binary XML file line #58: Binary XML file line #58: Error inflating class com.stfalcon.pricerangebar.SeekBarWithChart

class MainActivity : AppCompatActivity() {

private var seekBarEntries = ArrayList<BarEntry>()

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    val barEntrys = ArrayList<BarEntry>()

    seekBarEntries.add(BarEntry(30.0f, 5.0f))
    seekBarEntries.add(BarEntry(32.0f, 7.0f))
    seekBarEntries.add(BarEntry(34.0f, 10.0f))
    seekBarEntries.add(BarEntry(36.0f, 11.0f))
    seekBarEntries.add(BarEntry(38.0f, 14.0f))
    seekBarEntries.add(BarEntry(40.0f, 15.0f))

    seekBar.setEntries(barEntrys)
}

}

XML:

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="wrap_content" tools:context=".MainActivity">

    <TextView
            android:id="@+id/seekbarAreaTitle"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="21dp"
            android:layout_marginTop="16dp"
            android:layout_marginEnd="21dp"
            android:text="Area"
            android:textColor="@android:color/black"
            android:textSize="24sp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    <TextView
            android:id="@+id/seekbarAreaValue"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="21dp"
            android:layout_marginTop="16dp"
            android:layout_marginEnd="21dp"
            tools:text="50 m"
            android:textColor="@android:color/black"
            android:textSize="24sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/seekbarAreaTitle" />

    <TextView
            android:id="@+id/seekbarAreaInfo"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="21dp"
            android:layout_marginTop="16dp"
            android:layout_marginEnd="21dp"
            android:textColor="@android:color/black"
            android:textSize="12sp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/seekbarAreaValue"
            tools:text="18 elements was selected" />

    <com.stfalcon.pricerangebar.SeekBarWithChart
            android:id="@+id/seekBar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="21dp"
            android:layout_marginTop="16dp"
            android:layout_marginEnd="21dp"
            app:layout_constraintTop_toBottomOf="@+id/seekbarAreaInfo"
    />
</android.support.constraint.ConstraintLayout>

In dependencies: implementation 'com.github.stfalcon:StfalconPriceRangeBar:0.1.0'

opened by VitalySizov 4

Error on adding dependency

The library cannot be added as i get the below error;

Could not determine the dependencies of task ':app:compileDebugJavaWithJavac'.

Could not resolve all task dependencies for configuration ':app:debugCompileClasspath'. Could not find com.github.PhilJay:MPAndroidChart:v3.1.0. Required by: project :app > com.github.stfalcon:StfalconPriceRangeBar:0.1.3

opened by Nataanthoni 3

ERROR: Failed to resolve: com.github.PhilJay:MPAndroidChart:v3.1.0

after adding implementation 'com.github.stfalcon:StfalconPriceRangeBar:0.1.1' as dependency, I got next error:

ERROR: Failed to resolve: com.github.PhilJay:MPAndroidChart:v3.1.0 Show in Project Structure dialog Affected Modules: app

dependencies { implementation fileTree(dir: 'libs', include: ['*.jar']) implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version" implementation "org.jetbrains.kotlinx:kotlinx-coroutines-android:$coroutinesVersion"

implementation "androidx.core:core-ktx:$ktxVersion"

implementation "org.koin:koin-core:$koinVersion"
implementation "org.koin:koin-core-ext:$koinVersion"
implementation "org.koin:koin-android:$koinVersion"
implementation "org.koin:koin-androidx-scope:$koinVersion"
implementation "org.koin:koin-androidx-viewmodel:$koinVersion"

implementation "androidx.lifecycle:lifecycle-extensions:$lifecycleVersion"
implementation "androidx.lifecycle:lifecycle-common-java8:$lifecycleVersion"
implementation "androidx.lifecycle:lifecycle-viewmodel-ktx:$lifecycleVersion"
implementation "androidx.navigation:navigation-fragment-ktx:$nav_version"
implementation "androidx.navigation:navigation-ui-ktx:$nav_version"

implementation "androidx.appcompat:appcompat:$appCompatVersion"
implementation "androidx.fragment:fragment:$fragmentVersion"
implementation "androidx.fragment:fragment-ktx:$fragmentVersion"
implementation "androidx.constraintlayout:constraintlayout:$constraintLayoutVersion"
implementation "com.google.android.material:material:$materialVersion"

implementation "com.google.android.gms:play-services-location:$playServicesVersion"

implementation "com.squareup.retrofit2:retrofit:$retrofitVersion"
implementation "com.squareup.retrofit2:converter-moshi:$retrofitVersion"
implementation "com.squareup.okhttp3:logging-interceptor:$okHttpLoggingVersion"
implementation "com.squareup.moshi:moshi:$moshiVersion"
implementation "com.squareup.moshi:moshi-kotlin:$moshiVersion"
kapt("com.squareup.moshi:moshi-kotlin-codegen:$moshiVersion")

implementation "com.airbnb.android:epoxy:$epoxyVersion"
kapt "com.airbnb.android:epoxy-processor:$epoxyVersion"

implementation "com.github.bumptech.glide:glide:$glideVersion"
annotationProcessor "com.github.bumptech.glide:compiler:$glideVersion"

implementation "com.jakewharton.timber:timber:$timberVersion"
implementation 'com.romandanylyk:pageindicatorview:1.0.3'

implementation "com.airbnb.android:epoxy:$epoxyVersion"
kapt "com.airbnb.android:epoxy-processor:$epoxyVersion"
implementation "com.crashlytics.sdk.android:crashlytics:$crashlyticsVersion"
implementation 'com.facebook.shimmer:shimmer:0.4.0'
implementation 'com.github.stfalcon:StfalconPriceRangeBar:0.1.1'

testImplementation "junit:junit:$junitVersion"
androidTestImplementation "androidx.test.ext:junit:$extJunitVersion"
androidTestImplementation "androidx.test:runner:$testRunnerVersion"
androidTestImplementation "androidx.test.espresso:espresso-core:$espressoVersion"

}

opened by EleNikIvi 3

Incorrect format type for barActiveThumbColor attribute
The attribute for barActiveThumbColor is defined as: <attr name="barActiveThumbColor" format="dimension" />

When it is read in by the View, it is done so like this:

thumbActiveColor = typedArray.getColor( R.styleable.PriceRangeBar_barActiveThumbColor, thumbActiveColor )

I believe the attribute should be defined as: <attr name="barActiveThumbColor" format="color" />
opened by stephen-rival 2
JCenter to be dismissed - migrate to Maven Central

Jcenter is scheduled to be dismissed on May 1st, 2021, and no more submissions will be accepted starting from February 28th.
Realm should be migrated to Maven Central as soon as possible.
https://jfrog.com/blog/into-the-sunset-bintray-jcenter-gocenter-and-chartcenter/

opened by sameerjj 1
Unclear what are the two floats to be inserted into BarData

I really want to use this library but can't understand. What values should be inputted into the BarData? I want to use the bar to filter objects by prices. The only data I can think of giving the BarData is the price of each object. What would be the second float?

Thanks

opened by Tsabary 1
Run app | Not working fine
Task :app:dataBindingMergeDependencyArtifactsDebug FAILED

Execution failed for task ':app:dataBindingMergeDependencyArtifactsDebug'.

Could not resolve all files for configuration ':app:debugCompileClasspath'. Could not find com.github.stfalcon-studio:StfalconPriceRangeBar-android:1.5. Required by: project :app

Possible solution:

Declare repository providing the artifact, see the documentation at https://docs.gradle.org/current/userguide/declaring_repositories.html
opened by skbhati199 0
Unable to predict when seek is stopped.

Hi Team,

I was using this library for my application. Currently the simpleRangeView provide us only two call backs , that is onStartRangeChanged and onEndRangeChanged which gives us value throughout. Is there any way we can get value only when we removed the thumb from seeking? Currently I don't see any method providing such behaviour. Please suggest a workaround for this.

thanks vinayak s

opened by vinayak214 0
Range Bar seek Thumb is not getting Overlaped

Hi Team,

I was using the Range Bar option for my application which I'm developing. I was able to seek the range the bar min and max points up to the provided points. But as per my requirement, I have to position both the seek bar overlapped to each other. Is there any way we can achieve the above requirement?

opened by vinayak214 0

Releases(v1.5)

v1.5(Feb 15, 2021)

Source code(tar.gz)
Source code(zip)

Android library for adding price range with chart like in airbnb with flexible customization. Made by Stfalcon

Related tags

Overview

Stfalcon-PriceRangeBar

Demo Application

Who we are

Download

Usage

How to use it in Java?

License

Comments

Releases(v1.5)

v1.5(Feb 15, 2021)

Owner

Stfalcon LLC

Remoter - An alternative to Android AIDL for Android Remote IPC services using plain java interfaces

Android library for adding price range with chart like in airbnb with flexible customization. Made by Stfalcon

Open-source native Android graph/chart framework includes line chart,stick chart,candlestick chart,pie chart,spider-web chart etc.

Bitcoin Market app shows you the current Bitcoin market price and price chart of different time intervals 💰

Android library. Flexible components for chat UI implementation with flexible possibilities for styling, customizing and data management. Made by Stfalcon

Android Bitcoin market app base on Jetpack Compose and MVI. The app displays current bitcoin market price and history price k-line charts.

AnyChart Android Chart is an amazing data visualization library for easily creating interactive charts in Android apps. It runs on API 19+ (Android 4.4) and features dozens of built-in chart types.

A powerful 🚀 Android range bar chart library as well as scaling, panning and animations.

Android library to display a few images in one ImageView like avatar of group chat. Made by Stfalcon

Jetpack-linear-chart - A simple way to draw linear chart using Jetpack Compose

Android Swipeable button like in iOS unlock screen. Made by Stfalcon

A GitHub user Android apps using Dagger 2, MVVM, Modularization, Clean Architecture, and Airbnb Epoxy

Flexible Step Range Slider With Kotlin

Customizable Android full screen image viewer for Fresco library supporting "pinch to zoom" and "swipe to dismiss" gestures. Made by Stfalcon

Customizable Android full screen image viewer for Fresco library supporting "pinch to zoom" and "swipe to dismiss" gestures. Made by Stfalcon

Easy social network authorization for Android. Supports Facebook, Twitter, Instagram, Google+, Vkontakte. Made by Stfalcon

Utility for developers and QAs what helps minimize time wasting on writing the same data for testing over and over again. Made by Stfalcon

A flexible view for providing a limited rect window into a large data set,just like a two-dimensional RecyclerView. It different from RecyclerView is that it's two-dimensional(just like a Panel) and it pin the itemView of first row and first column in their original location.

A cryptocurrency data aggregator that tracks price, volume, social stats.

Application to solve a personal problem, which was the wish to have a simple app that handles a market list with prices, quantity and total price