Android - Styling Suchleiste

228

Ich wollte eine Suchleiste gestalten, die wie im Bild unten aussieht.

Geben Sie hier die Bildbeschreibung ein

Wenn ich die Standard-Suchleiste verwende, erhalte ich ungefähr Folgendes:

Geben Sie hier die Bildbeschreibung ein

Ich muss also nur die Farbe ändern. Ich brauche keine zusätzlichen Stile. Gibt es einen einfachen Ansatz, um dies zu tun, oder sollte ich mein benutzerdefiniertes Zeichenobjekt erstellen?

Ich habe versucht, eine benutzerdefinierte zu erstellen, aber ich konnte nicht die genaue wie oben gezeigt erhalten. Nach der Verwendung von benutzerdefinierten Zeichenobjekten erhalte ich Folgendes:

Geben Sie hier die Bildbeschreibung ein

Wenn ich die benutzerdefinierte erstellen muss, schlagen Sie bitte vor, wie Sie die Breite der Fortschrittslinie und auch die Form reduzieren können.

meine benutzerdefinierte Implementierung:

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>

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>

Suchleiste:

<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>
suresh cheemalamudi
quelle
40
Vielen Dank, dass Sie ein funktionierendes Beispiel für eine Änderung des Suchleistenstils XD gezeigt haben. (nicht viele im Internet).
Helin Wang

Antworten:

297

Ich würde Drawables und XML aus dem Android-Quellcode extrahieren und seine Farbe in Rot ändern. Hier ist ein Beispiel, wie ich dies für mdpi-Drawables abgeschlossen habe:

Benutzerdefiniert red_scrubber_control.xml(zu res / drawable hinzufügen):

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

Benutzerdefiniert: 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>

Dann kopiere die erforderlichen Drawables aus dem Android-Quellcode, den ich von diesem Link genommen habe

Es ist gut, diese Zeichen für jedes hdpi, mdpi, xhdpi zu kopieren. Zum Beispiel benutze ich nur mdpi:

Ändern Sie dann mit Photoshop die Farbe von blau nach rot:

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

Fügen Sie SeekBar zum Layout hinzu:

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

Ergebnis:

Geben Sie hier die Bildbeschreibung ein

Andrew
quelle
Andrew, danke für die tolle Antwort. Ich habe ein Problem damit. Wenn red_scrubber_controlich das Zeichen für den Daumen benutze, stoße ich auf einen Absturz. Wenn alle Drawables im Selector gleich sind, funktioniert es gut, aber wenn ich eines davon ändere, bekomme ich Resources$NotFoundException: File .../red_scrubber_control.xml from drawaable resource ID...irgendwelche Gedanken?
Karl
2
Hoppla. Es stellte sich heraus, dass es mit stackoverflow.com/questions/6669296/… zusammenhängt . Das neue Bild wurde ich hinzufügen versucht wurde versehentlich 37MB statt 2KB ...
karl
Gibt es überhaupt eine Möglichkeit @dimen, die Größe des Daumens basierend auf dem Bildschirm einzustellen?
Si8
1
@ SiKni8 Sie können unterschiedliche Dimensionen für unterschiedliche Bildschirmgrößen definieren, basierend auf normalen, großen, großen, großen oder w-Parametern für den Werteordner. Verwenden Sie diese Dimension dann einfach in Ihrem Layout, Stil oder Thema. Überprüfen Sie diesen Link
Andrew
1
Vielen Dank für den Link zum Android Holo Colors Generator. Das ist sehr hilfreich.
Bäume
66

Meine Antwort ist inspiriert von Andras Balázs Lajthas Antwort, die es erlaubt, ohne XML-Datei zu arbeiten

