I realized a custom progress bar, but I want to improve that

Question

I realized a custom progress bar, and to do that I have extended a View. This progress bar is filled in base of some value received from a thread, moreover this view also contains a vertical line that change position related to pression button, a counter that indicate the position of the vertical line. And the shape of progress bar is a triangle rectangle.

In my extendev view I implemented this method :

public void setPowerBar(int Power)
    {
        pbIndex = 0;


        invalidate();
        requestLayout();

    }

this is the ondraw :

@Override
public void onDraw(Canvas canvas)
{
    super.onDraw(canvas);
    canvas.drawColor(Color.TRANSPARENT);

    int width = ((pbIndex-20) * pb_i[0].getScaledWidth(canvas.getDensity())) / 180;
    int height = pb_i[0].getScaledHeight(canvas.getDensity())-(((pbIndex-20) * pb_i[0].getScaledHeight(canvas.getDensity())) / 180);

    dst.set(0, height, width, pb_i[0].getScaledHeight(canvas));

    canvas.drawBitmap(pb_i[0], 0, 0, null);

    canvas.drawBitmap(pb_i[1],null,dst,null);



    float dim = (pb_i[0].getScaledWidth(canvas.getDensity()));
    float step = dim/180;
    float xPos = ((orangePower-20)*step);

    canvas.drawLine(xPos, 0, xPos, pb_i[0].getScaledHeight(canvas), paintLine);

    canvas.drawText("" + orangePower, (dim / 2), pb_i[0].getScaledHeight(canvas), textPaint);

}

where

• pbIndex is the power
• pb_i[0] is the background image

This is the result :

Can you help me to improve my implementation ?

Problem list:

1. I have to optimize the code with @pskink suggestion.

2. I want to add some animator, because I want much fluidity

3. The ram consumption

4. The vertical line appears different on different device.

       paintLine = new Paint();
       paintLine.setColor(Color.parseColor("#FD8F40"));
       paintLine.setAntiAlias(true);
       paintLine.setStrokeWidth(7);
   

In particular the stroke width appears different

---

Second implementation : in my layout xml I insert this :

 <com.example.canvastest.PowerBar
                android:id="@+id/power_bar"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:max="200"
                android:progress="0"
                style="?android:attr/progressBarStyleHorizontal"
                android:maxHeight="12dip"
                android:minHeight="12dip"
                />

Then I add this drawable :

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:id="@android:id/background">
        <clip>
            <bitmap android:src="@drawable/pb_0" />
        </clip>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <bitmap android:src="@drawable/pb_100" />
        </clip>
    </item>
</layer-list>

Then I extend progressbar and its ondraw method :

@Override
    public synchronized void onDraw(Canvas canvas)
    {
        super.onDraw(canvas);
        float dim = (canvas.getWidth());
        float step = dim/180;
        float xPos = ((orangePower-20)*step);

        canvas.drawLine(xPos, 0, xPos, canvas.getHeight(), paintLine);

        canvas.drawText("" + orangePower, (dim / 2),canvas.getHeight(), textPaint);
    }

But I have two problems :

1- when the progress is 20 the progress bar must be empty 2- the background is white and not the @drawable/pb_0 3- I have to insert some animator inside ondraw method

---

Answer 1

Please check another drawBitmap method of canvas here.

For instance:

@Override
public void onDraw(Canvas canvas)
{
    super.onDraw(canvas);
    canvas.drawColor(Color.TRANSPARENT);
    // VIEW_WIDTH & VIEW_HEIGHT is the size of your progress bar, MAX_POWER is the max value of the Power
    int width = (Power * VIEW_WIDTH) / MAX_POWER;
    Rect dst = new Rect(0, 0, width, VIEW_HEIGHT);
    // only need one bitmap
    canvas.drawBitmap(pb_i[10], null, 0, null);
}