How to add vertical lines above seekbar in android

Question

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 vertical lines above seekbar.

can you provide me solution for this? Thanks in advance.

Answer 1

xml file

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:orientation="horizontal">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center">

            <View
                android:id="@+id/view1"
                android:layout_width="3dp"
                android:layout_height="match_parent"
                android:background="#000000" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center">

            <View
                android:id="@+id/view2"
                android:layout_width="3dp"
                android:layout_height="match_parent"
                android:background="#000000" />

        </LinearLayout>


        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center">

            <View
                android:id="@+id/view3"
                android:layout_width="3dp"
                android:layout_height="match_parent"
                android:background="#000000" />

        </LinearLayout>


        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center">

            <View
                android:id="@+id/view4"
                android:layout_width="3dp"
                android:layout_height="match_parent"
                android:background="#000000" />

        </LinearLayout>


        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center">

            <View
                android:id="@+id/view5"
                android:layout_width="3dp"
                android:layout_height="match_parent"
                android:background="#000000" />

        </LinearLayout>




    </LinearLayout>

    <SeekBar
        android:id="@+id/seekbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp" />


</LinearLayout>

Java File

public class SampleActivity extends AppCompatActivity {

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

    @Override
    protected 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() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int i, boolean b) {
                changeColor(i);
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public 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));

        } else if (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));
        } else if (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));
        } else if (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));
        } else if (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));
        } else if (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

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

Answer 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

<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="oval">
    <size android:width="4dp"
          android:height="4dp"/>
    <solid android:color="@android:color/white"/>
</shape>

Answer 3

in layout.xml file add,

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="10dp"
    android:layout_alignTop="@+id/seek_bar"
    android:layout_marginTop="-20dp"
    android:weightSum="10">

    <TextView
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:id="@+id/line1"
        android:background="@drawable/line_selected" />

    <TextView
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:id="@+id/line2"
        android:background="@drawable/line_selected" />

    <TextView
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:id="@+id/line3"
        android:background="@drawable/line_selected" />

    <TextView
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:id="@+id/line4"
        android:background="@drawable/line_selected" />

    <TextView
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:id="@+id/line5"
        android:background="@drawable/line_selected" />

    <TextView
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:id="@+id/line6"
        android:background="@drawable/lines" />

    <TextView
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:id="@+id/line7"
        android:background="@drawable/lines" />

    <TextView
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:id="@+id/line8"
        android:background="@drawable/lines" />

    <TextView
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:id="@+id/line9"
        android:background="@drawable/lines" />

    <TextView
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:id="@+id/line10"
        android:background="@drawable/lines" />

</LinearLayout>

<SeekBar
    android:id="@+id/seek_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

add lines.xml in drawable folder like this,

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:bottom="-3dp"
        android:left="-3dp"
        android:top="-3dp">

        <shape android:shape="rectangle">
            <solid android:color="@color/transparent" />
            <stroke
                android:width="2dp"
                android:color="#bebebe" />
        </shape>
    </item>
</layer-list>

add line_selected.xml in drawable folder like this,

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:bottom="-3dp"
        android:left="-3dp"
        android:top="-3dp">

        <shape android:shape="rectangle">
            <solid android:color="@color/transparent" />
            <stroke
                android:width="2dp"
                android:color="#1fc78c" />
        </shape>
    </item>
</layer-list>

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