Android的 - 造型搜索栏造型、Android

2023-09-11 12:32:10 作者:一只小仙女下凡了

我想风格搜索栏,看起来像一个下面的图片。

通过使用默认的搜索栏,我会得到这样的:

所以,我需要的是只改变颜色。我不需要额外的样式。有没有简单的方法来做到这一点,或者我应该构建我的自定义绘制?

我试图构建自定义的,但我无法得到如上图所示的确切之一。 使用自定义绘制后,我得到的是如下图所示:

如果我需要建立自定义的,那么请建议如何减少进度线的宽度和也的形状。

我的自定义实现:

background_fill.xml:

 < XML版本=1.0编码=UTF-8&GT?;
<形状的xmlns:机器人=htt​​p://schemas.android.com/apk/res/android>

    <梯度
        机器人:角=90
        机器人:centerColor =#FF555555
        机器人:endColor =#FF555555
        机器人:startColor =#FF555555/>

    <边角机器人:半径=1DP/>

    <中风
        机器人:宽=1DP
        机器人:颜色=#50999999/>
    <中风
        机器人:宽=1DP
        机器人:颜色=#70555555/>

< /形状>
 

progess_fill.xml

 < XML版本=1.0编码=UTF-8&GT?;
<形状的xmlns:机器人=htt​​p://schemas.android.com/apk/res/android>

    <梯度
        机器人:角=90
        机器人:centerColor =#FFB80000
        机器人:endColor =#FFFF4400
        机器人:startColor =#FF470000/>

    <边角机器人:半径=1DP/>

    <中风
        机器人:宽=1DP
        机器人:颜色=#50999999/>
    <中风
        机器人:宽=1DP
        机器人:颜色=#70555555/>

< /形状>
 
搜索引擎专家告诉你一个真实的Android

progress.xml

 < XML版本=1.0编码=UTF-8&GT?;
<层列表的xmlns:机器人=htt​​p://schemas.android.com/apk/res/android>

    <项目
        机器人:ID =@机器人:ID /背景
        机器人:可绘制=@可绘制/ background_fill/>
    <项目机器人:ID =@机器人:ID /进步>
        <剪辑机器人:可绘制=@可绘制/ progress_fill/>
    < /项目>

< /层列表>
 

thumb.xml

 < XML版本=1.0编码=UTF-8&GT?;
<形状的xmlns:机器人=htt​​p://schemas.android.com/apk/res/android
    机器人:形状=椭圆形>

    <梯度
        机器人:角=270
        机器人:endColor =#E5492A
        机器人:startColor =#E5492A/>

    <大小
        机器人:身高=20dp
        机器人:宽=20dp/>

< /形状>
 

搜索栏:

 <搜索栏
        机器人:ID =@ + ID / seekBarDistance
        机器人:layout_width =match_parent
        机器人:layout_height =WRAP_CONTENT
        机器人:layout_alignParentLeft =真
        机器人:layout_alignParentTop =真
        机器人:layout_marginTop =88dp
        机器人:progressDrawable =@可绘制/进步
        机器人:拇指=@可绘制/拇指>
    < /搜索栏>
 

解决方案

我会提取可绘制和XML从Android源$ C ​​$ C,并改变其颜色为红色。 下面是例子,我是如何完成这为MDPI可绘:

自定义 red_scrubber_control.xml (添加到RES /绘制):

 <选择的xmlns:机器人=htt​​p://schemas.android.com/apk/res/android>

    <项目机器人:可绘制=@可绘制/ red_scrubber_control_disabled_holo机器人:state_enabled =FALSE/>
    <项目机器人:可绘制=@可绘制/ red_scrubber_control_ pressed_holo安卓STATE_ pressed =真/>
    <项目机器人:可绘制=@可绘制/ red_scrubber_control_focused_holo机器人:state_selected =真/>
    <项目机器人:可绘制=@可绘制/ red_scrubber_control_normal_holo/>
< /选择器>
 

自定义: red_scrubber_progress.xml

 <层列表的xmlns:机器人=htt​​p://schemas.android.com/apk/res/android>

    <项目
        机器人:ID =@机器人:ID /背景
        机器人:可绘制=@可绘制/ red_scrubber_track_holo_light/>
    <项目机器人:ID =@机器人:ID / secondaryProgress>
        <规模
            机器人:可绘制=@可绘制/ red_scrubber_secondary_holo
            机器人:scaleWidth =100%/>
    < /项目>
    <项目机器人:ID =@机器人:ID /进步>
        <规模
            机器人:可绘制=@可绘制/ red_scrubber_primary_holo
            机器人:scaleWidth =100%/>
    < /项目>

< /层列表>
 

从Android源$ C ​​$ C然后复制所需的可绘,我把from此链接

这是好事,复制这些可绘制每个华电国际,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:

添加搜索栏布局:

 <搜索栏
    机器人:ID =@ + ID / seekBar1
    机器人:layout_width =match_parent
    机器人:layout_height =WRAP_CONTENT
    机器人:progressDrawable =@可绘制/ red_scrubber_progress
    机器人:拇指=@可绘制/ red_scrubber_control/>
 

结果:

编辑:

下面是很好的资源 Android的全息颜色生成器,这将有助于更快地创建具有不同颜色的元素。只要选择颜色和元素,它会创造xhdpi,华电国际和MDPI所需的绘制。

I wanted to style a seek bar which looks like the one in the image below.

By using default seekbar i will get something like this:

So what i need is to only change the color. I need no extra styles. Is there any straight forward approach to do this or should i build my custom drawable.?

I tried building custom one, but i could not get the exact one as shown above. After using custom drawable, what i get is as shown below:

If i need to build the custom one, then please suggest how to reduce the width of the progress line and also the shape.

my custom implementation:

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:

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

解决方案

I would extract drawables and xml from Android source code and change its color to red. Here is example how I completed this for mdpi drawables:

Custom red_scrubber_control.xml (add to 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>

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

Then copy required drawables from Android source code, I took from this link

It is good to copy these drawables for each hdpi, mdpi, xhdpi. For example I use only mdpi:

Then using Photoshop change color from blue to red:

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:

Add SeekBar to layout:

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

Result:

Edited:

Here is nice resource Android Holo Colors Generator that will help to create elements with different colors much faster. Just select color and element and it will create required drawable for xhdpi, hdpi and mdpi.