Is a multicolored Android slider available as a library?

Question

I want to create this type of slider

I don't want the code but the directions. what is the best thing to do this?

• is there any similar library project available?
• is there any similar view already available natively.
• is this more easy to create in Jetpack compose UI.

Answer 1

You can edit the following resources.

https://github.com/divyanshub024/ColorSeekBar

custom scroll able multi color seek bar

Answer 2

I built something similar with Jetpack Compose, instead of using different colors with intervals it creates gradients from colors, but what you ask is a little work on current build and it can display anything as thumb. You can check source code and implement drawing over track section. If it's much work i can add similar features when i'm available.

The easiest way of doing this in Compose Canvas, for View it's a custom View that draws inside onDraw.

You basically draw a line with width and rounded cap or a rounded rectangle and draw border with a stroke around it. Do some interpolation for changing from your value range to pixels on screen and get the current value based on users touch position and interpolate it to range defined.

Let's say your Slider is 1000px wide. And your range is between 0f and 1f, you translate touch on 600px to 0.6 value and vice versa. For different colors you can pass a List<Pair<Color,Float> to divide slider between color based on float based stops.

For drawing lines you set 3 types of heights and use modulus to assign each height in every 1, 5 and 20 value. I have something similar for building Compass with View here

https://github.com/SmartToolFactory/Compose-Colorful-Sliders

Answer 3

Since you refer to the view you want as a "slider", I assume that you are thinking about using something from the Material Design library. My personal experience with the Material Design views are that they primarily enforce the MD guideline and are not very flexible although they may work for you in this case.

• is there any similar library project available?

As for libraries, it looks like the other answers point to some that may be capable of what you are looking for.

• is there any similar view already available natively.

I suggest that you take a look at using a SeekBar not because I think that it is necessarily better, but I believe that you can get the result you want with a little effort that would not have external dependencies other than the standard libararies.

Here is another answer of mine that explains how to build a SeekBar similar in structure that you are looking for. Your background would be the rounded rectangle with gradient shading. The background colors can be defined as explained here. Your seek bar can be built using a LayerList. The layer list can be defined in XML and modified in code. You can also forgo the layer list and draw that seek bar programmatically or fit everything into one drawable. Which you do will depends on your design constraints.

The thumb can easily be a custom thumb.

You will likely wind up with mostly XML but some code but not much. I would consider placing the code in a custom view that extends from a standard SeekBar.