Android - stil arama çubuğu

Aşağıdaki resimde gösterilene benzeyen bir arama çubuğu oluşturmak istedim.

Varsayılan arama çubuğunu kullanarak böyle bir şey alırsınız:

Yani ihtiyacım olan sadece rengi değiştirmek. Fazladan stile ihtiyacım yok. Bunu yapmak için herhangi bir basit bir yaklaşım var mı veya benim özel çekilebilir inşa gerekir?

Özel bir tane inşa etmeyi denedim, ancak yukarıda gösterildiği gibi tam olarak alamadım. Özel çekilebilir kullandıktan sonra, aldığım şey aşağıda gösterildiği gibidir:

Özel bir tane oluşturmam gerekirse, lütfen ilerleme çizgisinin genişliğini ve şeklin nasıl azaltılacağını önerin.

benim özel uygulama:

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>

seekbar:

<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 kaynak kodundan çizilebilir ve xml ayıklayıp rengini kırmızıya değiştirirdim. İşte mdpi çekmeceleri için bunu nasıl tamamladı:

Özel red_scrubber_control.xml(res / çekilebilir öğeye ekle):

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

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

Sonra Android kaynak kodundan gerekli çekmeceleri kopyalayın , bu bağlantıdan aldım

Bu çekmeceleri her hdpi, mdpi, xhdpi için kopyalamak iyidir. Örneğin sadece mdpi kullanıyorum:

Ardından Photoshop'u kullanarak rengi maviden kırmızıya değiştirin:

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:

Düzene Ara Çubuğu ekle:

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

Sonuç:

Cevabım esinlenildi Andras Balázs Lajtha cevap xml dosyası olmadan çalışmasına izin

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

Aynı çubuğu ancak kırmızı renkte istiyorsanız, programlı olarak bir PorterDuff renk filtresi ekleyebilirsiniz. ProgressBar temel sınıfının yöntemleriyle renklendirmek istediğiniz her çekilebilir alabilirsiniz . Ardından bunun için bir renk filtresi ayarlayın .

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

İstenen renk ayarı bir Porter Duff filtresi ile yapılamıyorsa , kendi renk filtrenizi belirleyebilirsiniz .

Android seekbar özel malzeme stili, diğer seekbar özelleştirmeleri için 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>

Sadece renk özelliklerini renginizle değiştirin

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, SDK 21'de bunu daha kolay hale getirdi. Artık başparmak renk tonlarını belirtmek için niteliklerimiz var:

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

Tüm bu cevaplar kullanımdan kaldırıldı.

2019 yılında değişen tercih ettiğiniz renk için seekbar stil daha kolaydır ProgressBarBuna

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

Arama çubuğu renginizi biçimlendirmek için aşağıdaki kodu deneyin

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

Yukarıda belirtildiği gibi (@andrew), özel SeekBar oluşturmak bu site ile çok kolay - http://android-holo-colors.com/

Orada SeekBar'ı etkinleştirin, renk seçin ve tüm kaynakları alın ve projeye kopyalayın. Sonra bunları xml biçiminde uygulayın, örneğin:

  android:thumb="@drawable/apptheme_scrubber_control_selector_holo_light"
  android:progressDrawable="@drawable/apptheme_scrubber_progress_horizontal_holo_light"

çıktı:

düzen dosyasında:

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

çekilebilir / 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>

çekilebilir / 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>

çekilebilir / 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>

çekilebilir / 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>

Sadece ayarla

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

Bu kadar

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

seçilen cevap gibi çalışır. herhangi bir çekilebilir dosya veya başka bir şey yapmaya gerek yok. (sadece IN 5.0)

Varsayılan olarak, android kaydırıcısının ilerleme rengiyle

`<item name="colorAccent">`

styles.xml dosyasındaki değer . Ardından, özel bir kaydırıcı başparmak resmi ayarlamak için SeekBar xml düzeninizin bloğunda bu kodu kullanın :

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

<21 (ve> = 21) API'ları için @Ahamadullah Saikat veya https://www.lvguowei.me/post/customize-android-seekbar-color/ cevabını kullanabilirsiniz .

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

çekilebilir / 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>

çekilebilir / 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>

Android Sdk tarafından sağlanan varsayılan SeekBar kullanıyorsanız, o zaman onların rengini değiştirmek için basit bir yoludur. /res/values/colors.xml içindeki color.xml adresine gidin ve colorAccent öğesini değiştirin.

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

Değiştiririm 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>

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

arka plan ve ilerleme 1dpyüksekliğini yapmak için .

Arama çubuğu rengini değiştirmenin basit yolu ...

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

Tarz: Progress_color

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

java sınıfı değişikliği ProgressDrawable ()

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

Android kaynaklarına bakarsanız, arama çubuğu aslında görüntüleri kullanır.

Örneğin 10px için üst ve altta saydam olan bir çekilebilir yapmalısınız ve orta 5px çizgisi görünür.

Ekteki resme bakın. Bir NinePatch dönüştürmeniz gerekir.

Veri Bağlama kullananlar için:

1. Herhangi bir sınıfa aşağıdaki statik yöntemi ekleyin

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

2. app:thumbTintCompatSeekBar'ınıza özellik ekleyin

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

Bu kadar. Artık app:thumbTintCompatherhangi biriyle kullanabilirsiniz SeekBar. İlerleme tonu aynı şekilde yapılandırılabilir.

Not: bu yöntem lolipop öncesi cihazlarla da uyumludur.

@ Arnav-rao tarafından cevap için küçük düzeltme:

başparmağın düzgün renklendirildiğinden emin olmak için şunu kullanın:

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

burada android: thumbTint aslında "başparmak" renk

bu öğreticiyi çok iyi kontrol et

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

basit:

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

sonra bir stil dosyası:

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

Ben arama çubuğu için bir stil oluşturmak ve daha sonra hala bir alt stil geçersiz kılmak için izin verirken tüm bir temaya uygulamak olabilir böylece bir temaya stil eklemek istedim. İşte yaptım:

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

Yukarıdaki Tema arama çubuğu stilini Samsung dahil olmak üzere 21+ tüm cihazlar için maviye ayarlar (android'e ek olarak seekBarStyle'a ihtiyaç duyar: seekBarStyle; neden emin değilim ama bu sorunu ilk elden gördüm). Tüm arama çubuklarının tema stilini korumasını ve yalnızca yeşil arama çubuğu stilini birkaç widget'a uygulamak istiyorsanız, istediğiniz widget'a aşağıdakileri ekleyin:

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

Material Component Library sürüm 1.2.0 ile yeni Sliderbileşeni kullanabilirsiniz .

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

Aşağıdaki gibi bir şey kullanarak varsayılan rengi geçersiz kılabilirsiniz:

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

Aksi takdirde, bir renk veya renk seçici tanımlamak için mizanpajdaki bu niteliği kullanabilirsiniz:

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

veya özel bir stil kullanabilirsiniz:

 <style name="customSlider" parent="Widget.MaterialComponents.Slider">
    <item name="activeTrackColor">@color/....</item>
    <item name="inactiveTrackColor">@color/....</item>
    <item name="thumbColor">@color/....</item>
  </style>

Ayrıca bu şekilde yapabilirsiniz:

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

Umarım yardımcı olur!