Tag Archives: Range Bar

featured_image_rangebar_amdroidarena

Hey folks ! how you doing , today’s tutorial is going to be awesome because I have just found a beautiful Customized third party Range Bar for Android developers , All those who want to integrate Range Bar in their application are more welcome and should learn and download this code , library developed by edmodo .

For this awesome third party  Range Bar you have to import Range Bar libraries first which i included in the code below.

Developers can customize the following things–

  • bar color
  • bar thickness
  • tick height
  • number of ticks
  • connecting line thickness
  • connecting line color
  • thumb normal image
  • thumb pressed image

Step 1 — Just Goto File –>> New –>> import –>> Android Project –>> browse –>> select the Range bar library.

Download code

Now you just need to import this project in your application and yeah , your Range Bar is working.

Lets start with designing part first – paste the below code -According to your need –

activity_main.xml

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <LinearLayout
        android:id="@+id/mylayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:focusableInTouchMode="true"
        android:orientation="vertical"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        tools:context=".MainActivity" >

        <TextView
            android:id="@+id/title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="@string/title"
            android:textSize="40sp" />

        <com.edmodo.rangebar.RangeBar
            xmlns:custom="http://schemas.android.com/apk/res-auto"
            android:id="@+id/rangebar1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="50dp"
            android:layout_marginTop="50dp"
            custom:tickCount="7" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:paddingLeft="40dp"
            android:paddingRight="40dp" >

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:baselineAligned="false"
                android:orientation="horizontal" >

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:orientation="vertical" >

                    <TextView
                        android:id="@+id/leftIndex"
                        style="@style/RoboTheme"
                        android:layout_marginTop="0dp"
                        android:text="@string/leftIndex" />

                    <EditText
                        android:id="@+id/leftIndexValue"
                        style="@style/RoboTheme"
                        android:layout_marginTop="0dp"
                        android:inputType="number"
                        android:text="@string/leftIndexValue"
                        android:textSize="35sp" />
                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:orientation="vertical" >

                    <TextView
                        android:id="@+id/rightIndex"
                        style="@style/RoboTheme"
                        android:layout_marginTop="0dp"
                        android:text="@string/rightIndex" />

                    <EditText
                        android:id="@+id/rightIndexValue"
                        style="@style/RoboTheme"
                        android:layout_marginTop="0dp"
                        android:inputType="number"
                        android:text="@string/rightIndexValue"
                        android:textSize="35sp" />
                </LinearLayout>
            </LinearLayout>

            <Button
                android:id="@+id/refresh"
                style="@style/RoboTheme"
                android:layout_width="wrap_content"
                android:layout_gravity="center"
                android:paddingLeft="20dp"
                android:paddingRight="20dp"
                android:text="@string/refresh"
                android:textColor="#33B5E5"
                android:textSize="25sp" />

            <TextView
                android:id="@+id/tickCount"
                style="@style/RoboTheme"
                android:text="@string/tickCount" />

            <SeekBar
                android:id="@+id/tickCountSeek"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:progress="7" />

            <TextView
                android:id="@+id/tickHeight"
                style="@style/RoboTheme"
                android:text="@string/tickHeight" />

            <SeekBar
                android:id="@+id/tickHeightSeek"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:max="75"
                android:progress="24" />

            <TextView
                android:id="@+id/barWeight"
                style="@style/RoboTheme"
                android:text="@string/barWeight" />

            <SeekBar
                android:id="@+id/barWeightSeek"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:max="8"
                android:progress="2" />

            <TextView
                android:id="@+id/connectingLineWeight"
                style="@style/RoboTheme"
                android:text="@string/connectingLineWeight" />

            <SeekBar
                android:id="@+id/connectingLineWeightSeek"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:max="15"
                android:progress="4" />

            <TextView
                android:id="@+id/thumbRadius"
                style="@style/RoboTheme"
                android:text="@string/thumbRadius" />

            <SeekBar
                android:id="@+id/thumbRadiusSeek"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:max="30"
                android:progress="0" />

            <Button
                android:id="@+id/barColor"
                style="@style/RoboTheme"
                android:layout_width="wrap_content"
                android:layout_gravity="center"
                android:text="@string/barColor" />

            <Button
                android:id="@+id/connectingLineColor"
                style="@style/RoboTheme"
                android:layout_width="wrap_content"
                android:layout_gravity="center"
                android:text="@string/connectingLineColor" />

            <Button
                android:id="@+id/thumbColorNormal"
                style="@style/RoboTheme"
                android:layout_width="wrap_content"
                android:layout_gravity="center"
                android:text="@string/thumbColorNormal" />

            <Button
                android:id="@+id/thumbColorPressed"
                style="@style/RoboTheme"
                android:layout_width="wrap_content"
                android:layout_gravity="center"
                android:text="@string/thumbColorPressed" />

            <Button
                android:id="@+id/resetThumbColors"
                style="@style/RoboTheme"
                android:layout_width="wrap_content"
                android:layout_gravity="center"
                android:text="@string/resetThumbColors"
                android:textColor="@android:color/holo_red_light" />
        </LinearLayout>
    </LinearLayout>

