在当前进度条位置添加项目 - 创建自定义进度条

Question

我正在尝试创建一个如下所示的自定义进度条：

我设法创建了布局，但我不知道如何将该圆圈放在当前 progressBar 进度位置。有人知道如何实现吗？

我的 xml 布局如下所示：

<!-- Define the background properties like color etc -->
<item android:id="@android:id/background">
    <shape>
        <solid android:color="#ffffff" />
        <corners android:radius="1dip" />
    </shape>
</item>

<!-- Define the progress properties like start color, end color etc -->
<item android:id="@android:id/progress">
    <clip>
        <shape>
            <solid android:color="#42cbf4"
                android:width="40dp"/>
        </shape>
    </clip>
</item>

我还为透明背景添加了一个线性布局 我尝试在进度项中放置另一个椭圆形，或者为 secondProgress 创建另一个形状，但没有任何效果。 现在，它看起来像这样：

Answer 1

这种ProgressBar叫做“seek bar”，网上有很多实现。也许您可以在The Android Arsenal 上通过在搜索中输入“seek”来搜索它。顺便说一句，我在网站上找到了一个简单但漂亮的；你可以找到它here。

Answer 2

我找到了我要找的东西。我使用 SeekBar 而不是 ProgressBar，它实现了我需要的 thumb。对于自定义，我使用了相同的布局，对于拇指，我使用了这个 sn-p：

thumb.xml：

<?xml version="1.0" encoding="UTF-8"?>

<gradient
    android:angle="270"
    android:endColor="#026b91"
    android:startColor="#026b91" />

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

custom_progress_bar.xml：

<!-- Define the background properties like color etc -->
<item android:id="@android:id/background">
    <shape>
        <solid android:color="#ffffff" />
        <corners android:radius="1dip" />
    </shape>
</item>

<!-- Define the progress properties like start color, end color etc -->
<item android:id="@android:id/progress">
    <clip>
        <shape>
            <solid android:color="#42cbf4"
                android:width="40dp"/>
        </shape>
    </clip>
</item>

为了将这些自定义添加到我的进度条，我使用了以下代码：

<SeekBar
   android:id="@+id/seekBar"
   android:thumb="@drawable/thumb"
   android:progressDrawable="@drawable/custom_progress_bar"
   android:layout_width="match_parent"
   android:layout_height="wrap_content" />

有关更多信息，我使用了此线程 Custom seekbar (thumb size, color and background)