How to create custom progress bar in android?

Question

How can I design this progress bar in android? I have to do it in XML or canvas, not in jetpack compose.

I tried to customize the built in horizontal progress bar but couln't come up with anything near. I must show the percentage text in a circle. Any idea about how to do that?

Answer 1

Creating a custom SeekBar in Android with a thumb that displays a percentage text in the center involves a few steps. Here’s a basic outline of how you can achieve this:

1. Custom Drawable for Thumb:Create a custom drawable that will serve as the thumb for the SeekBar. You will draw the percentage text on this drawable.
2. Custom SeekBar Implementation:Use the custom drawable as the thumb for your SeekBar.
3. Layout XML:Define the SeekBar in your layout with the necessary attributes.

Here is a simplified implementation of these steps:

Step 1: Create a Custom Drawable

Create a new class TextThumbDrawable extending Drawable to draw the thumb with text.

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PixelFormat;
import android.graphics.Rect;
import android.graphics.drawable.Drawable;

public class TextThumbDrawable extends Drawable {
    private final Paint paint;
    private final float density;
    private String text = "0%";

    public TextThumbDrawable(Context context) {
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setColor(Color.BLACK);
        paint.setTextSize(40); // Adjust size as needed
        paint.setTextAlign(Paint.Align.CENTER);
        density = context.getResources().getDisplayMetrics().density;
    }

    @Override
    public void draw(Canvas canvas) {
        Rect bounds = getBounds();
        float x = bounds.centerX();
        float y = bounds.centerY() - ((paint.descent() + paint.ascent()) / 2);
        canvas.drawText(text, x, y, paint);
    }

    @Override
    public void setAlpha(int alpha) {
        paint.setAlpha(alpha);
        invalidateSelf();
    }

    @Override
    public void setColorFilter(android.graphics.ColorFilter colorFilter) {
        paint.setColorFilter(colorFilter);
        invalidateSelf();
    }

    @Override
    public int getOpacity() {
        return PixelFormat.TRANSLUCENT;
    }

    public void setText(String text) {
        this.text = text;
        invalidateSelf();
    }
}

Step 2: Implement the Custom SeekBar

Use TextThumbDrawable for the SeekBar thumb in your activity or fragment.

import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.widget.SeekBar;

import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    private TextThumbDrawable textThumb;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        SeekBar seekBar = findViewById(R.id.seekBar);
        textThumb = new TextThumbDrawable(this);
        seekBar.setThumb(textThumb);

        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                int percent = (int) ((progress / (float) seekBar.getMax()) * 100);
                textThumb.setText(percent + "%");
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {}

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {}
        });
    }
}

Step 3: Layout XML

Define your SeekBar in the XML layout file, such as activity_main.xml.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <SeekBar
        android:id="@+id/seekBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="100" />

</LinearLayout>

Explanation

• TextThumbDrawable: This custom drawable class is responsible for drawing the text on the thumb of the SeekBar. It updates the text each time the progress changes. • SeekBar Listener: The OnSeekBarChangeListener updates the text on the thumb whenever the progress changes.

This approach should provide a SeekBar with a thumb that displays a percentage directly in the center. You might need to adjust the text size, thumb size, or colors to better fit your design.