</ScrollView>

Now ColorPickerDialog.java file for photoshop like color picker — paste the below code –

ColorPickerDialog.java

package com.example.rangebarsample;

import android.app.Dialog;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.Shader;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;


public class ColorPickerDialog extends Dialog {
    public interface OnColorChangedListener {
        void colorChanged(Component component, int color);
    }

    private OnColorChangedListener mListener;
    private int mInitialColor, mDefaultColor;
    private static Component mComponent;

    private static class ColorPickerView extends View {
        private Paint mPaint;
        private float mCurrentHue = 0;
        private int mCurrentX = 0, mCurrentY = 0;
        private int mCurrentColor, mDefaultColor;
        private final int[] mHueBarColors = new int[258];
        private int[] mMainColors = new int[65536];
        private OnColorChangedListener mListener;

        ColorPickerView(Context c, OnColorChangedListener l, int color, int defaultColor) {
            super(c);
            mListener = l;
            mDefaultColor = defaultColor;

            // Get the current hue from the current color and update the main
            // color field
            float[] hsv = new float[3];
            Color.colorToHSV(color, hsv);
            mCurrentHue = hsv[0];
            updateMainColors();

            mCurrentColor = color;

            // Initialize the colors of the hue slider bar
            int index = 0;
            for (float i = 0; i < 256; i += 256 / 42) // Red (#f00) to pink
                                                      // (#f0f)
            {
                mHueBarColors[index] = Color.rgb(255, 0, (int) i);
                index++;
            }
            for (float i = 0; i < 256; i += 256 / 42) // Pink (#f0f) to blue
                                                      // (#00f)
            {
                mHueBarColors[index] = Color.rgb(255 - (int) i, 0, 255);
                index++;
            }
            for (float i = 0; i < 256; i += 256 / 42) // Blue (#00f) to light
                                                      // blue (#0ff)
            {
                mHueBarColors[index] = Color.rgb(0, (int) i, 255);
                index++;
            }
            for (float i = 0; i < 256; i += 256 / 42) // Light blue (#0ff) to
                                                      // green (#0f0)
            {
                mHueBarColors[index] = Color.rgb(0, 255, 255 - (int) i);
                index++;
            }
            for (float i = 0; i < 256; i += 256 / 42) // Green (#0f0) to yellow
                                                      // (#ff0)
            {
                mHueBarColors[index] = Color.rgb((int) i, 255, 0);
                index++;
            }
            for (float i = 0; i < 256; i += 256 / 42) // Yellow (#ff0) to red
                                                      // (#f00)
            {
                mHueBarColors[index] = Color.rgb(255, 255 - (int) i, 0);
                index++;
            }

            // Initializes the Paint that will draw the View
            mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
            mPaint.setTextAlign(Paint.Align.CENTER);
            mPaint.setTextSize(12);
        }

