Android样式的搜索栏

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

enter image description here

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

enter image description here

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

我试着建立一个自定义,但我不能得到上面所示的确切的一个。 使用自定义drawable后,我得到的是如下所示:

enter image description here

如果我需要建立一个自定义,那么请建议如何减少进度线的宽度和形状。

我的自定义实现:

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>

seekbar:

<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>
315508 次浏览

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

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

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

enter image description here

我会从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把颜色从蓝色改为红色:

< p > red_scrubber_control_disabled_holo.png: red_scrubber_control_disabled_holo

. < p > red_scrubber_control_focused_holo.png: red_scrubber_control_focused_holo

< p > red_scrubber_control_normal_holo.png: red_scrubber_control_normal_holo

. < p > red_scrubber_control_pressed_holo.png: red_scrubber_control_pressed_holo

. < p > red_scrubber_primary_holo.9.png: red_scrubber_primary_holo.9

. < p > red_scrubber_secondary_holo.9.png: red_scrubber_secondary_holo.9

. < p > red_scrubber_track_holo_light.9.png: red_scrubber_track_holo_light.9

.

添加搜索栏布局:

<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" />

结果:

enter image description here

如果您想要完全相同的条,但在红色,您可以通过编程方式添加PorterDuff颜色过滤器。你可以通过ProgressBar基类的方法获得你想要着色的每个可绘制对象。然后为它设置滤色器

mySeekBar.getProgressDrawable().setColorFilter(new PorterDuffColorFilter(srcColor, PorterDuff.Mode.MULTIPLY));

如果想要的颜色调整不能通过波特达夫滤镜,你可以指定自己的颜色过滤器

android:maxHeight="3dp"
android:minHeight="3dp"

这是所有

只需用你的颜色替换颜色属性

background.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">


<stroke android:width="1dp" android:color="#D9D9D9"/>
<corners android:radius="1dp" />


</shape>

progress.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">


<stroke android:width="1dp" android:color="#2EA5DE"/>
<corners android:radius="1dp" />


</shape>

style.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >


<item
android:id="@android:id/background"
android:drawable="@drawable/seekbar_background"/>
<item android:id="@android:id/progress">
<clip android:drawable="@drawable/seekbar_progress" />
</item>


</layer-list>

thumb.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">


<size android:height="30dp" android:width="30dp"/>
<stroke android:width="18dp" android:color="#882EA5DE"/>
<solid android:color="#2EA5DE" />
<corners android:radius="1dp" />


</shape>

谷歌在SDK 21中使这更容易。现在我们有了用于指定拇指色调颜色的属性:

android:thumbTint
android:thumbTintMode
android:progressTint

http://developer.android.com/reference/android/widget/AbsSeekBar.html#attr_android:thumbTint http://developer.android.com/reference/android/widget/AbsSeekBar.html#attr_android:thumbTintMode < / p >

<SeekBar
android:id="@+id/seekBar1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:progressTint="@color/red"
android:thumbTint="@color/red" />

工作与选择的答案相同。不需要做任何可绘制的文件或其他。(仅限5.0版本) 关于< / p >

我改变了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>

制作背景&progress 1dp高度。

如上所述(@andrew),创建自定义搜索栏是超级容易与这个网站- http://android-holo-colors.com/

只是启用SeekBar,选择颜色,并接收所有资源和复制到项目。 然后在xml中应用它们,例如:

  android:thumb="@drawable/apptheme_scrubber_control_selector_holo_light"
android:progressDrawable="@drawable/apptheme_scrubber_progress_horizontal_holo_light"

默认情况下,android会匹配你滑块的进度颜色

`<item name="colorAccent">`

styles.xml中的值。然后,要设置自定义滑块拇指图像,只需在你的SeekBar xml布局块中使用下面的代码:

android:thumb="@drawable/slider"

如果你正在使用android Sdk提供的默认SeekBar,那么他们是一个简单的方法来改变它的颜色。只要在/res/values/colors.xml中找到color.xml,然后改变colorAccent。

<resources>
<color name="colorPrimary">#212121</color>
<color name="colorPrimaryDark">#1e1d1d</color>
<!-- change below line -->
<color name="colorAccent">#FF4081</color>
</resources>

你也可以这样做:

<SeekBar
android:id="@+id/redSeekBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:progressDrawable="@color/red"
android:maxHeight="3dip"/>

希望对大家有所帮助!

我的答案是受到Andras Balázs Lajtha的启发 它允许工作没有XML文件

seekBar.getProgressDrawable().setColorFilter(Color.RED, PorterDuff.Mode.SRC_IN);
seekBar.getThumb().setColorFilter(Color.RED, PorterDuff.Mode.SRC_IN);

简单的方法来改变寻找条的颜色…

 <ProgressBar
android:id="@+id/progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:theme="@style/Progress_color"/>

样式:Progress_color

 <style name="Progress_color">
<item name="colorAccent">@color/white</item> <!-- Whatever color you want-->
</style>

java类更改ProgressDrawable()

seek_bar.getProgressDrawable().setColorFilter(getResources().getColor(R.color.white), PorterDuff.Mode.MULTIPLY);

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

  1. 将以下静态方法添加到任何类中

    @BindingAdapter("app:thumbTintCompat")
    public static void setThumbTint(SeekBar seekBar, @ColorInt int color) {
    seekBar.getThumb().setColorFilter(color, PorterDuff.Mode.SRC_IN);
    }
    
  2. 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}"
    />
    

That's it. Now you can use app:thumbTintCompat with any SeekBar. The progress tint can be configured in the same way.

Note: this method is also compatble with pre-lollipop devices.

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搜索栏自定义材质样式,用于其他搜索栏自定义http://www.zoftino.com/android-seekbar-and-custom-seekbar-examples

<style name="MySeekBar" parent="Widget.AppCompat.SeekBar">
<item name="android:progressBackgroundTint">#f4511e</item>
<item name="android:progressTint">#388e3c</item>
<item name="android:thumbTint">#c51162</item>
</style>

seekbar自定义材质样式

Upd: colorControlActivated现在是thumbTint

输出:

enter image description here

更改进度颜色:

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);

对@arnav-rao回答的小更正:

为了确保拇指的颜色正确,请使用:

<style name="MySeekBar" parent="Widget.AppCompat.SeekBar">
<item name="android:progressBackgroundTint">@color/colorBgTint</item>
<item name="android:progressTint">@color/colorProgressTint</item>
<item name="android:thumbTint">@color/colorThumbTint</item>
</style>

android:thumbTint实际上是给“拇指”上色

检查这个教程很好

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:max="100"
android:maxHeight="3dp"
android:minHeight="3dp"
android:progressDrawable="@drawable/seekbar_style"
android:thumbTint="@color/positive_color"/>

然后是一个样式文件:

<?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="@color/positive_color" />
</shape>
</item>
<item android:id="@android:id/progress">
<clip>
<shape android:shape="rectangle" >
<solid
android:color="@color/positive_color" />
</shape>
</clip>
</item>
</layer-list>

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

<!-- 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"/>

所有这些答案都是不赞成的。

在2019年,通过将ProgressBar更改为此,可以更容易地将您的搜索栏设置为您喜欢的颜色

<SeekBar
android:id="@+id/seekBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:progressTint="#36970f"
android:thumbTint="#36970f"
/>

尝试下面的代码以编程方式为你的搜索栏设置颜色样式

        seekBar.getProgressDrawable().setColorFilter(Color.RED, PorterDuff.Mode.SRC_IN);
seekBar.getThumb().setColorFilter(Color.RED, PorterDuff.Mode.SRC_IN);

对于api <21(和>= 21)你可以使用@Ahamadullah Saikathttps://www.lvguowei.me/post/customize-android-seekbar-color/的答案。

enter image description here

<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>

enter image description here

否则,你可以在布局中使用这些属性来定义颜色或颜色选择器:

   <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>

现在它变得非常简单,使用材质滑块,并使用这个自定义颜色:

   app:thumbColor="@color/colorPrimary"
app:trackColorInactive="@color/grey"
app:trackColorActive="@color/colorPrimary"

首先使用以下步骤创建Drawble文件

enter image description here

命名drawble并指定根元素为layer-list ->点击OK。将创建一个新文件custom_seek .xml

enter image description here

现在在custom_seek .xml中,在图层列表中添加一个项目并给它一个形状。指定SeekBar的颜色,高度,角。另外,添加另一个相同形状和大小的项目,但你可以改变颜色,左侧的SeekBar的拇指将是这种颜色。

