How to get dashed Horizontal Progressbar in Android?

Question

I need to design a dashed progressbar as shown in attached.

This is what I have done so far, It displays a normal progressbar with two different colors, one for progress and another for other.

<ProgressBar
    android:id="@+id/progress_bar"
    style="@android:style/Widget.ProgressBar.Horizontal"
    android:layout_width="match_parent"
    android:layout_height="3dp"
    android:progressDrawable="@drawable/bg_progress_bar_green"
    />

And bg_progress_bar_green is here

 <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">
    <shape>
        <solid android:color="#E0E1EA" />
    </shape>
</item>

<item android:id="@android:id/progress">
    <clip>
        <shape>
            <solid android:color="#66BA6B" />
        </shape>
    </clip>
</item>

And this is how I update the progressbar :

 progressBar.setProgress(numOfHours);

How do I get dashed line of bar as shown?

Answer 1

You can use this library for your work Step Progress Bar. I'm providing code in case of link changed.

Gradle

dependencies {
   ...
   compile 'com.marcok.stepprogressbar:stepprogressbar:1.0.1'
}

Usage

 <com.marcok.stepprogressbar.StepProgressBar
    android:layout_centerVertical="true"
    android:layout_height="0dp"
    android:layout_width="wrap_content"
    android:id="@+id/stepProgressBar"
    app:cumulativeDots="false"
    app:activeDotIndex="0"
    app:activeDotColor="@color/material_deep_teal_500"
    app:inactiveDotColor="@color/material_blue_grey_800"
    app:activeDotIcon="@drawable/active_dot.png"
    app:inactiveDotIcon="@drawable/inactive_dot.png"
    app:numberDots="6"
    app:dotSize="20dp"
    app:spacing="20dp"/>

• If dot icons are provided, they override dot colors
• Layout height is irrelevant and determined by the dotSize

Java Code

• To move to the next dot or previous dot:

  StepProgressBar mStepProgressBar =(StepProgressBar)findViewById(R.id.stepProgressBar); mStepProgressBar.next(); mStepProgressBar.previous();

  • To set the dots to be cumulative (all dots <= the specified index will show as active), call setCumulativeDots(true)

  • Calling setCurrentProgressDot(-1) will prevent any dots from showing as active. Any lower values will throw IndexOutOfBoundsExeption.

  • Other methods:

  setCurrentProgressDot(); setNumDots(); setActiveColor(); setInactiveColor(); setActiveDrawable(); setInactiveDrawable();

DRAWABLES FOR RECTANGLE PROGRESS

use these two drawbles..

inactive_dot.png

active_dot.png