【问题标题】：Custom seekbar (thumb size, color and background)自定义搜索栏（拇指大小、颜色和背景）
【发布时间】：2023-04-04 14:46:01
【问题描述】：

我想在我的 Android 项目中使用这个搜索栏：

这是我的搜索栏：

<SeekBar
        android:id="@+id/seekBar_luminosite"
        android:layout_width="@dimen/seekbar_width"
        android:layout_height="@dimen/seekbar_height"
        android:minHeight="15dp"
        android:minWidth="15dp"
        android:maxHeight="15dp"
        android:maxWidth="15dp"
        android:progress="@integer/luminosite_defaut"
        android:progressDrawable="@drawable/custom_seekbar"
        android:thumb="@drawable/custom_thumb" />

这是我的 custom_thumb.xml ：

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

    <gradient
        android:angle="270"
        android:endColor="@color/colorDekraOrange"
        android:startColor="@color/colorDekraOrange" />

    <size
        android:height="35dp"
        android:width="35dp" />

</shape>

这是我的 custom_seekbar.xml ：

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

    <item
        android:id="@android:id/background"
        android:drawable="@drawable/seekbar"/>
    <item android:id="@android:id/progress">
        <clip android:drawable="@color/colorDekraYellow" />
    </item>

</layer-list>

这是我的 seekbar.png（背景）：

结果如下：

栏内没有阴影和圆形边框...

我真的不明白我该怎么做。

【问题讨论】：

您需要的输出图像中的那些蓝色线条是什么？
你试过android:minHeightandroid:maxHeight
使用android:progressDrawable
那不行
附注：如果将 SeekBar 的 android:minHeight 和 android:maxHeight 设置为相同的大值，它将增加拇指的“命中”区域，使其更容易抓取和move（设置这两个值以避免 Android 4.4 上的错误）。 Android 6/7 的默认 SeekBar 高度非常小，很难点击。

标签： android seekbar android-slider

【解决方案1】：

全部在XML 中完成（没有.png 图像）。聪明的一点是 border_shadow.xml。

所有关于vectors 这些天...

截图：

这是你的SeekBar (res/layout/???.xml)：

SeekBar

<SeekBar
    android:id="@+id/seekBar_luminosite"
    android:layout_width="300dp"
    android:layout_height="wrap_content"        
    android:progress="@integer/luminosite_defaut"
    android:progressDrawable="@drawable/seekbar_style"
    android:thumb="@drawable/custom_thumb"/>

让我们让它时尚（这样你以后可以轻松地自定义它）：

风格

res/drawable/seekbar_style.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/border_shadow" >
    </item>

    <item 
        android:id="@android:id/progress" > 
        <clip 
            android:drawable="@drawable/seekbar_progress" />
    </item>
</layer-list>

拇指

res/drawable/custom_thumb.xml：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <solid android:color="@color/colorDekraOrange"/>
            <size
                android:width="35dp"
                android:height="35dp"/>
        </shape>
    </item>   
</layer-list>

进展

res/drawable/seekbar_progress.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list 
    xmlns:android="http://schemas.android.com/apk/res/android" >
    <item 
        android:id="@+id/progressshape" >
        <clip>
            <shape 
                android:shape="rectangle" >
                <size android:height="5dp"/>
                <corners 
                    android:radius="5dp" />
                <solid android:color="@color/colorDekraYellow"/>        
            </shape>
        </clip>
    </item>
</layer-list>

阴影

res/drawable/border_shadow.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">       
    <item>      
        <shape> 
            <corners 
                android:radius="5dp" />
            <gradient
                android:angle="270"
                android:startColor="#33000000"
                android:centerColor="#11000000"
                android:endColor="#11000000"
                android:centerY="0.2"
                android:type="linear"
            />          
        </shape> 
    </item>
</layer-list>

【讨论】：

