我想样式一个寻求条,看起来像一个在下面的图像。

通过使用默认的搜索栏,我将得到这样的东西:

我只需要改变颜色。我不需要额外的款式。是否有任何直接的方法来做到这一点,或者我应该建立我的自定义绘图。?

我试着建立一个自定义的,但我不能得到上面所示的确切的一个。 使用自定义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>

其他回答

对于使用数据绑定的用户:

Add the following static method to any class @BindingAdapter("app:thumbTintCompat") public static void setThumbTint(SeekBar seekBar, @ColorInt int color) { seekBar.getThumb().setColorFilter(color, PorterDuff.Mode.SRC_IN); } Add app:thumbTintCompat attribute to your SeekBar <SeekBar android:id="@+id/seek_bar" style="@style/Widget.AppCompat.SeekBar" android:layout_width="wrap_content" android:layout_height="wrap_content" app:thumbTintCompat="@{@android:color/white}" />

就是这样。现在你可以使用app:thumbTintCompat与任何搜索栏。进度色调可以以同样的方式配置。

注意:此方法也兼容前棒棒糖设备。

LayerDrawable progressDrawable = (LayerDrawable) mSeekBar.getProgressDrawable();

// progress bar line *progress* color
Drawable processDrawable = progressDrawable.findDrawableByLayerId(android.R.id.progress);

// progress bar line *background* color
Drawable backgroundDrawable = progressDrawable.findDrawableByLayerId(android.R.id.background);

// progress bar line *secondaryProgress* color
Drawable secondaryProgressDrawable = progressDrawable.findDrawableByLayerId(android.R.id.secondaryProgress);
processDrawable.setColorFilter(Color.RED, PorterDuff.Mode.SRC_IN);

// progress bar line all color
mSeekBar.getProgressDrawable().setColorFilter(Color.BLUE, PorterDuff.Mode.SRC_IN);

// progress circle color
mSeekBar.getThumb().setColorFilter(Color.GREEN, PorterDuff.Mode.SRC_IN);

如果你看一下Android资源,查找栏实际上使用图像。

你必须创建一个上下透明的可绘制对象,比如10px,中心5px的线是可见的。

参考附图。你需要把它转换成NinePatch。

我改变了background_fill.xml

<?xml version="1.0" encoding="UTF-8"?>
  <shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line" >
<size android:height="1dp" />
<gradient
    android:angle="0"
    android:centerColor="#616161"
    android:endColor="#616161"
    android:startColor="#616161" />
<corners android:radius="0dp" />
<stroke
    android:width="1dp"
    android:color="#616161" />
<stroke
    android:width="1dp"
    android:color="#616161" />
</shape>

和progress_fill。xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line" >
<size android:height="1dp" />
<gradient
    android:angle="0"
    android:centerColor="#fafafa"
    android:endColor="#fafafa"
    android:startColor="#fafafa" />
<corners android:radius="1dp" />
<stroke
    android:width="1dp"
    android:color="#cccccc" />
<stroke
    android:width="1dp"
    android:color="#cccccc" />
 </shape>

制作1dp高度的背景和进度。

我想为搜索栏创建一个样式,然后将该样式添加到一个主题,这样我就可以将它应用到整个主题,同时仍然允许子样式覆盖它。以下是我所做的:

<!-- Blue App Theme -->
    <style name="AppTheme.Blue" parent="BaseTheme.Blue">        
        <item name="android:seekBarStyle">@style/SeekbarStyle.Blue</item>
        <item name="seekBarStyle">@style/SeekbarStyle.Blue</item> <!--This is essential for some devices, e.g. Samsung-->
</style>

<!-- Slider Styles -->
<style name="SeekbarStyle.Blue" parent="Widget.AppCompat.SeekBar">
        <item name="android:progressBackgroundTint">@color/material_blue_a700_pct_30</item>
        <item name="android:thumbTint">@color/material_blue_a700</item>
        <item name="android:thumbTintMode">src_in</item>
        <item name="android:progressTint">@color/material_blue_a700</item>
</style>

<style name="SeekbarStyle.Green" parent="Widget.AppCompat.SeekBar">
        <item name="android:progressBackgroundTint">@color/material_green_a700_pct_30</item>
        <item name="android:thumbTint">@color/material_green_a700</item>
        <item name="android:thumbTintMode">src_in</item>
        <item name="android:progressTint">@color/material_green_a700</item>
</style>

上面设置的主题搜索栏样式为蓝色的所有设备21+包括三星(需要seekBarStyle除了android:seekBarStyle;不知道为什么,但我亲眼看到了这个问题)。如果你想让所有的搜索栏保持主题样式,只应用绿色的搜索栏样式到一些小部件,然后添加以下内容到你想要的小部件:

<SeekBar
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/AppTheme.Green"/>