Tuỳ chỉnh seekbar android

Question

tôi đang cố gắng để đạt được tùy chỉnh seekbar như như dưới đây hình ảnh

cho rằng tôi đã vào mã bên dưới
Tôi đã tạo ra drawable cho seekbar progressDrawable cho tôi biết nếu mã là bắt buộc, tôi sẽ đăng nó ở đây.

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout android:id="@+id/llScale" 
      xmlns:android="http://schemas.android.com/apk/res/android" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:layout_weight="1" 
      android:orientation="vertical" 
      android:paddingBottom="5dp"> 

<LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:background="@color/white" 
    android:orientation="vertical" 
    android:padding="5dp"> 

    <TextView 
     android:id="@+id/sliderText" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:padding="5dp" 
     android:text="Bernard" 
     android:textColor="@color/blue"/> 

    <FrameLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content"> 

     <FrameLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_gravity="center" 
      android:layout_marginLeft="5dp" 
      android:layout_marginRight="5dp" 
      android:background="@drawable/slider_background" 
      android:padding="3dp"> 

      <SeekBar 
       android:id="@+id/ratingBar" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_gravity="center" 
       android:max="10" 
       android:maxHeight="100dp" 
       android:thumbTintMode="multiply" 
       android:progressDrawable="@drawable/progressbar" 
       android:thumb="@drawable/ic_slider_secondary"/> 

      <TextView 
       android:id="@+id/seekBarHint" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_gravity="center" 
       android:gravity="center" 
       android:text="Drag slider across" 
       android:textColor="@color/dark_gray"/> 
     </FrameLayout> 

     <TextView 
      android:id="@+id/progressText" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:background="@drawable/ic_slider_progress" 
      android:gravity="center" 
      android:textColor="@color/white" 
      android:textStyle="bold"/> 
    </FrameLayout> 
</LinearLayout> 

nhưng với mã trên những gì tôi nhận được là như sau hình ảnh
màu đỏ ánh sáng không được điền đầy đủ, nó lefts một số không gian và ở vòng tròn cuối đi ra khỏi các boundries.

Gradle

compileSdkVersion 23 
buildToolsVersion "23.0.2" 
defaultConfig { 
    applicationId "com.myapp" 
    minSdkVersion 16 
    targetSdkVersion 23 
    multiDexEnabled true 
    versionCode 1 
    versionName "1.0" 
    testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner" 
} 

bất cứ ai có thể vui lòng giúp tôi với

Answer 1

tôi đã sử dụng mã của bạn và demo này được tạo ra trong đó tôi đã làm 2 thay đổi như sau :

1. Đặt thumbOffset với giá trị phù hợp cho tôi 16.5dp đã hoạt động.

2. Thêm một thuộc tính android: splitTrack = "false" sẽ giúp xóa khoảng trống xung quanh ngón tay cái có thể vẽ được.

   <SeekBar 
       android:id="@+id/ratingBar" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_gravity="center" 
       android:maxHeight="100dp" 
       android:progressDrawable="@drawable/progressbar" 
       android:thumb="@drawable/ic_slider_secondary" 
       android:splitTrack="false" 
       android:thumbOffset="16.5dp"/> 
   

Chúc mừng Mã hóa :)