How To Add Vertical Lines Above Seekbar In Android

I am new in android and I have a small goal to achieve. I want to create a seekbar exact like that, I know how to work with normal seekbar but don't have any idea to add those ver

Solution 1:

xml file

<LinearLayoutandroid:layout_width="match_parent"android:layout_height="10dp"android:orientation="horizontal"><LinearLayoutandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"><Viewandroid:id="@+id/view1"android:layout_width="3dp"android:layout_height="match_parent"android:background="#000000" /></LinearLayout><LinearLayoutandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"><Viewandroid:id="@+id/view2"android:layout_width="3dp"android:layout_height="match_parent"android:background="#000000" /></LinearLayout><LinearLayoutandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"><Viewandroid:id="@+id/view3"android:layout_width="3dp"android:layout_height="match_parent"android:background="#000000" /></LinearLayout><LinearLayoutandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"><Viewandroid:id="@+id/view4"android:layout_width="3dp"android:layout_height="match_parent"android:background="#000000" /></LinearLayout><LinearLayoutandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"><Viewandroid:id="@+id/view5"android:layout_width="3dp"android:layout_height="match_parent"android:background="#000000" /></LinearLayout></LinearLayout><SeekBarandroid:id="@+id/seekbar"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="10dp" /></LinearLayout>

Java File

publicclassSampleActivityextendsAppCompatActivity{

    private SeekBar seekBar;
    private View view1;
    private View view2;
    private View view3;
    private View view4;
    private View view5;

    @Overrideprotected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.sample);
        initView();
    }

    private void initView() {
        seekBar = (SeekBar) findViewById(R.id.seekbar);
        view1 = findViewById(R.id.view1);
        view2 = findViewById(R.id.view2);
        view3 = findViewById(R.id.view3);
        view4 = findViewById(R.id.view4);
        view5 = findViewById(R.id.view5);


        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Overridepublic void onProgressChanged(SeekBar seekBar, int i, boolean b) {
                changeColor(i);
            }

            @Overridepublic void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Overridepublic void onStopTrackingTouch(SeekBar seekBar) {

            }
        });
    }

    private void changeColor(final int i) {
        if (i == 0) {
            view1.setBackgroundColor(ContextCompat.getColor(this, R.color.black));
            view2.setBackgroundColor(ContextCompat.getColor(this, R.color.black));
            view3.setBackgroundColor(ContextCompat.getColor(this, R.color.black));
            view4.setBackgroundColor(ContextCompat.getColor(this, R.color.black));
            view5.setBackgroundColor(ContextCompat.getColor(this, R.color.black));

        } elseif (i > 0 && i <= 20) {
            view1.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
            view2.setBackgroundColor(ContextCompat.getColor(this, R.color.black));
            view3.setBackgroundColor(ContextCompat.getColor(this, R.color.black));
            view4.setBackgroundColor(ContextCompat.getColor(this, R.color.black));
            view5.setBackgroundColor(ContextCompat.getColor(this, R.color.black));
        } elseif (i > 20 && i <= 40) {
            view1.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
            view2.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
            view3.setBackgroundColor(ContextCompat.getColor(this, R.color.black));
            view4.setBackgroundColor(ContextCompat.getColor(this, R.color.black));
            view5.setBackgroundColor(ContextCompat.getColor(this, R.color.black));
        } elseif (i > 40 && i <= 60) {
            view1.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
            view2.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
            view3.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
            view4.setBackgroundColor(ContextCompat.getColor(this, R.color.black));
            view5.setBackgroundColor(ContextCompat.getColor(this, R.color.black));
        } elseif (i > 60 && i <= 80) {
            view1.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
            view2.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
            view3.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
            view4.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
            view5.setBackgroundColor(ContextCompat.getColor(this, R.color.black));
        } elseif (i > 80 && i <= 100) {
            view1.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
            view2.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
            view3.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
            view4.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
            view5.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
        }
    }
}

