Implementation of Android circular volume bar

        Due to recent project requirements, the original volume bar needs to be replaced with a circular one. At the beginning, the ProgressBar of the system was used, but the expected effect was not achieved, so I decided to use a custom View to achieve it. First look at the renderings:

Overview:

1. First customize the properties of View and draw a ring shape

2. Find the code displayed by the volume bar in the framework and replace it with a custom layout

The process of customizing the circular volume bar:

1. It is necessary to inherit the View in Android, and initialize some color values ​​​​needed by the circular progress bar.

    private int mRoundColor = Color.parseColor("#ccffffff");//20%白色透明，圆环背景色
    private int mRroundProgressColor = Color.parseColor("#00b4ff");//蓝色，圆环进度颜色
    private float mRoundWidth = 25;//圆环宽度
    private int mMaxValue = 100;//最大值
    private int mCurrentPorgress;
    private int startAngle;

    public RoundProgressBar(Context context) {
        this(context, null);
    }

    public RoundProgressBar(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public RoundProgressBar(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        mPaint = new Paint();
        startAngle = -90;
        setLayerType(View.LAYER_TYPE_HARDWARE, null);
    }

2. Draw the outermost ring

        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(mRoundWidth);
        mPaint.setAntiAlias(true);
        canvas.drawCircle(center, center, radius, mPaint);

3. Draw the innermost ring 

        mPaint.setColor(mRroundProgressColor);
        RectF oval = new RectF(center - radius, center - radius, center
                + radius, center + radius);
        mPaint.setStrokeCap(Paint.Cap.ROUND);
        mPaint.setStyle(Paint.Style.STROKE);
        canvas.drawArc(oval, startAngle, 360 * mCurrentPorgress / mMaxValue,
                false, mPaint);

4. Set the progress display of the ring

public synchronized void setProgress(int progress) {
        if (progress < 0) {
            return;
        }
        if (progress > mMaxValue) {
            progress = mMaxValue;
        }
        if (progress <= mMaxValue) {
            mCurrentPorgress = progress;
            postInvalidate();
        }
    }

         At this point, the custom ring progress bar is completed, the code is very simple, the most important thing is to find the code position displayed by the system volume bar and replace it.

 

Modify the system volume bar display

You can find the location of this code by looking at the calling process of the system volume bar SystemUI/src/com/android/systemui/volume/VolumePanel.java

1. The VolumePanel class mainly sets the display layout of the volume bar. First of all, we need to see clearly the type of volume to be set. Private enum StreamResources shows several types of system volume, including ringtones, Bluetooth, music and other types of volume bars.
2. Next, we need to initialize our custom circular progress bar. VolumePanel(Context context, ZenModeController zenController) initializes the layout file we want to load in this method and createSliders() method. At the same time, we can also customize the display position and size.
3. Finally, set the volume value in the updateSliderProgress() method.

So far, the custom ring volume bar has been introduced.