自定义 Android 搜索栏

Question

我打算在 Android 中自定义 Seekbar，但我遇到了一个问题。

这就是我要做的事情：

这是我现在得到的：

这是我的代码：

<SeekBar
        android:id="@+id/blueSlider"
        android:layout_width="0dp"
        android:layout_height="60dp"
        android:layout_marginStart="50dp"
        android:layout_marginTop="50dp"
        android:layout_marginEnd="10dp"
        android:splitTrack="false"
        android:maxHeight="40dp"
        android:shape="oval"
        android:thumbOffset="-20dp"
        android:secondaryProgress="0"
        android:progressDrawable="@drawable/styled_progress"
        android:max="@integer/slider_max_value"
        android:thumb="@drawable/oval_seekbar_thumb"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/blueText"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

styled_progress.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <corners
                android:radius="25dp"/>
            <gradient
                android:startColor="@color/gradient_start"
                android:endColor="@color/gradient_end"
                android:angle="0" />
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape android:shape="rectangle">
                <corners
                    android:radius="90dp"/>
            </shape>
        </clip>
    </item>
</layer-list>

oval_seekbar_thumb.xml

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

请帮我解决这个问题。（缺少白线）谢谢

Answer 1

您可以尝试在次要进度周围添加边距

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">


    <!--    BACKGROUND-->
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <corners
                android:radius="25dp"/>
            <size android:height="30dp"
                android:width="200dp" />
            <gradient
                android:startColor="@color/primary"
                android:endColor="@color/primary_light"
                android:angle="0" />
        </shape>
    </item>

    <item android:id="@android:id/secondaryProgress"
        android:left="10dp"
        android:top="14dp"
        android:right="10dp"
        android:bottom="14dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/white" />
        </shape>

    </item>
</layer-list>

自定义 Android 搜索栏

Customize the Android Seekbar

android

seekbar

android-layout

android-seekbar