Chciałem zaprojektować pasek wyszukiwania, który wygląda jak ten na obrazku poniżej.
Używając domyślnego paska wyszukiwania otrzymam coś takiego:
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:
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>
android
android-seekbar
custom-selectors
android-slider
Suresh Cheemalamudi
źródło
źródło
Odpowiedzi:
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):Zwyczaj:
red_scrubber_progress.xml
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_focused_holo.png:
red_scrubber_control_normal_holo.png:
red_scrubber_control_pressed_holo.png:
red_scrubber_primary_holo.9.png:
red_scrubber_secondary_holo.9.png:
red_scrubber_track_holo_light.9.png:
Dodaj SeekBar do układu:
Wynik:
źródło
red_scrubber_control
rysowalnego 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?@dimen
na ustawienie rozmiaru kciuka na podstawie ekranu?Moja odpowiedź jest zainspirowana odpowiedzią Andrasa Baláza Lajthy, która pozwala na pracę bez pliku xml
źródło
android:progressTint="@color/my_color" android:thumbTint="@color/another_color"
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 .
Jeśli żądanej korekty kolorów nie można dokonać za pomocą filtra Porter Duff, możesz określić własny filtr kolorów .
źródło
Niestandardowy styl materiałów paska wyszukiwania dla Androida, w przypadku innych dostosowań paska wyszukiwania http://www.zoftino.com/android-seekbar-and-custom-seekbar-examples
źródło
colorControlActivated
jest to odpowiedni parametr dla kciuka? Powinno byćthumbTint
.Wystarczy zastąpić atrybuty kolorów swoim kolorem
background.xml
progress.xml
style.xml
thumb.xml
źródło
Google ułatwiło to w pakiecie SDK 21. Teraz mamy atrybuty do określania kolorów odcienia kciuka:
http://developer.android.com/reference/android/widget/AbsSeekBar.html#attr_android:thumbTint http://developer.android.com/reference/android/widget/AbsSeekBar.html#attr_android:thumbTintMode
źródło
Wszystkie te odpowiedzi są nieaktualne.
W 2019 roku łatwiej jest zmienić styl paska wyszukiwania na preferowany kolor, zmieniając go
ProgressBar
na tenProgramowo stylizując kolor paska wyszukiwania, wypróbuj następujący kod
źródło
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:
źródło
wynik:
w pliku układu:
drawable / progress.xml
drawable / background_fill.xml
drawable / progress_fill.xml
drawable / custom_thumb.xml
colors.xml
źródło
Właśnie ustawiłem
To wszystko
źródło
działa tak samo jak wybrana odpowiedź. nie trzeba tworzyć żadnych plików do rysowania ani nic innego. (tylko IN 5.0) Pozdrawiam
źródło
Domyślnie Android dopasuje kolor postępu suwaka do
wartość w pliku styles.xml . Następnie, aby ustawić niestandardowy obraz suwaka, po prostu użyj tego kodu w bloku układu xml SeekBar :
źródło
źródło
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/ .
drawable / seek_bar_ruler.xml:
drawable / seek_bar_slider.xml:
źródło
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.
źródło
Zmieniam
background_fill.xml
i
progress_fill.xml
aby ustawić
1dp
wysokość tła i postępu .źródło
Prosty sposób na zmianę koloru paska wyszukiwania ...
Styl: Progress_color
zmiana klasy java ProgressDrawable ()
źródło
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.
źródło
Dla tych, którzy używają powiązania danych:
Dodaj następującą metodę statyczną do dowolnej klasy
Dodaj
app:thumbTintCompat
atrybut do SeekBarOtóż to. Teraz możesz używać
app:thumbTintCompat
z 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.
źródło
Mała korekta odpowiedzi @ arnav-rao:
aby upewnić się, że kciuk jest odpowiednio pokolorowany, użyj:
tutaj android: thumbTint faktycznie koloruje „kciuk”
źródło
sprawdź ten samouczek bardzo dobrze
https://www.lvguowei.me/post/customize-android-seekbar-color/
prosty :
następnie plik stylu:
źródło
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:
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:
źródło
W Bibliotece komponentów materiałów w wersji 1.2.0 można używać nowego
Slider
komponentu.Możesz zastąpić domyślny kolor, używając czegoś takiego:
W przeciwnym razie możesz użyć tych atrybutów w układzie, aby zdefiniować kolor lub selektor kolorów:
lub możesz użyć niestandardowego stylu:
źródło
Możesz to zrobić w ten sposób:
Mam nadzieję, że to pomoże!
źródło