Android - pasek wyszukiwania stylizacji

229

Chciałem zaprojektować pasek wyszukiwania, który wygląda jak ten na obrazku poniżej.

wprowadź opis zdjęcia tutaj

Używając domyślnego paska wyszukiwania otrzymam coś takiego:

wprowadź opis zdjęcia tutaj

Potrzebuję tylko zmienić kolor. Nie potrzebuję żadnych dodatkowych stylów. Czy istnieje jakikolwiek bezpośredni sposób, aby to zrobić, czy powinienem zbudować niestandardowy system do rysowania?

Próbowałem zbudować niestandardowy, ale nie mogłem uzyskać dokładnego, jak pokazano powyżej. Po użyciu niestandardowego rysowania otrzymuję to, co pokazano poniżej:

wprowadź opis zdjęcia tutaj

Jeśli muszę zbudować niestandardowy, proszę zasugerować, jak zmniejszyć szerokość linii postępu, a także kształt.

moja niestandardowa implementacja:

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>

pasek przeszukiwania:

<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
źródło
40
Dziękujemy za pokazanie działającego przykładu zmiany stylu paska wyszukiwania XD. (niewiele w Internecie).
Helin Wang

Odpowiedzi:

297

Wyodrębniłem pliki rysunkowe i xml z kodu źródłowego Androida i zmieniłem jego kolor na czerwony. Oto przykład, w jaki sposób ukończyłem to dla mdpi drawables:

