Imitation of the progress bar/custom progressBar style captured by WeChat small video screen.

Today, there is a demand, that is, a progress bar with countdown is needed. The style refers to the effect of WeChat small video shooting.

It's the kind of effect where the two ends are indented in the middle.

first step:

First customize the style of the progressBar. roar_progressbar_color.xml

 

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <!-- The background gradient is a gradient, and corners define rounded corners-->
    <item android:id="@android:id/background">
        <shape>
            <solid android:color="#DA6547" />
        </shape>
    </item>
    <!-- Second progress bar color-->
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <solid android:color="#ffffff" />
            </shape>
        </clip>
    </item>
    <!-- progress bar -->
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <solid android:color="#DA6547" />
            </shape>
        </clip>
    </item>

</layer-list>

 

Step 2:

The progress reference in the layout file.

    <ProgressBar
        android:id="@+id/pb_progress1"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="5dp"
        android:progressDrawable="@drawable/roar_progressbar_color" />

 

Note: Set the style of progressBar to be horizontal.

This basically achieves the usual effect.

Then now we want to realize the effect of the two ends of the WeChat small video screen going to the middle. At this time, we can use Progress and SecondaryProgress to control the progress.

First, what we define in styles plays a big role.

Note: Our progress and background colors are the same. This will have the effect of going inside.

Then we can manually set the size of the progress.

Get the size first.

 

		// progress bar
		progress.setProgress(0);
		progress.setSecondaryProgress(progress.getMax());
		// Save the data of the first progress and the second progress
		mPro = progress.getProgress();
		mSpro = progress.getMax();

 

Finally set it manually (this code needs to be called back continuously to produce effect)

progress.setProgress(mPro += 1);
progress.setSecondaryProgress(mSpro -= 1);