这个答案只需要将android:splitTrack="false"添加到搜索栏，因此拇指移动时不会显示白角。不过非常非常感谢！
@thechaoticpanda 是的 (android:splitTrack="false") 但是 Jéwôm' (已接受) 回答说，我不偷别人的风头，只是希望加入社区（希望以独特的视角，与好的代码/理性）...也许我会在XML评论部分。看看 Android 是如何做到的可能会很有趣（影子）...
如果你用这个，别忘了加上android:minHeight="11dp" android:maxHeight="11dp"，否则你会遇到"seekbar-bar-thumb-centering-issues "
忽略前面的评论，显然他不懂可扩展性

【解决方案2】：

首先，使用android:splitTrack="false" 解决拇指的透明度问题。
对于 seekbar.png，您必须使用 9 补丁。这对圆形边框和图像的阴影有好处。

【讨论】：

我在第一次提供赏金时就进行了这项工作（没有运气）。仅添加“splitTrack”使我的工作。很好的答案。

【解决方案3】：

栏中没有阴影和圆角边框

您使用的是图像，因此最简单的解决方案是顺其自然地划船，

你不能手动给出高度，是的，你可以，但要确保它有足够的空间来显示你的完整图像视图

最简单的方法是将android:layout_height="wrap_content" 用于SeekBar
要获得更清晰的圆形边框，您可以轻松地使用与其他颜色相同的图像。

我不擅长 Photoshop，但我设法编辑了一个背景以进行测试

_{seekbar_brown_to_show_progress.png}

<SeekBar
    android:splitTrack="false"   // for unwanted white space in thumb
    android:id="@+id/seekBar_luminosite"
    android:layout_width="250dp"   // use your own size
    android:layout_height="wrap_content"
    android:minHeight="10dp"
    android:minWidth="15dp"
    android:maxHeight="15dp"
    android:maxWidth="15dp"
    android:progress="50"
    android:progressDrawable="@drawable/custom_seekbar_progress"
    android:thumb="@drawable/custom_thumb" />

custom_seekbar_progress.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@android:id/background"
        android:drawable="@drawable/seekbar" />
    <item android:id="@android:id/progress">
        <clip android:drawable="@drawable/seekbar_brown_to_show_progress" />
    </item>
</layer-list>

custom_thumb.xml和你的一样

最后android:splitTrack="false" 将删除拇指中不需要的空白

让我们看看输出：

【讨论】：

【解决方案4】：

Android 自定义 SeekBar - 自定义轨道或进度、形状、大小、背景和拇指，其他搜索栏自定义请参阅http://www.zoftino.com/android-seekbar-and-custom-seekbar-examples

自定义轨迹可绘制

<?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:gravity="center_vertical|fill_horizontal">
        <shape android:shape="rectangle"
            android:tint="#ffd600">
            <corners android:radius="8dp"/>
            <size android:height="30dp" />
            <solid android:color="#ffd600" />
        </shape>
    </item>
    <item android:id="@android:id/progress"
        android:gravity="center_vertical|fill_horizontal">
        <scale android:scaleWidth="100%">
            <selector>
                <item android:state_enabled="false"
                    android:drawable="@android:color/transparent" />
                <item>
                    <shape android:shape="rectangle"
                        android:tint="#f50057">
                        <corners android:radius="8dp"/>
                        <size android:height="30dp" />
                        <solid android:color="#f50057" />
                    </shape>
                </item>
            </selector>
        </scale>
    </item>
</layer-list>

自定义拇指可绘制对象

?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:thickness="4dp"
    android:useLevel="false"
    android:tint="#ad1457">
    <solid
        android:color="#ad1457" />
    <size
        android:width="32dp"
        android:height="32dp" />
</shape>

输出

【讨论】：

请解释<Scale> 的相关性，因为没有该标签，代码将无法正常工作。 :)

【解决方案5】：

您可以使用材料组件库中的官方Slider。

使用app:trackHeight="xxdp"（默认值为4dp）更改轨迹栏的高度。

也可以使用这些属性来自定义颜色：

app:activeTrackColor: 活动轨迹颜色
app:inactiveTrackColor: 非活动轨道颜色
app:thumbColor：填满大拇指

类似：

    <com.google.android.material.slider.Slider
        android:id="@+id/slider"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:activeTrackColor="#ffd400"
        app:inactiveTrackColor="#e7e7e7"
        app:thumbColor="#ffb300"
        app:trackHeight="12dp"
        .../>