        // Get the current selected color from the hue bar
        private int getCurrentMainColor()
        {
            int translatedHue = 255 - (int) (mCurrentHue * 255 / 360);
            int index = 0;
            for (float i = 0; i < 256; i += 256 / 42)
            {
                if (index == translatedHue)
                    return Color.rgb(255, 0, (int) i);
                index++;
            }
            for (float i = 0; i < 256; i += 256 / 42)
            {
                if (index == translatedHue)
                    return Color.rgb(255 - (int) i, 0, 255);
                index++;
            }
            for (float i = 0; i < 256; i += 256 / 42)
            {
                if (index == translatedHue)
                    return Color.rgb(0, (int) i, 255);
                index++;
            }
            for (float i = 0; i < 256; i += 256 / 42)
            {
                if (index == translatedHue)
                    return Color.rgb(0, 255, 255 - (int) i);
                index++;
            }
            for (float i = 0; i < 256; i += 256 / 42)
            {
                if (index == translatedHue)
                    return Color.rgb((int) i, 255, 0);
                index++;
            }
            for (float i = 0; i < 256; i += 256 / 42)
            {
                if (index == translatedHue)
                    return Color.rgb(255, 255 - (int) i, 0);
                index++;
            }
            return Color.RED;
        }

        // Update the main field colors depending on the current selected hue
        private void updateMainColors()
        {
            int mainColor = getCurrentMainColor();
            int index = 0;
            int[] topColors = new int[256];
            for (int y = 0; y < 256; y++)
            {
                for (int x = 0; x < 256; x++)
                {
                    if (y == 0)
                    {
                        mMainColors[index] = Color.rgb(255 - (255 - Color.red(mainColor)) * x / 255,
                                                       255 - (255 - Color.green(mainColor)) * x / 255,
                                                       255 - (255 - Color.blue(mainColor)) * x / 255);
                        topColors[x] = mMainColors[index];
                    }
                    else
                        mMainColors[index] = Color.rgb((255 - y) * Color.red(topColors[x]) / 255,
                                                       (255 - y) * Color.green(topColors[x]) / 255,
                                                       (255 - y) * Color.blue(topColors[x]) / 255);
                    index++;
                }
            }
        }

        @Override
        protected void onDraw(Canvas canvas) {
            int translatedHue = 255 - (int) (mCurrentHue * 255 / 360);
            // Display all the colors of the hue bar with lines
            for (int x = 0; x < 256; x++)
            {
                // If this is not the current selected hue, display the actual
                // color
                if (translatedHue != x)
                {
                    mPaint.setColor(mHueBarColors[x]);
                    mPaint.setStrokeWidth(1);
                }
                else // else display a slightly larger black line
                {
                    mPaint.setColor(Color.BLACK);
                    mPaint.setStrokeWidth(3);
                }
                canvas.drawLine(x + 10, 0, x + 10, 40, mPaint);
            }

            // Display the main field colors using LinearGradient
            for (int x = 0; x < 256; x++)
            {
                int[] colors = new int[2];
                colors[0] = mMainColors[x];
                colors[1] = Color.BLACK;
                Shader shader = new LinearGradient(0, 50, 0, 306, colors, null, Shader.TileMode.REPEAT);
                mPaint.setShader(shader);
                canvas.drawLine(x + 10, 50, x + 10, 306, mPaint);
            }
            mPaint.setShader(null);

            // Display the circle around the currently selected color in the
            // main field
            if (mCurrentX != 0 && mCurrentY != 0)
            {
                mPaint.setStyle(Paint.Style.STROKE);
                mPaint.setColor(Color.BLACK);
                canvas.drawCircle(mCurrentX, mCurrentY, 10, mPaint);
            }

            // Draw a 'button' with the currently selected color
            mPaint.setStyle(Paint.Style.FILL);
            mPaint.setColor(mCurrentColor);
            canvas.drawRect(10, 316, 138, 356, mPaint);

            // Set the text color according to the brightness of the color
            if (Color.red(mCurrentColor) + Color.green(mCurrentColor) + Color.blue(mCurrentColor) < 384)
                mPaint.setColor(Color.WHITE);
            else
                mPaint.setColor(Color.BLACK);
            canvas.drawText(getResources().getString(R.string.confirmNewColor), 74, 340, mPaint);

            // Draw a 'button' with the default color
            mPaint.setStyle(Paint.Style.FILL);
            mPaint.setColor(mDefaultColor);
            canvas.drawRect(138, 316, 266, 356, mPaint);

            // Set the text color according to the brightness of the color
            if (Color.red(mDefaultColor) + Color.green(mDefaultColor) + Color.blue(mDefaultColor) < 384)
                mPaint.setColor(Color.WHITE);
            else
                mPaint.setColor(Color.BLACK);
            canvas.drawText(getResources().getString(R.string.confirmDefaultColor), 202, 340, mPaint);
        }

        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
            setMeasuredDimension(276, 366);
        }

