Filter recyclerview items in between the range of numbers in android

In Android, recyclerview is majorly used component to show the item list data into recyclerview. Showing the list of data from a database or an API is pretty easy. But I am not going into the deep concept how we are using the recyclerview to show the data from API or database. In this tutorial, I am focusing about to filter the item of recyclerview in between the range of given numbers.

In many application, mainly in product type application, we have seen to filter the item based on price in between the range is very common. So in this tutorial, we will learn how can we filter the recyclerview item in between the range. Suppose you have thousands of product items showing on recyclerview. In this case to pick any particular item from a scroll is very difficult. To make this easy we can use filter the item based on search or sort the product name in the alphabet. I would be recommended to check this post to make the recyclerview search and sort is very easy to find any product. Here is post detail Android Filter Recyclerview by using SearchView in ToolBar or action bar.

For using the recyclerview we need to add the recyclerview dependency in our build.gradle file and for filtering item in between the range I am using a third party dependency material range bar.

compile 'com.android.support:recyclerview-v7:26.0.1'
compile 'com.appyvet:materialrangebar:1.4'

OK, that’s all basic required thing to filter items in between the range. I am filtering the data from a database. I used the GreenDao database to filter the item. If you do not aware of the Green DAO then I would be recommended to check this post in detail to get understand about the Green Dao fast ORM. Here is the link for Exploring GreenDAO ORM database with Reactive RxJava in Android.

Here is the uploaded the video for filter the item of recyclerview in between the range of the number of backers by using the material range bar. Please check the video to get understand what we can do with the filter?

Great, let’s see how can we do with source code. As we have seen in the video that I used the popup dialog for the filter the items in between the range of numbers by using the material range bar. I used the material dialog to provides the material kind of feeling so that our user interface will look good and attractive for users.

public class DialogUtil {
    static int mLeftValue = 10000;
    static int mRightValue = 300000;

    public static void materialRangeDialog(final Context ctx , final String message , final DialogCallback dialogCallback, boolean isCancalable) {
        boolean wrapInScrollView = false;
        final MaterialDialog dialog = new MaterialDialog.Builder(ctx).customView(R.layout.layout_dialog, wrapInScrollView).backgroundColorRes(android.R.color.transparent).build();
        dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.WHITE));
        View dialogView = dialog.getView();
        RangeBar rangebar = (RangeBar) dialogView.findViewById(R.id.rangebar);
        rangebar.setFormatter(new IRangeBarFormatter() {
            @Override
            public String format(String s) {
                int data = Integer.valueOf(s);
                int updatedValue =  data * 10000;
                return String.valueOf(updatedValue);
            }
        });
        rangebar.setOnRangeBarChangeListener(new RangeBar.OnRangeBarChangeListener() {
            @Override
            public void onRangeChangeListener(RangeBar rangeBar, int leftPinIndex,
                                              int rightPinIndex, String leftPinValue, String rightPinValue) {
                mLeftValue = Integer.valueOf(leftPinValue) * 10000;
                mRightValue = Integer.valueOf(rightPinValue) * 10000;
            }

        });

        Button cancelButton = (Button) dialogView.findViewById(R.id.cancel_button);
        Button doneButton = (Button) dialogView.findViewById(R.id.done_button);
        dialog.setCancelable(isCancalable);
        dialog.show();
        cancelButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                dialogCallback.onCancel();
                dialog.dismiss();
            }
        });
        doneButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                dialogCallback.onDane(String.valueOf(mLeftValue), String.valueOf(mRightValue));
                dialog.dismiss();
            }
        });
    }
}

And here are layout_dialog XML detail.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:paddingTop="10dp"
    android:paddingBottom="10dp"
    android:layout_height="match_parent"
    android:layout_centerInParent="true">

        <TextView
            android:gravity="center"
            android:textSize="17sp"
            android:text="Filter by backers"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <com.appyvet.materialrangebar.RangeBar
            android:layout_below="@+id/checkbox"
            android:id="@+id/rangebar"
            android:layout_width="match_parent"
            android:layout_marginTop="5dp"
            android:layout_height="72dp"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            app:mrb_pinRadius="20dp"
            app:mrb_pinMaxFont="10sp"
            app:mrb_rangeBarPaddingBottom="12dp"
            app:mrb_selectorBoundaryColor="@color/colorPrimary"
            app:mrb_selectorBoundarySize="2dp"
            app:mrb_pinTextColor="#ACD123"
            app:mrb_selectorSize="10dp"
            app:mrb_tickEnd="30"
            app:mrb_tickInterval="1"
            app:mrb_tickStart="1"/>

        <LinearLayout
            android:layout_margin="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_below="@+id/rangebar">

                <Button
                    android:id="@+id/cancel_button"
                    android:text="Cancel"
                    android:background="@color/colorPrimary"
                    android:textColor="#fff"
                    android:layout_margin="10dp"
                    android:textAllCaps="false"
                    android:layout_width="wrap_content"
                    android:layout_height="40dp" />

                <Button
                    android:id="@+id/done_button"
                    android:text="Done"
                    android:background="@color/colorPrimary"
                    android:textColor="#fff"
                    android:layout_margin="10dp"
                    android:textAllCaps="false"
                    android:layout_width="wrap_content"
                    android:layout_height="40dp" />
        </LinearLayout>

</RelativeLayout>

Now I need callback when button action happen. So I used the interface for a callback.

public interface DialogCallback {
    void onDane(String leftValue, String rightValues);
    void onCancel();
}

Ok now we need to call this method to execute, but before we need to get the filtered data from the database. Here is used a query to filter.

  @Override
    public Flowable<List<KickStarter>> getKickStarterByBackers(final String leftValue, final String rightValue) {
        return Flowable.fromCallable(new Callable<List<KickStarter>>() {
            @Override
            public List<KickStarter> call() throws Exception {
                Timber.d("getKickStartersQuery: " + "Left: "+leftValue + " Right: "+rightValue);
                List<KickStarter> list  = getKickStarterDao().queryBuilder()
                        .where(KickStarterDao.Properties.Num_backers.between(leftValue, rightValue))
                        .list();
                Timber.d("getKickStartersQuery: " + list.size());
                return list;
            }
        });
    }

Ok, Let’s call the method to execute the filter and update the recyclerview by using the notifyDataSetChange.

private void filerChoice() {
       DialogUtil.materialRangeDialog(getActivity(), "", dialogCallback, false);
    }

    DialogCallback dialogCallback = new DialogCallback() {
        @Override
        public void onDane(String leftValue, String rightValues) {
              mPresenter.queryKickStarterDb(leftValue, rightValues);
        }
        @Override
        public void onCancel() {
        }
    };

That’s it. Let’s implement the same thing in your application.

Please do subscribe your email to get every newsletter from this blog and if you feel that this post helps you then do not forget to share and comment below.

Happy Coding 🙂