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>