        @Override
        public boolean onTouchEvent(MotionEvent event) {
            if (event.getAction() != MotionEvent.ACTION_DOWN)
                return true;
            float x = event.getX();
            float y = event.getY();

            // If the touch event is located in the hue bar
            if (x > 10 && x < 266 && y > 0 && y < 40)
            {
                // Update the main field colors
                mCurrentHue = (255 - x) * 360 / 255;
                updateMainColors();

                // Update the current selected color
                int transX = mCurrentX - 10;
                int transY = mCurrentY - 60;
                int index = 256 * (transY - 1) + transX;
                if (index > 0 && index < mMainColors.length)
                    mCurrentColor = mMainColors[256 * (transY - 1) + transX];

                // Force the redraw of the dialog
                invalidate();
            }

            // If the touch event is located in the main field
            if (x > 10 && x < 266 && y > 50 && y < 306)
            {
                mCurrentX = (int) x;
                mCurrentY = (int) y;
                int transX = mCurrentX - 10;
                int transY = mCurrentY - 60;
                int index = 256 * (transY - 1) + transX;
                if (index > 0 && index < mMainColors.length)
                {
                    // Update the current color
                    mCurrentColor = mMainColors[index];
                    // Force the redraw of the dialog
                    invalidate();
                }
            }

            // If the touch event is located in the left button, notify the
            // listener with the current color
            if (x > 10 && x < 138 && y > 316 && y < 356)
                mListener.colorChanged(mComponent, mCurrentColor);

            // If the touch event is located in the right button, notify the
            // listener with the default color
            if (x > 138 && x < 266 && y > 316 && y < 356)
                mListener.colorChanged(mComponent, mDefaultColor);

            return true;
        }
    }

    public ColorPickerDialog(Context context,
                             OnColorChangedListener listener,
                             Component component,
                             int initialColor,
                             int defaultColor) {
        super(context);

        mListener = listener;
        mComponent = component;
        mInitialColor = initialColor;
        mDefaultColor = defaultColor;
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        OnColorChangedListener l = new OnColorChangedListener() {
            public void colorChanged(Component component, int color) {
                mListener.colorChanged(component, color);
                dismiss();
            }
        };

        setContentView(new ColorPickerView(getContext(), l, mInitialColor, mDefaultColor));
        setTitle(R.string.colorPickerTitle);
    }
}

Now the MainActivity.java file — paste the below code

package com.example.rangebarsample;

import android.annotation.TargetApi;
import android.app.Activity;
import android.graphics.Typeface;
import android.os.Build;
import android.os.Bundle;
import android.view.Gravity;
import android.view.Menu;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.view.Window;
import android.widget.Button;
import android.widget.EditText;
import android.widget.SeekBar;
import android.widget.SeekBar.OnSeekBarChangeListener;
import android.widget.TextView;

import com.edmodo.rangebar.RangeBar;

public class MainActivity extends Activity implements ColorPickerDialog.OnColorChangedListener {

    // Corresponds to Color.LTGRAY
    private static final int DEFAULT_BAR_COLOR = 0xffcccccc;

    // Corresponds to android.R.color.holo_blue_light.
    private static final int DEFAULT_CONNECTING_LINE_COLOR = 0xff33b5e5;
    private static final int HOLO_BLUE = 0xff33b5e5;

    // Sets the initial values such that the image will be drawn
    private static final int DEFAULT_THUMB_COLOR_NORMAL = -1;
    private static final int DEFAULT_THUMB_COLOR_PRESSED = -1;

    // Sets variables to save the colors of each attribute
    private int mBarColor = DEFAULT_BAR_COLOR;
    private int mConnectingLineColor = DEFAULT_CONNECTING_LINE_COLOR;
    private int mThumbColorNormal = DEFAULT_THUMB_COLOR_NORMAL;
    private int mThumbColorPressed = DEFAULT_THUMB_COLOR_PRESSED;

    // Initializes the RangeBar in the application
    private RangeBar rangebar;

    // Saves the state upon rotating the screen/restarting the activity
    @Override
    protected void onSaveInstanceState(Bundle bundle) {
        super.onSaveInstanceState(bundle);
        bundle.putInt("BAR_COLOR", mBarColor);
        bundle.putInt("CONNECTING_LINE_COLOR", mConnectingLineColor);
        bundle.putInt("THUMB_COLOR_NORMAL", mThumbColorNormal);
        bundle.putInt("THUMB_COLOR_PRESSED", mThumbColorPressed);
    }

    // Restores the state upon rotating the screen/restarting the activity
    @Override
    protected void onRestoreInstanceState(Bundle bundle) {
        super.onRestoreInstanceState(bundle);
        mBarColor = bundle.getInt("BAR_COLOR");
        mConnectingLineColor = bundle.getInt("CONNECTING_LINE_COLOR");
        mThumbColorNormal = bundle.getInt("THUMB_COLOR_NORMAL");
        mThumbColorPressed = bundle.getInt("THUMB_COLOR_PRESSED");

        // Change the text colors to the appropriate colors, and the text as
        // well
        colorChanged(Component.BAR_COLOR, mBarColor);
        colorChanged(Component.CONNECTING_LINE_COLOR, mConnectingLineColor);
        colorChanged(Component.THUMB_COLOR_NORMAL, mThumbColorNormal);
        colorChanged(Component.THUMB_COLOR_PRESSED, mThumbColorPressed);

        // Gets the RangeBar
        rangebar = (RangeBar) findViewById(R.id.rangebar1);

        // Gets the index value TextViews
        final TextView leftIndexValue = (TextView) findViewById(R.id.leftIndexValue);
        final TextView rightIndexValue = (TextView) findViewById(R.id.rightIndexValue);
        // Resets the index values every time the activity is changed
        leftIndexValue.setText("" + rangebar.getLeftIndex());
        rightIndexValue.setText("" + rangebar.getRightIndex());

        // Sets focus to the main layout, not the index text fields
        findViewById(R.id.mylayout).requestFocus();

    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // Removes title bar and sets content view
        this.requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);

        // Sets fonts for all
        Typeface font = Typeface.createFromAsset(getAssets(), "Roboto-Thin.ttf");
        ViewGroup root = (ViewGroup) findViewById(R.id.mylayout);
        setFont(root, font);

        // Gets the buttons references for the buttons
        final Button barColor = (Button) findViewById(R.id.barColor);
        final Button connectingLineColor = (Button) findViewById(R.id.connectingLineColor);
        final Button thumbColorNormal = (Button) findViewById(R.id.thumbColorNormal);
        final Button thumbColorPressed = (Button) findViewById(R.id.thumbColorPressed);
        final Button resetThumbColors = (Button) findViewById(R.id.resetThumbColors);
        final Button refreshButton = (Button) findViewById(R.id.refresh);
        
        //Sets the buttons to bold.
        refreshButton.setTypeface(font,Typeface.BOLD);
        barColor.setTypeface(font,Typeface.BOLD);
        connectingLineColor.setTypeface(font,Typeface.BOLD);
        thumbColorNormal.setTypeface(font,Typeface.BOLD);
        thumbColorPressed.setTypeface(font,Typeface.BOLD);
        resetThumbColors.setTypeface(font,Typeface.BOLD);

        // Sets initial colors for the Color buttons
        barColor.setTextColor(DEFAULT_BAR_COLOR);
        connectingLineColor.setTextColor(DEFAULT_CONNECTING_LINE_COLOR);
        thumbColorNormal.setTextColor(HOLO_BLUE);
        thumbColorPressed.setTextColor(HOLO_BLUE);

        // Gets the RangeBar
        rangebar = (RangeBar) findViewById(R.id.rangebar1);

        // Setting Index Values -------------------------------

        // Gets the index value TextViews
        final EditText leftIndexValue = (EditText) findViewById(R.id.leftIndexValue);
        final EditText rightIndexValue = (EditText) findViewById(R.id.rightIndexValue);

        // Sets the display values of the indices
        rangebar.setOnRangeBarChangeListener(new RangeBar.OnRangeBarChangeListener() {
            @Override
            public void onIndexChangeListener(RangeBar rangeBar, int leftThumbIndex, int rightThumbIndex) {

                leftIndexValue.setText("" + leftThumbIndex);
                rightIndexValue.setText("" + rightThumbIndex);
            }
        });

