Android - 造型搜索栏

Question

Android - 造型搜索栏

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

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

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

我尝试构建自定义的一个，但我无法得到如上所示的确切的一个。使用自定义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>

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>

Answer 1

我将从Android源代码中提取drawables和xml并将其颜色更改为红色。以下是我为mdpi drawables完成此操作的示例：自定义red_scrubber_control.xml（添加到res / drawable）：<selector&nbsp;xmlns:android="http://schemas.android.com/apk/res/android"> &nbsp;&nbsp;&nbsp;&nbsp;<item&nbsp;android:drawable="@drawable/red_scrubber_control_disabled_holo"&nbsp;android:state_enabled="false"/> &nbsp;&nbsp;&nbsp;&nbsp;<item&nbsp;android:drawable="@drawable/red_scrubber_control_pressed_holo"&nbsp;android:state_pressed="true"/> &nbsp;&nbsp;&nbsp;&nbsp;<item&nbsp;android:drawable="@drawable/red_scrubber_control_focused_holo"&nbsp;android:state_selected="true"/> &nbsp;&nbsp;&nbsp;&nbsp;<item&nbsp;android:drawable="@drawable/red_scrubber_control_normal_holo"/></selector>自定义：&nbsp;red_scrubber_progress.xml<layer-list&nbsp;xmlns:android="http://schemas.android.com/apk/res/android"&nbsp;> &nbsp;&nbsp;&nbsp;&nbsp;<item &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;android:id="@android:id/background" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;android:drawable="@drawable/red_scrubber_track_holo_light"/> &nbsp;&nbsp;&nbsp;&nbsp;<item&nbsp;android:id="@android:id/secondaryProgress"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<scale &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;android:drawable="@drawable/red_scrubber_secondary_holo" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;android:scaleWidth="100%"&nbsp;/> &nbsp;&nbsp;&nbsp;&nbsp;</item> &nbsp;&nbsp;&nbsp;&nbsp;<item&nbsp;android:id="@android:id/progress"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<scale &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;android:drawable="@drawable/red_scrubber_primary_holo" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;android:scaleWidth="100%"&nbsp;/> &nbsp;&nbsp;&nbsp;&nbsp;</item></layer-list>然后从Android源代码中复制所需的drawables，我从这个链接中获取最好为每个hdpi，mdpi，xhdpi复制这些drawable。例如，我只使用mdpi：然后使用Photoshop将颜色从蓝色变为红色：red_scrubber_control_disabled_holo.png：&nbsp;red_scrubber_control_focused_holo.png：&nbsp;red_scrubber_control_normal_holo.png：&nbsp;red_scrubber_control_pressed_holo.png：red_scrubber_primary_holo.9.png：&nbsp;red_scrubber_secondary_holo.9.png：&nbsp;red_scrubber_track_holo_light.9.png：&nbsp;将SeekBar添加到布局：<SeekBar &nbsp;&nbsp;&nbsp;&nbsp;android:id="@+id/seekBar1" &nbsp;&nbsp;&nbsp;&nbsp;android:layout_width="match_parent" &nbsp;&nbsp;&nbsp;&nbsp;android:layout_height="wrap_content" &nbsp;&nbsp;&nbsp;&nbsp;android:progressDrawable="@drawable/red_scrubber_progress" &nbsp;&nbsp;&nbsp;&nbsp;android:thumb="@drawable/red_scrubber_control"&nbsp;/>