1. Set the thumb to transparently display the progress line effect.
Scenario description: The UI gives a slider with a shadow effect, and then we set android:thumb="@mipmap/xxx" and the effect is as follows. There
is a blank area on both sides of the slider. This This is because the system does not draw the line behind the slider, that is, the slider and the line are at the same level, and the effect we want is that the slider covers the line and is transparent. Therefore, we only need to set the following code:
android:splitTrack="false" //The default is true. The effect is as follows
2. The padingStart and paddingEnd
seekbar controls have internal spacing. We can often see that the set progress bar line length does not have the actual width of the control. Width, this is because it comes with internal spacing. The system default internal spacing is used to completely display the thumb, so we only need to set the starting and ending internal spacing according to our own needs.
3.thumbOffset slider offset
Still using the example just now, a slider image with a transparent area, if
android:thumbOffset="0dp" // is set, the effect is as follows
: when it is 0, the leftmost side of the thumb Aligned with the leftmost side of the progress line;
Note: When the offset here is a positive value, the larger the value, the farther to the left. When the value is a negative number, the smaller the value, the farther to the right.
Example: android:thumbOffset="-20dp"
4. Customize the progress bar.
Generally speaking, the default color and progress color of the seekbar's progress bar will be customized according to the application theme color. We usually customize a xml to draw the effect of the UI design. The xml code is as follows:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">
<shape>
<solid android:color="#BCFFF7" />
<corners android:radius="2dp" />
</shape>
</item>
<item android:id="@android:id/secondaryProgress">
<clip>
<shape>
<solid android:color="#BCFFF7" />
</shape>
</clip>
</item>
<item android:id="@android:id/progress">
<scale android:scaleWidth="100%">
<shape>
<gradient android:startColor="#FFF"
android:endColor="#FFB000"/>
<corners android:radius="2dp" />
</shape>
</scale>
</item>
</layer-list>
There are a few things to note above
a. item id
IDs of several items. These IDs are the default IDs parsed by Android's seekbar. They need to correspond one to one. The shape can be customized in each item. For example, what I wrote here is: the default color without progress is BCFFF7, because I There is no need for caching, etc. so the second color is the same as the background color, and then the progress color is a shape drawable with a gradient from white to FFB000.
b. <scale> and <clip> tags
These two tags are used in <layer-list>. <scale> means to enlarge and expand the internal content. <clip> means to crop and display the content.
I will illustrate the use of these two tags with examples:
For example In the above code block, the <scale android:scaleWidth="100%"> I used in <item android:id="@android:id/progress"> means that the color of my progress bar should fully display the gradient I used. . For example, if my current progress is 50%, then my gradient is from 0% to 50%. If I change the <scale> tag to <clip> at this time, the display effect will be a 0% to 100% gradient cropping out 0 to 50% of the content. As shown below,
the clip tag is more suitable for a complete progress chart, and the complete picture is slowly displayed according to the progress.
// Welcome to add more attributes in the comments and continue to update