        // Sets the indices themselves upon input from the user
        refreshButton.setOnClickListener(new View.OnClickListener() {
            @TargetApi(Build.VERSION_CODES.GINGERBREAD) public void onClick(View v) {

                // Gets the String values of all the texts
                String leftIndex = leftIndexValue.getText().toString();
                String rightIndex = rightIndexValue.getText().toString();

                // Catches any IllegalArgumentExceptions; if fails, should throw
                // a dialog warning the user
                try {
                    if (!leftIndex.isEmpty() && !rightIndex.isEmpty())
                    {
                        int leftIntIndex = Integer.parseInt(leftIndex);
                        int rightIntIndex = Integer.parseInt(rightIndex);
                        rangebar.setThumbIndices(leftIntIndex, rightIntIndex);
                    }
                } catch (IllegalArgumentException e) {
                }
            }
        });

        // Setting Number Attributes -------------------------------

        // Sets tickCount
        final TextView tickCount = (TextView) findViewById(R.id.tickCount);
        SeekBar tickCountSeek = (SeekBar) findViewById(R.id.tickCountSeek);
        tickCountSeek.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar tickCountSeek, int progress, boolean fromUser) {
                try {
                    rangebar.setTickCount(progress);
                } catch (IllegalArgumentException e) {
                }
                tickCount.setText("tickCount = " + progress);
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
            }
        });

        // Sets tickHeight
        final TextView tickHeight = (TextView) findViewById(R.id.tickHeight);
        SeekBar tickHeightSeek = (SeekBar) findViewById(R.id.tickHeightSeek);
        tickHeightSeek.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar tickHeightSeek, int progress, boolean fromUser) {
                rangebar.setTickHeight(progress);
                tickHeight.setText("tickHeight = " + progress);
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
            }
        });

        // Sets barWeight
        final TextView barWeight = (TextView) findViewById(R.id.barWeight);
        SeekBar barWeightSeek = (SeekBar) findViewById(R.id.barWeightSeek);
        barWeightSeek.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {

            @Override
            public void onProgressChanged(SeekBar barWeightSeek, int progress, boolean fromUser) {
                rangebar.setBarWeight(progress);
                barWeight.setText("barWeight = " + progress);
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
            }
        });

        // Sets connectingLineWeight
        final TextView connectingLineWeight = (TextView) findViewById(R.id.connectingLineWeight);
        SeekBar connectingLineWeightSeek = (SeekBar) findViewById(R.id.connectingLineWeightSeek);
        connectingLineWeightSeek.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar connectingLineWeightSeek, int progress, boolean fromUser) {
                rangebar.setConnectingLineWeight(progress);
                connectingLineWeight.setText("connectingLineWeight = " + progress);
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
            }
        });

        // Sets thumbRadius
        final TextView thumbRadius = (TextView) findViewById(R.id.thumbRadius);
        SeekBar thumbRadiusSeek = (SeekBar) findViewById(R.id.thumbRadiusSeek);
        thumbRadiusSeek.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar thumbRadiusSeek, int progress, boolean fromUser) {
                if (progress == 0) {
                    rangebar.setThumbRadius(-1);
                    thumbRadius.setText("thumbRadius = N/A");
                }
                else {
                    rangebar.setThumbRadius(progress);
                    thumbRadius.setText("thumbRadius = " + progress);
                }
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
            }
        });

        // Setting Color Attributes---------------------------------

        // Sets barColor
        barColor.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                initColorPicker(Component.BAR_COLOR, mBarColor, mBarColor);
            }
        });

        // Sets connectingLineColor
        connectingLineColor.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                initColorPicker(Component.CONNECTING_LINE_COLOR, mConnectingLineColor, mConnectingLineColor);
            }
        });

        // Sets thumbColorNormal
        thumbColorNormal.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                initColorPicker(Component.THUMB_COLOR_NORMAL, mThumbColorNormal, mThumbColorNormal);
            }
        });

        // Sets thumbColorPressed
        thumbColorPressed.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                initColorPicker(Component.THUMB_COLOR_PRESSED, mThumbColorPressed, mThumbColorPressed);
            }
        });

        // Resets the thumbColors if selected
        resetThumbColors.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {

                rangebar.setThumbColorNormal(-1);
                rangebar.setThumbColorPressed(-1);

                mThumbColorNormal = -1;
                mThumbColorPressed = -1;

                thumbColorNormal.setText("thumbColorNormal = N/A");
                thumbColorPressed.setText("thumbColorPressed = N/A");
                thumbColorNormal.setTextColor(HOLO_BLUE);
                thumbColorPressed.setTextColor(HOLO_BLUE);
            }
        });

    }

    /**
     * Sets the changed color using the ColorPickerDialog.
     * 
     * @param component Component specifying which input is being used
     * @param newColor Integer specifying the new color to be selected.
     */
    @Override
    public void colorChanged(Component component, int newColor) {

        String hexColor = String.format("#%06X", (0xFFFFFF & newColor));

        switch (component)
        {
            case BAR_COLOR:
                mBarColor = newColor;
                rangebar.setBarColor(newColor);
                final TextView barColorText = (TextView) findViewById(R.id.barColor);
                barColorText.setText("barColor = " + hexColor);
                barColorText.setTextColor(newColor);
                break;

            case CONNECTING_LINE_COLOR:
                mConnectingLineColor = newColor;
                rangebar.setConnectingLineColor(newColor);
                final TextView connectingLineColorText = (TextView) findViewById(R.id.connectingLineColor);
                connectingLineColorText.setText("connectingLineColor = " + hexColor);
                connectingLineColorText.setTextColor(newColor);
                break;

            case THUMB_COLOR_NORMAL:
                mThumbColorNormal = newColor;
                rangebar.setThumbColorNormal(newColor);
                final TextView thumbColorNormalText = (TextView) findViewById(R.id.thumbColorNormal);

                if (newColor == -1) {
                    thumbColorNormalText.setText("thumbColorNormal = N/A");
                    thumbColorNormalText.setTextColor(HOLO_BLUE);
                }
                else {
                    thumbColorNormalText.setText("thumbColorNormal = " + hexColor);
                    thumbColorNormalText.setTextColor(newColor);
                }
                break;

            case THUMB_COLOR_PRESSED:
                mThumbColorPressed = newColor;
                rangebar.setThumbColorPressed(newColor);
                final TextView thumbColorPressedText = (TextView) findViewById(R.id.thumbColorPressed);

                if (newColor == -1) {
                    thumbColorPressedText.setText("thumbColorPressed = N/A");
                    thumbColorPressedText.setTextColor(HOLO_BLUE);
                }
                else {
                    thumbColorPressedText.setText("thumbColorPressed = " + hexColor);
                    thumbColorPressedText.setTextColor(newColor);
                }
        }
    }

    /**
     * Sets the font on all TextViews in the ViewGroup. Searches recursively for
     * all inner ViewGroups as well. Just add a check for any other views you
     * want to set as well (EditText, etc.)
     */
    private void setFont(ViewGroup group, Typeface font) {
        int count = group.getChildCount();
        View v;
        for (int i = 0; i < count; i++) {
            v = group.getChildAt(i);
            if (v instanceof TextView || v instanceof EditText || v instanceof Button) {
                ((TextView) v).setTypeface(font);
            } else if (v instanceof ViewGroup)
                setFont((ViewGroup) v, font);
        }
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    /**
     * Initiates the colorPicker from within a button function.
     * 
     * @param component Component specifying which input is being used
     * @param initialColor Integer specifying the initial color choice. *
     * @param defaultColor Integer specifying the default color choice.
     */
    private void initColorPicker(Component component, int initialColor, int defaultColor)
    {
        ColorPickerDialog colorPicker = new ColorPickerDialog(this,
                                                              this,
                                                              component,
                                                              initialColor,
                                                              defaultColor);
        colorPicker.show();

    }

}

you hav to add one more file in java that is Component.java

package com.example.rangebarsample;

public enum Component {
    BAR_COLOR, CONNECTING_LINE_COLOR, THUMB_COLOR_NORMAL, THUMB_COLOR_PRESSED,
}

SO, it’s  time to Run your project and you will see an awesome results .

OutPut –

rangebarrangebar_2rangebar_3

Feel free to ask anything and any topic you want to cover :p