Vertical Bars show chemical level android like attached image

Issue

I want to draw same vertical bars to show different levels of different chemicals shown as below image

Can anyone help me to draw the same UI? Thanks in advance.

Solution

What you need is a vertical SeekBar.Add rotation attribute to normal SeekBar.

<SeekBar
    android:id="@+id/seek_bar_1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:rotation="270"/>

Then, create a gradient drawable to use it for the SeekBar.

<?xml version = "1.0" encoding = "utf-8" ?>
<shape
android:shape = "rectangle"
xmlns:android = "http://schemas.android.com/apk/res/android" >

<gradient
    android:startColor = "#F40303"
    android:centerColor = "#055798"
    android:endColor = "#00FF0C"
    android:angle = "90"
    android:type = "linear" />
</shape>

The, set the progressDrawable to a transparent color. And finally, to prevent users from changing the seekbar knob position, add onTouchListener like this:

seekBar.setOnTouchListener(new OnTouchListener(){
@Override
public boolean onTouch(View v, MotionEvent event) {
    return true;
  }
});

Answered By - Hirak Chhatbar