web-dev-qa-db-ja.com

Android - スタイルシークバー

下の画像のようなシークバーをスタイルしたいと思いました。

enter image description here

デフォルトのseekbarを使うことで、私はこのようになるでしょう：

enter image description here

だから私は色を変えるだけです。余分なスタイルは必要ありません。これを行うための直接的なアプローチはありますか、それとも私はカスタムドロウアブルを構築するべきですか？

私はカスタムのものを構築しようとしましたが、私は上記のように正確なものを得ることができませんでした。カスタムドロウアブルを使用した後、私が得るものは以下の通りです：

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>

progess_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
        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>
androidseekbarcustom-selectors
209
suresh cheemalamudi

私は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を使って色を青から赤に変更します。

red_scrubber_control_disabled_holo.png： red_scrubber_control_disabled_holo

red_scrubber_control_focused_holo.png： red_scrubber_control_focused_holo

red_scrubber_control_normal_holo.png： red_scrubber_control_normal_holo

red_scrubber_control_pressed_holo.png： red_scrubber_control_pressed_holo

red_scrubber_primary_holo.9.png： red_scrubber_primary_holo.9

red_scrubber_secondary_holo.9.png： red_scrubber_secondary_holo.9

red_scrubber_track_holo_light.9.png： red_scrubber_track_holo_light.9

レイアウトに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" />

結果：

enter image description here

289
andrew

私の答えはAndrasBalázsLajthaの答えからヒントを得ています。

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

同じバーで、赤で表示したい場合は、PorterDuffカラーフィルタをプログラムで追加することができます。あなたは ProgressBar 基本クラスのメソッドを通して色付けしたいそれぞれのドロアブルを得ることができます。それから カラーフィルタ を設定してください。

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

必要な色調整がPorter Duffフィルタではできない場合は、 独自の色フィルタを指定できます 。

59
Andras Balázs Lajtha

色属性を自分の色に置き換えるだけです

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

GoogleはSDK 21でこれをより簡単にしました。今、私たちはサムティントカラーを指定するための属性を持っています：

Android:thumbTint
Android:thumbTintMode
Android:progressTint

http://developer.Android.com/reference/Android/widget/AbsSeekBar.html#attr_Android:thumbTinthttp://developer.Android.com/reference/Android/widget/AbsSeekBar.html#attr_Android:thumbTintMode

34
k2col

他のシークバーカスタマイズ用の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:colorControlActivated">#c51162</item>
</style>

seekbar custom material style

32
Arnav Rao

上記の1つ（@andrew）を参照して、カスタムSeekBarを作成することはこのサイトで超簡単です - 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"
11
Anton Kizema

ただセット

Android:maxHeight="3dp"
Android:minHeight="3dp"

それで全部です

10
Sunday G Akinsete
<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" />

選択した答えと同じように機能します。描画可能なファイルなどを作成する必要はありません（IN 5.0のみ）。

8
Haroon Ahmed

出力：

enter image description here

レイアウトファイル内：

        <Android.support.v7.widget.AppCompatSeekBar
            Android:id="@+id/seekBar_bn"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:gravity="center"
            Android:max="25"
            Android:minHeight="10dp"
            Android:progress="10"
            Android:progressDrawable="@drawable/progress"
            Android:thumb="@drawable/custom_thumb" />

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

drawable/background_fill.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item
        Android:bottom="6dp"
        Android:left="-6dp"
        Android:right="-6dp"
        Android:top="6dp">

        <shape Android:shape="rectangle">
            <solid Android:color="#888888" />
            <stroke
                Android:width="5dp"
                Android:color="@Android:color/transparent" />
        </shape>
    </item>
</layer-list>

drawable/progress_fill.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item
        Android:bottom="6dp"
        Android:left="-6dp"
        Android:right="-6dp"
        Android:top="6dp">

        <shape Android:shape="rectangle">
            <solid Android:color="@color/myPrimaryColor" />
            <stroke
                Android:width="5dp"
                Android:color="@Android:color/transparent" />
        </shape>
    </item>
</layer-list>

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/myPrimaryColor"/>
            <size
                Android:width="22dp"
                Android:height="22dp"/>
        </shape>
    </item>
</layer-list>

colors.xml

<color name="myPrimaryColor">#660033</color>
6
Ahamadullah Saikat

これらすべての答えは非推奨です。

2019年では、ProgressBarname__を次のように変更することで、シークバーを好みの色にスタイル設定するのが簡単になりました。

<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);
5
Giannis Mpountouridis

デフォルトでは、Androidはスライダーの進行色を

`<item name="colorAccent">`

styles.xmlの値。次に、カスタムスライダーサムイメージを設定するには、SeekBarxmlレイアウトのブロックでこのコードを使用します。

Android:thumb="@drawable/slider"
5
IgorGanapolsky
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);
3
Hugo

あなたが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>
3
redblood

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>

背景と進行状況を1dpの高さにします。

2
vrunoa

シークバーの色を変更する簡単な方法...

 <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);
2
Mathan Chinna

Androidのリソースを見ると、シークバーは実際には画像を使用しています。

あなたは例えば10pxのために上下に透明であるドロアブルを作らなければなりません、そして、中央の5pxラインは目に見えます。

添付の画像を参照してください。あなたはそれをNinePatchに変換する必要があります。

enter image description here

1
Sagar Waghmare

APIが21（および> = 21）の場合は、 @ Ahamadullah Saikat または https：/の答えを使用できます。 /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"
    />

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

drawable/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>
0
CoolMind

このチュートリアルをチェックする

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

シークバー用のスタイルを作成し、それをテーマに追加して、サブスタイルで上書きできるようにしながら、テーマ全体に適用できるようにしたいと思いました。これが私がしたことです：

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

上記はSamsungを含むすべてのデバイス21+でテーマシークバースタイルを青に設定します（Androidに加えてseekBarStyleを適用する必要があります。seekBarStyle。理由はわかりませんが、私は直接この問題を見ました）。すべてのシークバーがテーマスタイルを維持し、いくつかのウィジェットにのみ緑色のシークバースタイルを適用するようにしたい場合は、必要なウィジェットに以下を追加します。

<SeekBar
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:theme="@style/AppTheme.Green"/>
0
Chris Sprague

データバインディングを使用する人のために：

  1. 次の静的メソッドを任意のクラスに追加します。

    @BindingAdapter("app:thumbTintCompat")
public static void setThumbTint(SeekBar seekBar, @ColorInt int color) {
    seekBar.getThumb().setColorFilter(color, PorterDuff.Mode.SRC_IN);
}

  2. あなたのSeekBarにapp:thumbTintCompat属性を追加してください

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

それでおしまい。これでapp:thumbTintCompatを任意のSeekBarと一緒に使用できます。進捗の色合いも同じ方法で設定できます。

注：この方法は、Lollipop以前のデバイスにも対応しています。

0
Stan Mots

@ 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は実際には "thumb"を着色しています

0
levus.lazarus