它需要库的版本 1.2.0。

【讨论】：

你能帮我把这个材料库添加到我的 Kotlin 项目中吗？
@AnasReza 只需在 build.gradle 中添加依赖项即可。这里所有info
可以自定义拇指图标吗？
@KuvonchbekYakubov 目前可以自定义这些属性：github.com/material-components/material-components-android/blob/…
@GabrieleMariotti 如果您为带有拇指高度的拇指图标添加自定义，那就太好了。 SeekBar 没有 thumbElevation 并且 Slider 没有自定义 thum。

【解决方案6】：

首先要感谢 @Charuka。

做

您可以使用 android:progressDrawable="@drawable/seekbar" 代替 android:background="@drawable/seekbar"。

progressDrawable用于进度模式。

你应该试试

android:minHeight

定义视图的最小高度。不能保证视图将能够达到这个最小高度（例如，如果它父布局用较少的可用高度限制它）。

android:minWidth

定义视图的最小宽度。不能保证视图将能够达到这个最小宽度（例如，如果它的父布局用较少的可用宽度限制它）

    android:minHeight="25p"
    android:maxHeight="25dp"

仅供参考：

使用 android:minHeight 和 android:maxHeight 不是好的解决方案。需要纠正您的 Custom Seekbar (From Class Level)。

【讨论】：

@Jewom 看这里android-examples.com/…

【解决方案7】：

使用色调 ;)

<SeekBar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="15dp"
        android:minWidth="15dp"
        android:maxHeight="15dp"
        android:maxWidth="15dp"
        android:progress="20"
        android:thumbTint="@color/colorPrimaryDark"
        android:progressTint="@color/colorPrimary"/>

在 thumbTint 和 progressTint 中使用您需要的颜色。它要快得多！ :)

编辑 ofc 可以与 android:progressDrawable="@drawable/seekbar" 结合使用

【讨论】：

谢谢，但使用 tint 不会改变问题。我需要改变拇指的大小。
这需要最低 API 级别 21。

【解决方案8】：

android:minHeight android:maxHeight 对此很重要。

<SeekBar
    android:id="@+id/pb"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:maxHeight="2dp"
    android:minHeight="2dp"
    android:progressDrawable="@drawable/seekbar_bg"
    android:thumb="@drawable/seekbar_thumb"
    android:max="100"
    android:progress="50"/>

seekbar_bg.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>
            <corners android:radius="3dp" />
            <solid android:color="#ECF0F1" />
        </shape>
    </item>
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="3dp" />
                <solid android:color="#C6CACE" />
            </shape>
        </clip>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="3dp" />
                <solid android:color="#16BC5C" />
            </shape>
        </clip>
    </item>
</layer-list>

seekbar_thumb.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#16BC5C" />
    <stroke
        android:width="1dp"
        android:color="#16BC5C" />
    <size
        android:height="20dp"
        android:width="20dp" />
</shape>

【讨论】：

【解决方案9】：

给未来的读者！

从material-components-android 1.2.0-alpha01开始，可以使用新的slider组件

例如：

相应地修改thumbSize、thumbColor、trackColor。

<com.google.android.material.slider.Slider
        android:id="@+id/slider"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:valueFrom="20f"
        android:valueTo="70f"
        android:stepSize="10"
        app:thumbRadius="20dp"
        app:thumbColor="@color/colorAccent"
        app:trackColor="@android:color/darker_gray"
        />

注意：赛道拐角不是圆的。

【讨论】：

【解决方案10】：

改变条和拇指颜色的非常简单的方法：

SeekBar slider;
ColorStateList sl = ColorStateList.valueOf( Color.YELLOW );
slider.setThumbTintList(sl);
slider.setProgressTintList(sl);

【讨论】：

【解决方案11】：

你可以试试进度条代替搜索栏

<ProgressBar
    android:id="@+id/progressBar"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="fill_parent"
    android:layout_height="50dp"
    android:layout_marginBottom="35dp"
    />

【讨论】：