enter image description here

现在再次点击drawable ->新→可绘制的资源文件,将文件命名为thumb.xml,并指定根元素为shape >点击OK。将创建一个新文件thumb.xml。在这个文件中给出拇指的高度、半径和颜色。这些事情是可以改变的。这完全取决于你想如何设计。

enter image description here

现在转到activity_main.xml创建一个布局,并在布局中添加一个SeekBar。指定SeekBar的高度和宽度,以及要使用的最大进度,将progress设置为0。

android:progressDrawable="@drawable/custom_seekbar"
android:thumb="@drawable/thumb"
android:max="50"
android:progress="0"

这将在activity_main.xml中创建一个定制的搜索栏。

enter image description here

现在打开MainActivity.java类,声明SeekBar和TextView的对象,在onCreate方法中使用findViewById()方法初始化两个对象。执行一个包含进度值的SeekBar更改侦听器事件,并使用该事件在TextView中设置进度值。

   seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
// increment or decrement on process changed
// increase the textsize
// with the value of progress
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
value.setText(progress+"/"+"50");


                

}..

enter image description here

构建并运行应用程序。将拇指放在搜索栏上,向前或向后移动它,它将显示进程。

上述实现的代码如下所示:

下面是MainActivity.java文件的代码。代码中添加了注释,以便更详细地理解代码。

    package com.abhi.customseekbar;


import androidx.appcompat.app.AppCompatActivity;


import android.os.Bundle;
import android.view.View;
import android.widget.SeekBar;
import android.widget.TextView;


public class MainActivity extends AppCompatActivity {
SeekBar seekBar;
TextView value;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// initialize the seekBar object
seekBar=findViewById(R.id.seekbar);
value=findViewById(R.id.progress);
// calling the seekbar event change listener
seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
// increment or decrement on process changed
// increase the textsize
// with the value of progress
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
value.setText(progress+"/"+"50");
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
// This method will automatically
// called when the user touches the SeekBar
}


@Override
public void onStopTrackingTouch(SeekBar seekBar) {
// This method will automatically
// called when the user
// stops touching the SeekBar
}
});
}
}

下面是activity_main.xml文件的代码。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#458C85"
tools:context=".MainActivity">


<RelativeLayout
android:id="@+id/Relative_1"
android:layout_width="match_parent"
android:layout_height="350dp"
android:layout_weight="2">


<TextView
android:id="@+id/textViewSelectSizeOfArray"
android:layout_width="273dp"
android:layout_height="wrap_content"
android:layout_above="@+id/seekbar"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"


android:layout_marginBottom="9dp"
android:text="Custom Seek Bar"
android:textAlignment="center"
android:textColor="@color/white"
android:textSize="25dp" />


<SeekBar
android:id="@+id/seekbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:indeterminate="false"
android:max="50"
android:progress="0"
android:progressDrawable="@drawable/custom_seekbar"
android:thumb="@drawable/thumb" />


<TextView
android:id="@+id/progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:layout_marginBottom="199dp"
android:padding="10dp"
android:text="0"
android:textAlignment="center"
android:textColor="@color/white"
android:textSize="30dp"
android:textStyle="bold">


</TextView>


</RelativeLayout>


</LinearLayout>

下面是custom_seek .xml文件的代码。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- color, size, shape height of seekbar -->
<item android:gravity="center_vertical">
<shape android:shape="rectangle">
<solid android:color="#605A5C"/>
<size android:height="30dp"/>
<corners android:radius="9dp"/>
</shape>
</item>
<!-- color, size, shape height of seekbar when u drag it-->
<item android:gravity="center_vertical">
<scale android:scaleWidth="100%">
<selector>
<item android:state_enabled="false"
android:drawable="@color/purple_200"/>
<item>
<shape android:shape="rectangle">
<solid android:color="@color/black"/>
<size android:height="30dp"/>
<corners android:radius="9dp"/>
</shape>
</item>
</selector>
</scale>
</item>
</layer-list>

下面是thumb.xml文件的代码。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/purple_200"/>
<size android:height="30dp" android:width="25dp"/>
<corners android:radius="5dp"/>
</shape>