我想样式一个寻求条，看起来像一个在下面的图像。
通过使用默认的搜索栏，我将得到这样的东西:
我只需要改变颜色。我不需要额外的款式。是否有任何直接的方法来做到这一点，或者我应该建立我的自定义绘图。?
我试着建立一个自定义的，但我不能得到上面所示的确切的一个。
使用自定义drawable后，我得到的是如下所示:
如果我需要建立一个自定义，那么请建议如何减少进度线的宽度和形状。
我的自定义实现:
background_fill.xml:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient
android:angle="90"
android:centerColor="#FF555555"
android:endColor="#FF555555"
android:startColor="#FF555555" />
<corners android:radius="1dp" />
<stroke
android:width="1dp"
android:color="#50999999" />
<stroke
android:width="1dp"
android:color="#70555555" />
</shape>
progress_fill.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient
android:angle="90"
android:centerColor="#FFB80000"
android:endColor="#FFFF4400"
android:startColor="#FF470000" />
<corners android:radius="1dp" />
<stroke
android:width="1dp"
android:color="#50999999" />
<stroke
android:width="1dp"
android:color="#70555555" />
</shape>
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"
android:drawable="@drawable/background_fill"/>
<item android:id="@android:id/progress">
<clip android:drawable="@drawable/progress_fill" />
</item>
</layer-list>
thumb.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<gradient
android:angle="270"
android:endColor="#E5492A"
android:startColor="#E5492A" />
<size
android:height="20dp"
android:width="20dp" />
</shape>
Seeekbar：
<SeekBar
android:id="@+id/seekBarDistance"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="88dp"
android:progressDrawable="@drawable/progress"
android:thumb="@drawable/thumb" >
</SeekBar>
对于api < 21(并且>= 21)，您可以使用@Ahamadullah Saikat或https://www.lvguowei.me/post/customize-android-seekbar-color/的答案。
<SeekBar
android:id="@+id/seekBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxHeight="3dp"
android:minHeight="3dp"
android:progress="50"
android:progressDrawable="@drawable/seek_bar_ruler"
android:thumb="@drawable/seek_bar_slider"
/>
可拉的/ seek_bar_ruler.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 android:shape="rectangle">
<solid
android:color="#94A3B3" />
<corners android:radius="2dp" />
</shape>
</item>
<item android:id="@android:id/progress">
<clip>
<shape android:shape="rectangle">
<solid
android:color="#18244D" />
<corners android:radius="2dp" />
</shape>
</clip>
</item>
</layer-list>
可拉的/ seek_bar_slider.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
>
<solid android:color="#FFFFFF" />
<stroke
android:width="4dp"
android:color="#18244D"
/>
<size
android:width="25dp"
android:height="25dp"
/>
</shape>
在材质组件库1.2.0版本中，你可以使用新的Slider组件。
<com.google.android.material.slider.Slider
android:valueFrom="0"
android:valueTo="300"
android:value="200"
android:theme="@style/slider_red"
/>
你可以使用如下方法覆盖默认颜色:
<style name="slider_red">
<item name="colorPrimary">#......</item>
</style>
否则，你可以在布局中使用这些属性来定义颜色或颜色选择器:
<com.google.android.material.slider.Slider
app:activeTrackColor="@color/...."
app:inactiveTrackColor="@color/...."
app:thumbColor="@color/...."
/>
或者你可以使用自定义样式:
<style name="customSlider" parent="Widget.MaterialComponents.Slider">
<item name="activeTrackColor">@color/....</item>
<item name="inactiveTrackColor">@color/....</item>
<item name="thumbColor">@color/....</item>
</style>
输出:
更改进度颜色:
int normalColor = ContextCompat.getColor(context, R.color.normal_color);
int selectedColor = ContextCompat.getColor(context, R.color.selected_color);
Drawable normalDrawable = new ColorDrawable(normalColor);
Drawable selectedDrawable = new ColorDrawable(selectedColor);
ClipDrawable clipDrawable = new ClipDrawable(selectedDrawable, Gravity.LEFT, ClipDrawable.HORIZONTAL);
Drawable[] layers = {normalDrawable, clipDrawable, clipDrawable};
LayerDrawable seekbarDrawable = new LayerDrawable(layers);
seekBar.setProgressDrawable(seekbarDrawable);
改变拇指颜色:
int thumbColor = ContextCompat.getColor(context, R.color.thumb_color);
Drawable unwrappedDrawable = AppCompatResources.getDrawable(context, R.drawable.ic_seekbar_thumb);
assert unwrappedDrawable != null;
Drawable wrappedDrawable = DrawableCompat.wrap(unwrappedDrawable);
DrawableCompat.setTint(wrappedDrawable, thumbColor);
seekBar.setThumb(wrappedDrawable);
我将从Android源代码中提取drawables和xml，并将其颜色更改为红色。
以下是我如何完成mdpi drawables的示例:
自定义red_scrubber_control.xml(添加到res/drawable):
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/red_scrubber_control_disabled_holo" android:state_enabled="false"/>
<item android:drawable="@drawable/red_scrubber_control_pressed_holo" android:state_pressed="true"/>
<item android:drawable="@drawable/red_scrubber_control_focused_holo" android:state_selected="true"/>
<item android:drawable="@drawable/red_scrubber_control_normal_holo"/>
</selector>
自定义:red_scrubber_progress.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="@android:id/background"
android:drawable="@drawable/red_scrubber_track_holo_light"/>
<item android:id="@android:id/secondaryProgress">
<scale
android:drawable="@drawable/red_scrubber_secondary_holo"
android:scaleWidth="100%" />
</item>
<item android:id="@android:id/progress">
<scale
android:drawable="@drawable/red_scrubber_primary_holo"
android:scaleWidth="100%" />
</item>
</layer-list>
然后复制所需的绘图从Android源代码，我从这个链接
为每个hdpi, mdpi, xhdpi复制这些绘图是很好的。例如，我只使用mdpi:
然后用Photoshop把颜色从蓝色改为红色:
red_scrubber_control_disabled_holo.png:
red_scrubber_control_focused_holo.png:
red_scrubber_control_normal_holo.png:
red_scrubber_control_pressed_holo.png:
red_scrubber_primary_holo.9.png:
red_scrubber_secondary_holo.9.png:
red_scrubber_track_holo_light.9.png:
添加搜索栏布局:
<SeekBar
android:id="@+id/seekBar1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:progressDrawable="@drawable/red_scrubber_progress"
android:thumb="@drawable/red_scrubber_control" />
结果:
