Android - 样式搜索栏

Question

我想设计一个搜索栏，如下图所示。

通过使用默认搜索栏，我会得到这样的结果：

所以我只需要改变颜色。我不需要额外的样式。是否有任何直接的方法可以做到这一点，或者我应该构建我的自定义可绘制对象。

我尝试构建自定义一个，但我无法获得如上所示的确切一个。 使用自定义drawable后，我得到如下图：

如果我需要构建自定义的，那么请建议如何减少进度线的宽度以及形状。

我的自定义实现：

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

Answer 1

我将从 Android 源代码中提取可绘制对象和 xml，并将其颜色更改为红色。 这是我如何为 mdpi drawables 完成此操作的示例：

自定义red_scrubber_control.xml（添加到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>

自定义：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>

然后从Android源代码中复制需要的drawables，我取了from this link

最好为每个 hdpi、mdpi、xhdpi 复制这些可绘制对象。例如我只使用 mdpi：

然后使用 Photoshop 将颜色从蓝色变为红色：

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：

将 SeekBar 添加到布局中：

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

结果：

Answer 2

Android seekbar 自定义材质样式，用于其他seekbar 自定义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:thumbTint">#c51162</item>
</style>

更新：colorControlActivated 现在是 thumbTint。

Answer 3

我的回答灵感来自 Andras Balázs Lajtha 的回答 它允许在没有 xml 文件的情况下工作

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

Answer 4

如果您想要完全相同但为红色的条形，您可以通过编程方式添加 PorterDuff 滤色器。您可以通过ProgressBar 基类的方法获取每个要着色的drawable。然后为它设置一个color filter。

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

如果无法通过 Porter Duff 滤镜进行所需的颜色调整，您可以specify your own color filter。

Answer 5

Google 在 SDK 21 中使这变得更容易。现在我们有用于指定拇指色调颜色的属性：

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

Answer 6

只需用你的颜色替换颜色属性

背景.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>

进度.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>

Answer 7

所有这些答案都已弃用。

在 2019 年，通过将您的 ProgressBar 更改为此，可以更轻松地将搜索栏设置为您喜欢的颜色

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

以编程方式设置搜索栏颜色的样式，尝试以下代码

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

Answer 8

对于 = 21）的 API，您可以使用 @Ahamadullah Saikat 或 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>

Answer 9

设置好了

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

就是这样

Answer 10

输出：

更改进度颜色：

int normalColor = ContextCompat.getColor(context, R.color.normal_color);
int selectedColor = ContextCompat.getColor(context, R.color.selected_color);
Drawable normalDrawable = new ColorDrawable(normalColor);
Drawable selectedDrawable = new ColorDrawable(selectedColor);
ClipDrawable clipDrawable = new ClipDrawable(selectedDrawable, Gravity.LEFT, ClipDrawable.HORIZONTAL);
Drawable[] layers = {normalDrawable, clipDrawable, clipDrawable};
LayerDrawable seekbarDrawable = new LayerDrawable(layers);
seekBar.setProgressDrawable(seekbarDrawable);

更改拇指颜色：

int thumbColor = ContextCompat.getColor(context, R.color.thumb_color);
Drawable unwrappedDrawable = AppCompatResources.getDrawable(context, R.drawable.ic_seekbar_thumb);
assert unwrappedDrawable != null;
Drawable wrappedDrawable = DrawableCompat.wrap(unwrappedDrawable);
DrawableCompat.setTint(wrappedDrawable, thumbColor);
seekBar.setThumb(wrappedDrawable);

Answer 11

如上所述 (@andrew)，使用此站点创建自定义 SeekBar 非常简单 - http://android-holo-colors.com/

只需在此处启用 SeekBar，选择颜色，然后接收所有资源并复制到项目。 然后在xml中应用，例如：

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

Answer 12

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

works 与所选答案相同。无需制作任何可绘制文件或其他。（仅限 IN 5.0） 问候

Answer 13

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

Answer 14

默认情况下，android会将你的滑块的进度颜色匹配到

`<item name="colorAccent">`

styles.xml 中的值。然后，要设置自定义滑块缩略图，只需在 SeekBar xml 布局的块中使用此代码：

android:thumb="@drawable/slider"

Answer 15

如果您使用的是 android Sdk 提供的默认 SeekBar，那么它们是一种更改其颜色的简单方法。只需转到 /res/values/colors.xml 中的 color.xml 并更改 colorAccent。

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

Answer 16

改变搜索栏颜色的简单方法...

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

风格：Progress_color

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

java类改ProgressDrawable()

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

Answer 17

我改了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>

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

制作背景和进度1dp 高度。

Answer 18

如果你看 Android 资源，搜索栏实际上使用图像。

您必须制作一个在顶部和底部透明的可绘制对象，例如 10 像素，并且中心 5 像素的线可见。

参考附图。您需要将其转换为 NinePatch。

Answer 19

借助材料组件库版本 1.2.0，您可以使用新的 Slider 组件。

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

您可以使用以下内容覆盖默认颜色：

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

否则您可以在布局中使用这些属性来定义颜色或颜色选择器：

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

或者您可以使用自定义样式：

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

Answer 20

对于那些使用数据绑定的人：

1. 将以下静态方法添加到任何类中

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

2. 将app:thumbTintCompat 属性添加到您的 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}"
   />
   

就是这样。现在您可以将app:thumbTintCompat 与任何SeekBar 一起使用。可以用相同的方式配置进度色调。

注意：此方法也适用于棒棒糖之前的设备。

Answer 21

@arnav-rao 对答案的小修正：

要确保拇指正确着色，请使用：

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

这里 android:thumbTint 实际上为“拇指”着色

Answer 22

看这个教程很好

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:max="100"
                android:maxHeight="3dp"
                android:minHeight="3dp"
                android:progressDrawable="@drawable/seekbar_style"
                android:thumbTint="@color/positive_color"/>

然后是样式文件：

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

Answer 23

我想为搜索栏创建一个样式，然后将该样式添加到主题中，这样我就可以将其应用于整个主题，同时仍允许子样式覆盖它。这是我所做的：

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

上面将所有 21 岁以上设备的 Theme seekbar 样式设置为蓝色，包括三星（除了 android:seekBarStyle 之外还需要应用 seekBarStyle；不知道为什么，但我亲眼看到了这个问题）。如果您希望所有搜索栏都保持主题样式并且仅将绿色搜索栏样式应用于少数小部件，则将以下内容添加到您想要的小部件中：

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

Answer 24

现在变得非常容易，使用材质滑块并使用它来自定义颜色：

   app:thumbColor="@color/colorPrimary"
   app:trackColorInactive="@color/grey"
   app:trackColorActive="@color/colorPrimary"

Answer 25

你也可以这样：

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

希望对您有所帮助！