Android - Custom SeekBar - round corners on progress bar

问题:

Trying to make a custom SeekBar. I want to achieve this.

What I have done so far is this. I can't find a way to round the corners on the progress bar.

Can someone help with this? Here is my code

main_activity.xml

<LinearLayout      xmlns:android="http://schemas.android.com/apk/res/android"       android:layout_width="match_parent"     android:layout_height="wrap_content"     android:orientation="vertical"      android:gravity="center">      <SeekBar         android:id="@+id/seekBar1"         android:layout_width="match_parent"         android:layout_height="30dp"           android:progressDrawable="@drawable/styled_progress"         android:paddingLeft="15dp"         android:paddingRight="15dp"         android:progress="90"         android:thumb="@drawable/thumbler_small"         android:maxHeight="30dp"         android:layout_marginTop="125dp"          android:layout_marginBottom="15dp"          android:indeterminate="false" />  </LinearLayout> 

styled_progress.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">  <item android:id="@android:id/background">     <shape>          <gradient                 android:startColor="#d2e5ff"                 android:endColor="#d2e5ff"                 android:angle="45"         />         <corners                  android:bottomRightRadius="7dp"                  android:bottomLeftRadius="7dp"                  android:topLeftRadius="7dp"                  android:topRightRadius="7dp"/>      </shape> </item>  <item android:id="@android:id/secondaryProgress">     <clip>         <shape>             <gradient                     android:startColor="#808080"                     android:endColor="#808080"                     android:angle="270"             />             <corners                  android:bottomRightRadius="7dp"                  android:bottomLeftRadius="7dp"                  android:topLeftRadius="7dp"                  android:topRightRadius="7dp"/>          </shape>     </clip> </item> <item android:id="@android:id/progress">     <clip>         <shape>             <gradient                 android:startColor="#c5e6eb"                 android:endColor="#61cabb"                 android:angle="45" />              <corners                  android:bottomRightRadius="7dp"                  android:bottomLeftRadius="7dp"                  android:topLeftRadius="7dp"                  android:topRightRadius="7dp"/>          </shape>      </clip> </item> </layer-list> 

回答1:

you can see the image here

This sulotion was the only way i could do this. Hope this help

this is my seekbar :

         <SeekBar             android:id="@+id/simpleProgressBar"             android:layout_width="fill_parent"             android:layout_height="12dp"             android:max="100"             android:progress="0"             android:background="@null"             android:shape="oval"             android:splitTrack="false"             android:progressDrawable="@drawable/progress_background"             android:secondaryProgress="0"             android:thumbOffset="10dp"             android:thumb="@drawable/oval_seekbar_thumb" /> 

this is (progress_background.xml) :

<item android:id="@android:id/background">     <shape android:shape="rectangle">         <corners android:radius="5dp" />          <gradient             android:angle="270"             android:endColor="@color/grey_line"             android:startColor="@color/grey_line" />     </shape> </item> <item android:id="@android:id/secondaryProgress">     <clip>         <shape android:shape="oval">             <corners android:radius="5dp" />             <gradient                 android:angle="270"                 android:endColor="@color/blue"                 android:startColor="@color/blue" />         </shape>     </clip> </item> <item android:id="@android:id/progress">     <clip>         <shape android:shape="rectangle">             <corners android:radius="90dp" />              <gradient                 android:angle="90"                 android:endColor="@color/colorPrimaryDark"                 android:startColor="@color/colorPrimary" />         </shape>     </clip> </item> 

and this is the thumb (oval_seekbar_thumb.xml) :

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android">     <item>         <shape android:shape="oval">             <solid android:color="#ffffff" />             <stroke android:color="@color/colorPrimaryDark" android:width="3dp"/>             <size android:height="12dp" android:width="12dp"/>         </shape>     </item> </selector> 

The height of the thumb should be same as the height of the seekbar to look properly.

文章来源: Android - Custom SeekBar - round corners on progress bar