seekBar.getProgressDrawable().setColorFilter(Color.RED, PorterDuff.Mode.SRC_IN);
seekBar.getThumb().setColorFilter(Color.RED, PorterDuff.Mode.SRC_IN);
Fred Dupont
quelle
Die Farbe des Fortschrittsdialogs hat sich geändert, die Farbe der Daumen jedoch nicht. Warum?
Yonatan Nir
7
Wenn Sie dies nicht im Code tun müssen und keine Ebenenlisten und Drawables usw. erstellen möchten, können Sie dies auch in der XML-Datei der Suchleiste tun android:progressTint="@color/my_color" android:thumbTint="@color/another_color"
Daveloper87
59

Wenn Sie genau den gleichen Balken in Rot wünschen, können Sie programmgesteuert einen PorterDuff-Farbfilter hinzufügen. Sie können jedes Zeichenelement, das Sie einfärben möchten, mit den Methoden der ProgressBar- Basisklasse abrufen . Stellen Sie dann einen Farbfilter dafür ein.

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

Wenn die gewünschte Farbanpassung nicht über einen Porter Duff-Filter vorgenommen werden kann, können Sie Ihren eigenen Farbfilter angeben .

Andras Balázs Lajtha
quelle
3
Ich bin mir nicht sicher, seit welchem ​​SDK, Proly 21, aber wenn Sie dasselbe Symbol nur in einer anderen Farbe verwenden möchten, fügen Sie einfach die Farbe "colorAccent" in colours.xml hinzu und es wird verwendet
tibbi
56

Benutzerdefinierter Materialstil für Android-Suchleisten für andere Suchleistenanpassungen 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>

Suchleiste benutzerdefinierten Materialstil

Arnav Rao
quelle
2
Tolle Lösung für Android> 21
Saltandpepper
4
Sind Sie sicher, dass dies colorControlActivatedder richtige Parameter für den Daumen ist? Es sollte sein thumbTint.
Peter Knut
Was ist die Lösung für die unten stehende API 21?
Faisal Shaikh
41

Ersetzen Sie einfach Farbatributtes durch Ihre Farbe

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>
Ionutgyn
quelle
1
Wie verwende ich die Dateien in einer Suchleiste?
Mungaih pk
@ RahulRastogi Wie haben Sie diese Dateien verwendet?
Ein bisschen
1
@AssortedTrailmix Ich habe es vor langer Zeit gemacht. Versuchen Sie, Attribute wie: android: thumb = "@ drawable / thumb" und in der Eigenschaft android: progressDrawable die oben genannte Drawable-Datei für die Ebenenliste festzulegen. Sie können versuchen: mindfiremobile.wordpress.com/2014/05/20/…
Rahul Rastogi
37

Google hat dies in SDK 21 vereinfacht. Jetzt haben wir Attribute zum Festlegen der Daumenfarben:

android:thumbTint
android:thumbTintMode
android:progressTint

http://developer.android.com/reference/android/widget/AbsSeekBar.html#attr_android:thumbTint http://developer.android.com/reference/android/widget/AbsSeekBar.html#attr_android:thumbTintMode

k2col
quelle
7
progressTint auch.
afollestad
1
Farbtonlisten gelten ab API 21 für jedes UI-Element unter Android. So wird colorAccent angewendet.
afollestad
16

Alle diese Antworten sind veraltet.

Im Jahr 2019 ist es einfacher , Ihre seekbar auf Ihre bevorzugte Farbe , Stil , indem Sie Ihre Wechsel ProgressBarzu diesem

<SeekBar
            android:id="@+id/seekBar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:progressTint="#36970f"
            android:thumbTint="#36970f"
            />

Versuchen Sie den folgenden Code, um Ihre Suchleistenfarbe programmgesteuert zu gestalten

        seekBar.getProgressDrawable().setColorFilter(Color.RED, PorterDuff.Mode.SRC_IN);
        seekBar.getThumb().setColorFilter(Color.RED, PorterDuff.Mode.SRC_IN);
Giannis Mpountouridis
quelle
Warum veraltet?
CoolMind
weil sich die Bibliotheken geändert haben
Giannis Mpountouridis
Sie können die Antwort von @Ahamadullah Saikat ( stackoverflow.com/a/50074961/2914140 ) oder lvguowei.me/post/customize-android-seekbar-color sehen . Sie verwenden keine Bibliotheken und legen die SeekBar-Farben auch für alte APIs fest.
CoolMind
11

