带文字的seekbar ： 自定义progressDrawable/thumb ：解决显示不全

demo1

自定义view

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.drawable.Drawable;
import android.text.TextPaint;
import android.util.AttributeSet;

import androidx.annotation.NonNull;
import androidx.appcompat.widget.AppCompatSeekBar;

public class TextSeekbar extends AppCompatSeekBar {
    // 画笔
    private Paint mPaint;
    // 进度文字位置信息
    private final Rect mProgressTextRect = new Rect();
    // 滑块按钮宽度
    private int mThumbWidth = 100;

    public TextSeekbar(@NonNull Context context) {
        this(context, null);
    }

    public TextSeekbar(@NonNull Context context, AttributeSet attrs) {
        this(context, attrs, -1);
    }

    public TextSeekbar(@NonNull Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        mPaint = new TextPaint();
        mPaint.setAntiAlias(true);
        mPaint.setColor(getResources().getColor(R.color.color_FF000000));
        mPaint.setTextSize(getResources().getDimension(R.dimen.dp_19));
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);

        // 若是不设置padding，当滑动到最左边或最右边时，滑块会显示不全
        Drawable thumb = getThumb();
        if (thumb != null) {
            mThumbWidth = thumb.getIntrinsicWidth();
            setPadding(mThumbWidth / 2, 0, mThumbWidth / 2, 0);
        }
    }

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

        String progressText = getProgress() + "°";
        mPaint.getTextBounds(progressText, 0, progressText.length(), mProgressTextRect);

        // 进度百分比
        float progressRatio = (float) getProgress() / getMax();
        // thumb偏移量
        float thumbOffset = (mThumbWidth - mProgressTextRect.width()) / 2.0f 
                - mThumbWidth * progressRatio;
        float thumbX = getWidth() * progressRatio + thumbOffset;
        float thumbY = getHeight() / 2f + mProgressTextRect.height() / 2f;
        canvas.drawText(progressText, thumbX, thumbY, mPaint);
    }
}

布局使用：

<TextSeekbar
    android:id="@+id/textSeekbar"
    android:layout_width="@dimen/dp_420"
    android:layout_height="@dimen/dp_52"
    android:layout_marginVertical="@dimen/dp_20"
    android:max="360"
    android:progressDrawable="@drawable/progress_drawable1"
    android:thumb="@drawable/thumb1" />

drawable/progress_drawable1:

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

    <solid android:color="#993D4249" />

    <corners android:radius="@dimen/dp_8" />

    <size
        android:width="@dimen/dp_420"
        android:height="@dimen/dp_52" />

</shape>

drawable/thumb1:

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

    <solid android:color="#FFD4D8E1" />

    <corners android:radius="@dimen/dp_8" />

    <size
        android:width="@dimen/dp_84"
        android:height="@dimen/dp_52" />
</shape>

demo2:

public class TextSeekbar extends AppCompatSeekBar {
    // 画笔
    private Paint mPaint;
    // 进度文字位置信息
    private final Rect mProgressTextRect = new Rect();
    // 滑块按钮宽度
    private int mThumbWidth = 0;

    public TextSeekbar(@NonNull Context context) {
        this(context, null);
    }

    public TextSeekbar(@NonNull Context context, AttributeSet attrs) {
        this(context, attrs, -1);
    }

    public TextSeekbar(@NonNull Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        mPaint = new TextPaint();
        mPaint.setAntiAlias(true);
        mPaint.setColor(Color.parseColor("#0F1117"));
        mPaint.setTextSize(getResources().getDimension(R.dimen.dimen_20));
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);

        // 若是不设置padding，当滑动到最左边或最右边时，滑块会显示不全
        Drawable thumb = getThumb();
        if (thumb != null) {
            mThumbWidth = thumb.getIntrinsicWidth();
//            setPadding(mThumbWidth / 2, 0, mThumbWidth / 2, 0);
        }
    }

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

        String progressText = getProgress() + "";
        mPaint.getTextBounds(progressText, 0, progressText.length(), mProgressTextRect);

        // 进度百分比
        float progressRatio = (float) getProgress() / getMax();
        // thumb偏移量
        float thumbOffset = (mThumbWidth - mProgressTextRect.width()) / 2.0f - mThumbWidth * progressRatio;
        float thumbX = getWidth() * progressRatio + thumbOffset;
        float thumbY = getHeight() / 2f + mProgressTextRect.height() / 2f;
        canvas.drawText(progressText, thumbX, thumbY, mPaint);
    }
}

<com.xq.widget.TextSeekbar
    android:layout_width="@dimen/dimen_388"
    android:layout_height="@dimen/dimen_32"
    android:max="5"
    android:progressDrawable="@drawable/bg_brightness_progress"
    android:splitTrack="false"
    android:thumb="@drawable/bg_brightness_thumb"
    android:thumbOffset="@dimen/dimen_0" />

bg_brightness_progress.xml

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

    <!--    控件背景      -->
    <item android:id="@android:id/background">
        <shape>
            <gradient
                android:angle="0"
                android:endColor="#20242E"
                android:startColor="#8020242E" />

            <corners android:radius="@dimen/dimen_8" />

            <size
                android:width="@dimen/dimen_388"
                android:height="@dimen/dimen_32" />
        </shape>
    </item>

    <!--    当前进度      -->
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <gradient
                    android:angle="0"
                    android:endColor="#717D90"
                    android:startColor="#818EA2" />

                <corners android:radius="@dimen/dimen_8" />

                <size
                    android:width="@dimen/dimen_388"
                    android:height="@dimen/dimen_32" />
            </shape>
        </clip>
    </item>
</layer-list>

bg_brightness_thumb.xml

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

    <solid android:color="#B3BCCB" />

    <corners android:radius="@dimen/dimen_8" />

    <size
        android:width="@dimen/dimen_106"
        android:height="@dimen/dimen_32" />
</shape>