Android-样式查找栏


229

我想为搜索栏设置样式,如下图所示。

在此处输入图片说明

通过使用默认的搜索栏,我将得到如下内容:

在此处输入图片说明

所以我只需要改变颜色。我不需要多余的样式。有没有直接的方法可以做到这一点,还是应该构建自定义可绘制对象?

我尝试构建自定义商品,但无法获得上述确切的商品。使用自定义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>

40
感谢您展示有效的搜索栏样式更改示例XD。(互联网上没有很多)。
Helin Wang

Answers:


297

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

自定义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源代码复制所需的drawable,我从此链接中获取

最好为每个hdpi,mdpi和xhdpi复制这些可绘制对象。例如,我仅使用mdpi:

然后使用Photoshop将颜色从蓝色更改为红色:

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

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

结果:

在此处输入图片说明


安德鲁,谢谢您的出色回答。我对此有疑问。当使用red_scrubber_control可绘制的拇指时,我遇到了崩溃。如果选择器中的所有可绘制对象都相同,则可以正常工作,但是如果更改其中一个,则会有Resources$NotFoundException: File .../red_scrubber_control.xml from drawaable resource ID...任何想法吗?
karl

2
哎呀 原来,这与stackoverflow.com/questions/6669296/…有关。我尝试添加的新图像意外地是37MB而不是2KB ...
karl 2013年

无论如何,可以@dimen根据屏幕设置拇指的大小吗?
2013年

1
@ SiKni8您可以基于values文件夹的normal,large,xlarge,sw或w参数为不同的屏幕尺寸定义不同的尺寸。然后,只需在布局,样式或主题中使用此尺寸即可。检查此链接
andrew

1
感谢您链接到Android Holo Colors Generator。这很有帮助。

66

我的答案灵感来自AndrasBalázsLajtha的答案,它允许不使用xml文件而工作

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

进度对话框的颜色已更改,但大拇指的颜色没有..为什么?
Yonatan Nir

7
如果您不需要在代码中执行此操作,并且不想创建图层列表和可绘制对象等,也可以在seekbar的xml中执行此操作 android:progressTint="@color/my_color" android:thumbTint="@color/another_color"
Daveloper87

59

如果您想要完全相同的条形但用红色表示,则可以以编程方式添加PorterDuff滤色器。您可以通过ProgressBar基类的方法获取要着色的每个可绘制对象。然后为其设置彩色滤光片

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

如果无法通过Porter Duff滤镜进行所需的色彩调整,则可以指定自己的滤色器


3
不确定自哪个SDK开始使用21,但是如果您想使同一图标具有不同的颜色,只需在colors.xml中添加“ colorAccent”颜色,它将使用它
tibbi,2016年

57

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:colorControlActivated">#c51162</item>
</style>

seekbar自定义材质样式


2
Android> 21的绝佳解决方案
saltandpepper

4
您确定这colorControlActivated是拇指的正确参数吗?应该是thumbTint
Peter Knut

API 21以下的解决方案是什么?
Faisal Shaikh

42

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

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>

1
如何使用搜索栏中的文件?
mungaih pk

@RahulRastogi您是如何使用这些文件的?有点傻,这个答案如此流行,其工作原理的解释为0 ...
Selali Adob​​or

1
@AssortedTrailmix我很久以前做了。尝试设置以下属性:android:thumb =“ @ drawable / thumb”,并在android:progressDrawable属性中设置上述图层列表可绘制文件。您可以尝试:mindfiremobile.wordpress.com/2014/05/20/...
拉胡尔Rastogi

37

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


7
progressTint也是如此。
afollestad 2015年

1
色调列表从API 21开始适用于Android上的每个UI元素,这就是colorAccent的应用方式。
afollestad 2015年

16

所有这些答案均已弃用。

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

为什么不推荐使用?
CoolMind

因为图书馆发生了变化
Giannis Mpountouridis

您可以看到@Ahamadullah Saikat的答案(stackoverflow.com/a/50074961/2914140)或lvguowei.me/post/customize-android-seekbar-color。他们甚至不为旧的API使用库也不设置SeekBar颜色。
CoolMind

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"

10

输出:

在此处输入图片说明

在布局文件中:

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

不知道存在AppCompat Seekbar
Pierre


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

工作原理与选择的答案相同。无需制作任何可绘制的文件。(仅适用于IN 5.0)


5

默认情况下,Android会将滑块的进度颜色与

`<item name="colorAccent">`

值在您的styles.xml中。然后,要设置自定义滑块缩略图,只需在SeekBar xml布局的代码块中使用以下代码:

android:thumb="@drawable/slider"

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

4

对于<21(且> = 21)的API,您可以使用@Ahamadullah Saikathttps://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>

3

如果您使用的是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>

2

我改变 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高度。


2

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

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

1

如果您查看Android资源,则搜索栏实际上会使用图像。

您必须制作一个可绘制的对象,该对象在顶部和底部都是透明的,例如10px,并且中心5px线可见。

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

在此处输入图片说明


你能建议一些相同的帖子吗?
suresh cheemalamudi

其中一个良好的联系,我发现- mokasocial.com/2011/02/...
萨加尔Waghmare

Sunday G Akinsete的解决方案有效,无需使用NinePatch
Helin Wang

0

对于使用数据绑定的用户:

  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。进度色调可以用相同的方式配置。

注意:此方法也可与棒棒糖之前的设备兼容。


0

对@ 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实际上为“拇指”上色


0

检查本教程非常好

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>

0

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

<!-- 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+设备(包括Samsung)(除了android:seekBarStyle都需要应用seekBarStyle;不知道为什么,但我亲眼看到了这个问题),将Theme seekbar样式设置为蓝色。如果您希望所有的搜索栏都保留主题样式,并且仅将绿色的搜索栏样式应用于一些小部件,则将以下内容添加到所需的小部件中:

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

0

在材料零部件库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>

官方文档指出它仍在计划中。还有其他选择吗?
tejaspatel

@tejaspatel答案中包含官方组件的链接。第一个版本现已在1.2.0-alpha01中发布。
加布里埃尔·马里奥蒂

-1

您也可以这样:

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

希望对您有所帮助!


1
我不认为你可以使用颜色它在寻找可提拉
兰斯洛特
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.