Android - pasek wyszukiwania stylizacji

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>

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

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

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

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 .

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>

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>

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

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

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"

wynik:

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>

Właśnie ustawiłem

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

To wszystko

<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

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"

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

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

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

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>

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 .

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

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.

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.

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”

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>

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

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>

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>

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!