Wie oben erwähnt (@andrew), ist das Erstellen einer benutzerdefinierten SeekBar mit dieser Website - http://android-holo-colors.com/ - sehr einfach.

Aktivieren Sie dort einfach SeekBar, wählen Sie Farbe und erhalten Sie alle Ressourcen und kopieren Sie sie in das Projekt. Wenden Sie sie dann in XML an, zum Beispiel:

  android:thumb="@drawable/apptheme_scrubber_control_selector_holo_light"
  android:progressDrawable="@drawable/apptheme_scrubber_progress_horizontal_holo_light"
Anton Kizema
quelle
10

Ausgabe:

Geben Sie hier die Bildbeschreibung ein

in der Layoutdatei:

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

Farben.xml

<color name="myPrimaryColor">#660033</color>
Ahamadullah Saikat
quelle
wusste nicht, dass AppCompat Seekbar existiert
Pierre
10

Einfach einstellen

android:maxHeight="3dp"
android:minHeight="3dp"

Das ist alles

Sonntag G Akinsete
quelle
9
<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" />

funktioniert wie gleich die gewählte Antwort. Keine Notwendigkeit, eine zeichnbare Datei zu erstellen oder sonst. (nur IN 5.0) Grüße

Haroon Ahmed
quelle
5

Standardmäßig passt Android die Fortschrittsfarbe Ihres Schiebereglers an

`<item name="colorAccent">`

Wert in Ihrer styles.xml . Um ein benutzerdefiniertes Schieberegler- Daumenbild festzulegen , verwenden Sie einfach diesen Code im Block Ihres SeekBar- XML-Layouts:

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

Für APIs <21 (und> = 21) können Sie die Antwort von @Ahamadullah Saikat oder https://www.lvguowei.me/post/customize-android-seekbar-color/ verwenden .

Geben Sie hier die Bildbeschreibung ein

<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>
CoolMind
quelle
3

Wenn Sie die von Android Sdk bereitgestellte Standard-SeekBar verwenden, können Sie auf einfache Weise die Farbe ändern. Gehen Sie einfach zu color.xml in /res/values/colors.xml und ändern Sie den colorAccent.

<resources>
    <color name="colorPrimary">#212121</color>
    <color name="colorPrimaryDark">#1e1d1d</color>
     <!-- change below line -->
    <color name="colorAccent">#FF4081</color>
</resources>
rotes Blut
quelle
2

Ich ändere das 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>

und das 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>

um den Hintergrund und die Fortschrittshöhe zu 1dpbestimmen.

vrunoa
quelle
2

Einfache Möglichkeit, die Farbe der Suchleiste zu ändern ...

 <ProgressBar
            android:id="@+id/progress"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:theme="@style/Progress_color"/>

Stil: Progress_color

 <style name="Progress_color">
    <item name="colorAccent">@color/white</item> <!-- Whatever color you want-->
</style>

Java-Klassenänderung ProgressDrawable ()

seek_bar.getProgressDrawable().setColorFilter(getResources().getColor(R.color.white), PorterDuff.Mode.MULTIPLY);
Mathan Chinna
quelle
1

Wenn Sie sich die Android-Ressourcen ansehen, werden in der Suchleiste tatsächlich Bilder verwendet.

Sie müssen eine Zeichenfläche erstellen, die oben und unten transparent ist, z. B. 10 Pixel, und die mittlere 5 Pixel-Linie ist sichtbar.

Siehe beigefügtes Bild. Sie müssen es in ein NinePatch konvertieren.

Geben Sie hier die Bildbeschreibung ein

Sagar Waghmare
quelle
Kannst du bitte einige Beiträge dazu vorschlagen?
suresh cheemalamudi
Einer der guten Links, die ich gefunden habe - mokasocial.com/2011/02/…
Sagar Waghmare
Die Lösung von Sunday G Akinsete funktioniert, es muss kein NinePatch verwendet werden
Helin Wang
0

