[解決済み] Android - シークバーのスタイリング

質問

下の画像のようなシークバーを作りたいのですが、どうすればいいですか？

デフォルトのシークバーを使用すると、次のようになります。

つまり、私が必要としているのは、色を変えるだけなのです。余分なスタイルは必要ありません。これを行うための直接的なアプローチはありますか、または私はカスタムdrawableを構築する必要がありますか？

カスタムで作ってみましたが、上記のような正確なものを得ることができませんでした。 カスタム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>

進捗状況.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
        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>

解決方法は？

Androidのソースコードからdrawablesとxmlを抽出し、その色を赤に変更するのです。 以下は、mdpiのdrawableでこれを実現した例です。

カスタム 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 のソースコードから必要な drawables をコピーします。 このリンクから

これらのdrawableは、hdpi, mdpi, xhdpiごとにコピーするとよいでしょう。例えば、私はmdpiしか使っていません。

そして、Photoshopで色を青から赤に変更します。

red_scrubber_control_disabled_holo.png。

赤色スクラバーコントロールのフォーカスホログラムです。

赤のスクラバーコントロールのノーマルホログラムです。

赤色のスクラバーコントロールのホログラムです。

red_scrubber_primary_holo.9.png。

赤_スクラバー_セカンダリ_ホロ.9.png:

赤色スクラバー・トラック・ホロ・ライト.9.png:

レイアウトにSeekBarを追加します。

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

結果