Skip to content

Instantly share code, notes, and snippets.

@yqritc

yqritc/TextThumbSeekBar.md

Last active April 17, 2024 08:26
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save yqritc/7b5c786930dfb9b47e7a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save yqritc/7b5c786930dfb9b47e7a to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. yqritc revised this gist Jan 14, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion TextThumbSeekBar.md
    View file
    Original file line number Diff line number Diff line change
    @@ -12,7 +12,7 @@ public class TextThumbSeekBar extends SeekBar {
    }

    public TextThumbSeekBar(Context context, AttributeSet attrs) {
    this(context, attrs, R.attr.seekBarStyle);
    this(context, attrs, android.R.attr.seekBarStyle);
    }

    public TextThumbSeekBar(Context context, AttributeSet attrs, int defStyleAttr) {
  2. yqritc created this gist Jan 14, 2016.
    80 changes: 80 additions & 0 deletions TextThumbSeekBar.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,80 @@
    ### TextThumbSeekBar

    Define a custom class extending SeekBar to show the progress text on thumb of SeekBar.
    ```java
    public class TextThumbSeekBar extends SeekBar {

    private int mThumbSize;
    private TextPaint mTextPaint;

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

    public TextThumbSeekBar(Context context, AttributeSet attrs) {
    this(context, attrs, R.attr.seekBarStyle);
    }

    public TextThumbSeekBar(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);

    mThumbSize = getResources().getDimensionPixelSize(R.dimen.thumb_size);

    mTextPaint = new TextPaint();
    mTextPaint.setColor(Color.WHITE);
    mTextPaint.setTextSize(getResources().getDimensionPixelSize(R.dimen.thumb_text_size));
    mTextPaint.setTypeface(Typeface.DEFAULT_BOLD);
    mTextPaint.setTextAlign(Paint.Align.CENTER);
    }

    @Override
    protected synchronized void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    String progressText = String.valueOf(getProgress());
    Rect bounds = new Rect();
    mTextPaint.getTextBounds(progressText, 0, progressText.length(), bounds);

    int leftPadding = getPaddingLeft() - getThumbOffset();
    int rightPadding = getPaddingRight() - getThumbOffset();
    int width = getWidth() - leftPadding - rightPadding;
    float progressRatio = (float) getProgress() / getMax();
    float thumbOffset = mThumbSize * (.5f - progressRatio);
    float thumbX = progressRatio * width + leftPadding + thumbOffset;
    float thumbY = getHeight() / 2f + bounds.height() / 2f;
    canvas.drawText(progressText, thumbX, thumbY, mTextPaint);
    }
    }
    ```

    ### smaple.xml
    Use TextThumbSeekBar in your layout xml as following.
    ```xml
    <com.yqritc.sample.TextThumbSeekBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:max="10"
    android:progress="5"
    android:thumb="@drawable/shape_seek_bar_text_thumb"
    android:thumbOffset="4dp"/>
    ```

    ### shape_seek_bar_text_thumb.xml
    Define custom thumb drawable as you need like the following.
    ```xml
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/primary_color"/>
    <size
    android:width="@dimen/thumb_size"
    android:height="@dimen/thumb_size"/>
    </shape>
    ```

    ### Note
    If you use image drawable as the thumb instead of xml shape drawable, set the following attribute if the background of your drawable is transparent.
    ```xml
    android:splitTrack="false"
    ```

    DONE.