color.xml

<colorname="green">#29BC4F</color><colorname="black">#000000</color>

Solution 2:

See this third party lib https://github.com/edmodo/range-bar/wiki

with some customization u will get those (vertical lines)tick marks.

Also refer this answer Align tick marks to an Android SeekBar

https://www.informaticscentre.co.uk/blog/implementing-a-seekbar-with-stepped-intervals-in-android

You can use this style style="@style/Widget.AppCompat.SeekBar.Discrete" to create a seekbar as per your requirement :

code can be like this :

<SeekBar
    android:id="@+id/seekBar"
    style="@style/Widget.AppCompat.SeekBar.Discrete"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:max="10"
    />

Or add them manually by setting the tickMark drawable:

<SeekBar
    android:id="@+id/seekBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:max="10"
    android:tickMark="@drawable/tickmark"
    />

tickmark.xml

<shapexmlns:android="http://schemas.android.com/apk/res/android"android:shape="oval"><sizeandroid:width="4dp"android:height="4dp"/><solidandroid:color="@android:color/white"/></shape>

Solution 3:

in layout.xml file add,

<LinearLayoutandroid:layout_width="match_parent"android:layout_height="10dp"android:layout_alignTop="@+id/seek_bar"android:layout_marginTop="-20dp"android:weightSum="10"><TextViewandroid:layout_width="1dp"android:layout_height="match_parent"android:layout_weight="1"android:id="@+id/line1"android:background="@drawable/line_selected" /><TextViewandroid:layout_width="1dp"android:layout_height="match_parent"android:layout_weight="1"android:id="@+id/line2"android:background="@drawable/line_selected" /><TextViewandroid:layout_width="1dp"android:layout_height="match_parent"android:layout_weight="1"android:id="@+id/line3"android:background="@drawable/line_selected" /><TextViewandroid:layout_width="1dp"android:layout_height="match_parent"android:layout_weight="1"android:id="@+id/line4"android:background="@drawable/line_selected" /><TextViewandroid:layout_width="1dp"android:layout_height="match_parent"android:layout_weight="1"android:id="@+id/line5"android:background="@drawable/line_selected" /><TextViewandroid:layout_width="1dp"android:layout_height="match_parent"android:layout_weight="1"android:id="@+id/line6"android:background="@drawable/lines" /><TextViewandroid:layout_width="1dp"android:layout_height="match_parent"android:layout_weight="1"android:id="@+id/line7"android:background="@drawable/lines" /><TextViewandroid:layout_width="1dp"android:layout_height="match_parent"android:layout_weight="1"android:id="@+id/line8"android:background="@drawable/lines" /><TextViewandroid:layout_width="1dp"android:layout_height="match_parent"android:layout_weight="1"android:id="@+id/line9"android:background="@drawable/lines" /><TextViewandroid:layout_width="1dp"android:layout_height="match_parent"android:layout_weight="1"android:id="@+id/line10"android:background="@drawable/lines" /></LinearLayout><SeekBarandroid:id="@+id/seek_bar"android:layout_width="match_parent"android:layout_height="wrap_content" />

add lines.xml in drawable folder like this,

<layer-listxmlns:android="http://schemas.android.com/apk/res/android"><itemandroid:bottom="-3dp"android:left="-3dp"android:top="-3dp"><shapeandroid:shape="rectangle"><solidandroid:color="@color/transparent" /><strokeandroid:width="2dp"android:color="#bebebe" /></shape></item></layer-list>

add line_selected.xml in drawable folder like this,

<layer-listxmlns:android="http://schemas.android.com/apk/res/android"><itemandroid:bottom="-3dp"android:left="-3dp"android:top="-3dp"><shapeandroid:shape="rectangle"><solidandroid:color="@color/transparent" /><strokeandroid:width="2dp"android:color="#1fc78c" /></shape></item></layer-list>

You can change the line color programatically by changing the textview background.