Für diejenigen, die Datenbindung verwenden:

  1. Fügen Sie jeder Klasse die folgende statische Methode hinzu

    @BindingAdapter("app:thumbTintCompat")
    public static void setThumbTint(SeekBar seekBar, @ColorInt int color) {
        seekBar.getThumb().setColorFilter(color, PorterDuff.Mode.SRC_IN);
    }
  2. Fügen Sie app:thumbTintCompatIhrer SeekBar ein Attribut hinzu

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

Das ist es. Jetzt können Sie app:thumbTintCompatmit jedem verwendenSeekBar . Die Fortschrittsfarbe kann auf die gleiche Weise konfiguriert werden.

Hinweis: Diese Methode ist auch mit Pre-Lollipop-Geräten kompatibel.

Stan Mots
quelle
0

Kleine Korrektur der Antwort von @ arnav-rao:

Verwenden Sie Folgendes, um sicherzustellen, dass der Daumen richtig gefärbt ist:

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

hier android: thumbTint färbt tatsächlich den "Daumen"

levus.lazarus
quelle
0

Überprüfen Sie dieses Tutorial sehr gut

https://www.lvguowei.me/post/customize-android-seekbar-color/

einfach:

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

dann eine Style-Datei:

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

Ich wollte einen Stil für die Suchleiste erstellen und den Stil dann einem Thema hinzufügen, damit er auf ein ganzes Thema angewendet werden kann, während ein Unterstil ihn überschreiben kann. Folgendes habe ich getan:

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

Das Obige setzt den Suchleistenstil des Themas für alle Geräte 21+ einschließlich Samsung auf blau (für die zusätzlich zu android: seekBarStyle auch seekBarStyle angewendet werden muss; nicht sicher warum, aber ich habe dieses Problem aus erster Hand gesehen). Wenn Sie möchten, dass alle Suchleisten den Designstil beibehalten und den grünen Suchleistenstil nur auf einige Widgets anwenden, fügen Sie dem gewünschten Widget Folgendes hinzu:

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

Mit der Material Component Library Version 1.2.0 können Sie die neue SliderKomponente verwenden.

 <com.google.android.material.slider.Slider
       android:valueFrom="0"
       android:valueTo="300"
       android:value="200"
       android:theme="@style/slider_red"
       />

Sie können die Standardfarbe wie folgt überschreiben:

  <style name="slider_red">
    <item name="colorPrimary">#......</item>
  </style>

Geben Sie hier die Bildbeschreibung ein

Andernfalls können Sie diese Attribute im Layout verwenden, um eine Farbe oder einen Farbwähler zu definieren:

   <com.google.android.material.slider.Slider
       app:activeTrackColor="@color/...."
       app:inactiveTrackColor="@color/...."
       app:thumbColor="@color/...."
       />

oder Sie können einen benutzerdefinierten Stil verwenden:

 <style name="customSlider" parent="Widget.MaterialComponents.Slider">
    <item name="activeTrackColor">@color/....</item>
    <item name="inactiveTrackColor">@color/....</item>
    <item name="thumbColor">@color/....</item>
  </style>
Gabriele Mariotti
quelle
Offizielle Dokumente besagen, dass es noch geplant ist. Gibt es eine andere Alternative?
Tejaspatel
@tejaspatel In der Antwort gibt es den Link der offiziellen Komponente. Die 1. Version ist jetzt in 1.2.0-alpha01 veröffentlicht.
Gabriele Mariotti
-1

Sie können es auch so machen:

<SeekBar
    android:id="@+id/redSeekBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:progressDrawable="@color/red"
    android:maxHeight="3dip"/>

Hoffe es wird helfen!

Omar Aflak
quelle
1
Ich glaube nicht, dass Sie eine Farbe verwenden können, in der nach einem Zeichenmaterial gesucht wird
Lancelot