Niestandardowe red_scrubber_control.xml(dodaj do 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>

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

Następnie skopiuj wymagane rysunki z kodu źródłowego Androida, wziąłem z tego linku

Dobrze jest skopiować te rysunki dla każdego hdpi, mdpi, xhdpi. Na przykład używam tylko mdpi:

Następnie za pomocą Photoshopa zmień kolor z niebieskiego na czerwony:

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

Dodaj SeekBar do układu:

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

Wynik:

wprowadź opis zdjęcia tutaj

Andrzej
źródło
Andrew, dziękuję za świetną odpowiedź. Mam z tym problem. Podczas korzystania z red_scrubber_controlrysowalnego kciuka wpadam w awarię. Jeśli wszystkie rysunki w selektorze są takie same, działa dobrze, ale jeśli zmienię jedną z nich, dostanę Resources$NotFoundException: File .../red_scrubber_control.xml from drawaable resource ID...jakieś myśli?
karl
2
Ups Okazuje się, że był związany z stackoverflow.com/questions/6669296/... . Nowe zdjęcie, które próbowałem dodać, to przypadkowo 37 MB zamiast 2 KB ...
karl
Czy jest jakiś sposób @dimenna ustawienie rozmiaru kciuka na podstawie ekranu?
Si8
1
@ SiKni8 Możesz zdefiniować inny wymiar dla różnych rozmiarów ekranu w oparciu o normalne, duże, duże, SW lub W parametry dla folderu wartości. Następnie po prostu użyj tego wymiaru w swoim układzie, stylu lub motywie. Sprawdź ten link
andrew
1
Dziękujemy za link do Androida Holo Colors Generator. To bardzo pomocne.
Drzewa
66

Moja odpowiedź jest zainspirowana odpowiedzią Andrasa Baláza Lajthy, która pozwala na pracę bez pliku xml

seekBar.getProgressDrawable().setColorFilter(Color.RED, PorterDuff.Mode.SRC_IN);
seekBar.getThumb().setColorFilter(Color.RED, PorterDuff.Mode.SRC_IN);
Fred Dupont
źródło
Kolor okna postępu zmienił się, ale kolor kciuka nie… dlaczego?
Yonatan Nir
7
Jeśli nie musisz tego robić w kodzie i nie chcesz tworzyć list warstw i rysunków itp., Możesz to również zrobić w xml paska wyszukiwania android:progressTint="@color/my_color" android:thumbTint="@color/another_color"
Daveloper87,
59

Jeśli chcesz dokładnie ten sam pasek, ale na czerwono, możesz programowo dodać filtr kolorów PorterDuff. Każdą rysownię, którą chcesz pokolorować, możesz uzyskać metodami klasy bazowej ProgressBar . Następnie ustaw dla niego filtr kolorów .

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

Jeśli żądanej korekty kolorów nie można dokonać za pomocą filtra Porter Duff, możesz określić własny filtr kolorów .

Andras Balázs Lajtha
źródło
3
nie jestem pewien, od którego zestawu SDK, proly 21, ale jeśli chcesz, aby ta sama ikona miała tylko inny kolor, po prostu dodaj kolor „colorAccent” w colors.xml i użyje go
tibbi
57

Niestandardowy styl materiałów paska wyszukiwania dla Androida, w przypadku innych dostosowań paska wyszukiwania 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>

styl niestandardowego materiału paska wyszukiwania

Arnav Rao
źródło
2
Świetne rozwiązanie dla Androida> 21
saltandpepper
4
Czy na pewno colorControlActivatedjest to odpowiedni parametr dla kciuka? Powinno być thumbTint.
Peter Knut,
Jakie jest rozwiązanie dla API poniżej 21?
Faisal Shaikh
42

Wystarczy zastąpić atrybuty kolorów swoim kolorem

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
źródło
1
Jak korzystać z plików na pasku wyszukiwania?
mungaih pk
@RahulRastogi jak wykorzystałeś te pliki? To głupie, że ta odpowiedź jest tak popularna z 0 wyjaśnieniami, jak to działa ...
Selali Adobor
1
@ AssortedTrailmix Zrobiłem to dawno temu. Spróbuj ustawić atrybuty, takie jak: android: thumb = "@ drawable / thumb", aw systemie Android: progressDrawable właściwość ustaw wyżej wymieniony plik rysunkowy listy warstw. Możesz spróbować: mindfiremobile.wordpress.com/2014/05/20/…
Rahul Rastogi
37

Google ułatwiło to w pakiecie SDK 21. Teraz mamy atrybuty do określania kolorów odcienia kciuka:

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
źródło
7
progressTint też.
afollestad
1
Listy odcieni mają zastosowanie do każdego elementu interfejsu użytkownika w systemie Android od API 21, tak właśnie stosuje się colorAccent.
afollestad
16

Wszystkie te odpowiedzi są nieaktualne.

W 2019 roku łatwiej jest zmienić styl paska wyszukiwania na preferowany kolor, zmieniając go ProgressBarna ten

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

Programowo stylizując kolor paska wyszukiwania, wypróbuj następujący kod

        seekBar.getProgressDrawable().setColorFilter(Color.RED, PorterDuff.Mode.SRC_IN);
        seekBar.getThumb().setColorFilter(Color.RED, PorterDuff.Mode.SRC_IN);
Giannis Mpountouridis
źródło
Dlaczego przestarzałe?
CoolMind
ponieważ biblioteki się zmieniły
Giannis Mpountouridis
Możesz zobaczyć odpowiedź @Ahamadullah Saikat ( stackoverflow.com/a/50074961/2914140 ) lub lvguowei.me/post/customize-android-seekbar-color . Nie używają bibliotek i nie ustawiają kolorów SeekBar nawet dla starych API.
CoolMind
11

Jak wspomniano powyżej (@andrew), tworzenie niestandardowego SeekBar jest bardzo łatwe w tej witrynie - http://android-holo-colors.com/

Po prostu włącz tam SeekBar, wybierz kolor, a otrzymasz wszystkie zasoby i skopiuj do projektu. Następnie zastosuj je w XML, na przykład:

  android:thumb="@drawable/apptheme_scrubber_control_selector_holo_light"
  android:progressDrawable="@drawable/apptheme_scrubber_progress_horizontal_holo_light"
Anton Kizema
źródło
10

wynik:

wprowadź opis zdjęcia tutaj

w pliku układu:

        <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>
Ahamadullah Saikat
źródło
nie wiedziałem, że istnieje AppCompat Seekbar
Pierre
10

Właśnie ustawiłem

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

To wszystko

Niedziela G Akinsete
źródło
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" />

działa tak samo jak wybrana odpowiedź. nie trzeba tworzyć żadnych plików do rysowania ani nic innego. (tylko IN 5.0) Pozdrawiam

Haroon Ahmed
źródło
5

Domyślnie Android dopasuje kolor postępu suwaka do

`<item name="colorAccent">`

wartość w pliku styles.xml . Następnie, aby ustawić niestandardowy obraz suwaka, po prostu użyj tego kodu w bloku układu xml SeekBar :

android:thumb="@drawable/slider"
Igor Ganapolski
źródło
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
źródło
4

W przypadku interfejsów API <21 (i> = 21) możesz użyć odpowiedzi @Ahamadullah Saikat lub https://www.lvguowei.me/post/customize-android-seekbar-color/ .

wprowadź opis zdjęcia tutaj

<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
źródło
3

Jeśli używasz domyślnego SeekBar dostarczonego przez Androida Sdk, to jest to prosty sposób na zmianę jego koloru. po prostu przejdź do color.xml wewnątrz /res/values/colours.xml i zmień colorAccent.

<resources>
    <color name="colorPrimary">#212121</color>
    <color name="colorPrimaryDark">#1e1d1d</color>
     <!-- change below line -->
    <color name="colorAccent">#FF4081</color>
</resources>
czerwona krew
źródło
2

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

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

aby ustawić 1dpwysokość tła i postępu .

Vrunoa
źródło
2

Prosty sposób na zmianę koloru paska wyszukiwania ...

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

Styl: Progress_color

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

zmiana klasy java ProgressDrawable ()

seek_bar.getProgressDrawable().setColorFilter(getResources().getColor(R.color.white), PorterDuff.Mode.MULTIPLY);
Mathan Chinna
źródło
1

Jeśli spojrzysz na zasoby Androida, pasek wyszukiwania faktycznie używa obrazów.

Musisz zrobić rysownię, która będzie przezroczysta u góry iu dołu, powiedzmy 10px, a środkowa linia 5px jest widoczna.

Zobacz załączony obraz. Musisz przekonwertować go na NinePatch.

wprowadź opis zdjęcia tutaj

Sagar Waghmare
źródło
czy możesz zasugerować kilka postów na ten sam temat?
suresh cheemalamudi
Jeden z dobrych linków, które znalazłem - mokasocial.com/2011/02/...
Sagar Waghmare,
Sunday G Rozwiązanie Akinsete działa, nie trzeba używać NinePatch
Helin Wang
0

Dla tych, którzy używają powiązania danych:

  1. Dodaj następującą metodę statyczną do dowolnej klasy

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

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

Otóż ​​to. Teraz możesz używać app:thumbTintCompatz dowolnymSeekBar . Odcień postępu można skonfigurować w ten sam sposób.

Uwaga: ta metoda jest również kompatybilna z urządzeniami sprzed wersji Lollipop.

Stan Mots
źródło
0

Mała korekta odpowiedzi @ arnav-rao:

aby upewnić się, że kciuk jest odpowiednio pokolorowany, użyj:

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

tutaj android: thumbTint faktycznie koloruje „kciuk”

levus.lazarus
źródło
0

sprawdź ten samouczek bardzo dobrze

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

prosty :

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

następnie plik stylu:

<?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
źródło
0

Chciałem stworzyć styl dla paska wyszukiwania, a następnie dodać styl do motywu, aby móc zastosować go do całego motywu, jednocześnie umożliwiając zastąpienie go przez styl podrzędny. Oto co zrobiłem:

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

Powyżej ustawia styl paska wyszukiwania Theme na niebieski dla wszystkich urządzeń 21+, w tym Samsunga (które wymagają dodatkowo seekBarStyle do Androida: seekBarStyle; nie jestem pewien, dlaczego, ale widziałem ten problem z pierwszej ręki). Jeśli chcesz, aby wszystkie paski wyszukiwania zachowały styl motywu i zastosowały styl zielonego paska wyszukiwania tylko do kilku widgetów, dodaj następujące elementy do odpowiedniego widgetu:

<SeekBar
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/AppTheme.Green"/>
Chris Sprague
źródło
0

W Bibliotece komponentów materiałów w wersji 1.2.0 można używać nowego Sliderkomponentu.

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

Możesz zastąpić domyślny kolor, używając czegoś takiego:

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

wprowadź opis zdjęcia tutaj

W przeciwnym razie możesz użyć tych atrybutów w układzie, aby zdefiniować kolor lub selektor kolorów:

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

lub możesz użyć niestandardowego stylu:

 <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
źródło
oficjalni doktorzy stwierdzają, że wciąż jest to planowane. czy jest jakaś inna alternatywa?
tejaspatel
@tejaspatel W odpowiedzi znajduje się link do oficjalnego komponentu. Pierwsza wersja jest teraz wydana w wersji 1.2.0-alpha01.
Gabriele Mariotti
-1

Możesz to zrobić w ten sposób:

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

Mam nadzieję, że to pomoże!

Omar Aflak
źródło
1
Nie sądzę, że można użyć koloru, w którym szuka rysowania
Lancelot