题 Android - 造型搜索栏


我想设计一个看起来像下图中的搜索条。

enter image description here

通过使用默认搜索条,我将得到这样的东西:

enter image description here

所以我需要的是只改变颜色。我不需要额外的款式。有没有直接的方法来做这个或我应该建立我的自定义drawable。?

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

enter image description here

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

我的自定义实现:

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>

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

189
2018-04-23 07:16


起源


感谢您展示了一个有效的搜索栏样式更改示例XD。 (互联网上不多)。 - Helin Wang


答案:


我会从Android源代码中提取drawables和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,我拿了 从这个链接

最好为每个hdpi,mdpi,xhdpi复制这些drawable。例如,我只使用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" />

结果:

enter image description here


277
2018-04-23 09:15



安德鲁,谢谢你的回答。我遇到了这个问题。使用时 red_scrubber_control 为拇指画画,我遇到了崩溃。如果选择器中的所有drawable都相同,它工作正常,但如果我更改其中一个,我得到一个 Resources$NotFoundException: File .../red_scrubber_control.xml from drawaable resource ID... 有什么想法吗? - karl
哎呦。原来它与之相关 stackoverflow.com/questions/6669296/...。我试图添加的新图像是意外的37MB而不是2KB ...... - karl
无论如何都要使用 @dimen 根据屏幕设置拇指的大小? - Si8
@ SiKni8您可以根据values文件夹的normal,large,xlarge,sw或w参数为不同的屏幕大小定义不同的维度。然后在您的布局,样式或主题中使用此维度。检查一下 链接 - andrew
感谢您提供Android Holo颜色生成器的链接。这非常有帮助。 - Trees


如果您想要完全相同的条形但是红色,则可以以编程方式添加PorterDuff颜色过滤器。你可以通过方法得到你想要着色的每个drawable 进度条 基类。然后设置一个 彩色滤光片 为了它。

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

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


53
2017-08-24 05:26



这有效,但使用 PorterDuff.Mode.SRC_IN。 - Chris.Jenkins
不知道哪个SDK,原来21,但如果你想要相同的图标只是不同的颜色,只需在colors.xml中添加“colorAccent”颜色,它将使用它 - tibbi


我的答案来自AndrasBalázsLahtha回答 它允许在没有xml文件的情况下工作

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

49
2017-12-09 17:55



@ fred.Thanks很好的解决方案 - iCoders
和我一起工作,谢谢 - AbdulMomen عبدالمؤمن
进度对话框颜色已更改但拇指颜色没有..为什么? - Yonatan Nir
如果您不需要在代码中执行此操作并且不想创建图层列表和drawable等,您也可以在搜索栏的xml中执行此操作 android:progressTint="@color/my_color" android:thumbTint="@color/another_color" - Daveloper87
适合我! - NezSpencer


只需用颜色替换颜色分布即可

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>

37
2017-11-20 09:01



在我的棒棒糖上工作...... :) - Rahul Rastogi
运作良好,最简单。 - Spark.Bao
性感的工作伙伴! - User3
如何在搜索栏中使用这些文件? - mungaih pk
@AssortedTrailmix我很久以前做过。尝试设置如下属性:android:thumb =“@ drawable / thumb”并在android:progressDrawable属性中设置上面提到的图层列表可绘制文件。你可以尝试: mindfiremobile.wordpress.com/2014/05/20/... - Rahul Rastogi


谷歌已经在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


28
2017-12-02 20:54



progressTint也是。 - afollestad
从API 21开始,色调列表适用于Android上的每个UI元素,它是如何应用colorAccent的。 - afollestad


Android搜索栏自定义材质样式,用于其他搜索栏自定义 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 custom material style


15
2017-09-25 13:15



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


如上所述(@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
2018-04-25 01:43



网站真的不错,谢谢! - Palejandro
这是最简单,最好的方法 - FaisalAhmed
目前该网站不起作用。 - sVd


刚设置

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

就这样


10
2017-09-05 09:37



解决了它对我来说 - saltandpepper


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

与所选答案相同。无需制作任何可绘制的文件。(仅限5.0) 问候


7
2017-12-19 11:30





默认情况下,android会将滑块的进度颜色与之匹配

`<item name="colorAccent">`

在你的价值 styles.xml。然后,要设置自定义滑块拇指图像,只需在您的。中使用此代码 搜索栏 xml布局的块:

android:thumb="@drawable/slider"

5
2017-09-28 16:54





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

3
2017-10-24 14:38