How to create Step wise - Progress Bar in Android

问题

I want to enroll user's voice as input for 3 times. For that I want to create a UI (the XML File) which would animate by moving from step 1 to step 2 when first recording is done which would be controlled by start stop buttons. and eventually move to step 3..... Something like this -

I dont know how to explain to google this! Please help!!

回答1:

The most similar Android component to the image you provided probably is Android's discrete SeekBar:

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

style="@style/Widget.AppCompat.SeekBar.Discrete" together with android:max="3" will divide the bar in 3 parts and delimit them with 4 ticks which can represent in your case user input phases.

The attribute progress will then reflect the phases with the integer values 0, 1, 2, 3 which you can set to go on with the progress:

private SeekBar mSeekBar = (SeekBar) findViewById(R.id.seekbar);

public void nextPhase() {
    mSeekBar.setProgress(mSeekBar.getProgress() + 1);
}

Note that SeekBar is intended for user input so if it has to be controlled only by your button/vocal input events the normal behavior has to be disabled:

mSeekBar.setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        // True doesn't propagate the event
        // the user cannot move the indicator
        return true;
    }
});

If you want to display some text next to every step tick but don't want to extend SeekBar you can try to align 4 TextViews below the bar with a LinearLayout or TableLayout and play with layout_weight and widths, here the even view distribution topic is discussed is it possible to evenly distribute buttons across the width of an android linearlayout.

However the animation won't work smoothly in the discrete version of SeekBar because of the small values of progress. If you want an animation you should use a normal 0-100 progress SeekBar or create your custom one to support steps, something like this:

public class StepsSeekBar extends SeekBar {

    int mSteps;
    int mCurrentStep;
    int mStepWidth;

    public StepsSeekBar(Context context, AttributeSet attrs, int steps) {
        super(context, attrs);
        mSteps = steps;
        mCurrentStep = 0;
        mStepWidth = 100 / mSteps;
    }

    public nextStep() {
        // Animate progress to next step
        ObjectAnimator animator = ObjectAnimator.ofInt(this, "progress", mStepWidth * mCurrentStep, mStepWidth * (++mCurrentStep));
        animator.setDuration(/* Duration */);
        animator.start();
    }
}

The aspect of the bar can be customized in the theme:

<style name="StepsSeekBar" parent="Base.Widget.AppCompat.SeekBar">
    <item name="android:indeterminateOnly"></item>
    <item name="android:progressDrawable"></item>
    <item name="android:indeterminateDrawable"></item>
    <item name="android:thumb"><!-- The circle drawable --></item>
    <item name="android:focusable"></item>
</style>
<!-- In the discrete SeekBar -->
<item name="tickMark"><!-- The circles indicating steps --></item>

Here How add TextView in middle of SeekBar thumb? you can find more information on how to add text in the progress thumb.

The normal horizontal ProgressBar can also be used but it doesn't show an indicator, it has to be drawn in a custom implementation.

来源：https://stackoverflow.com/questions/44989575/how-to-create-step-wise-progress-bar-in-android

标签

android

android-progressbar