Android – 造型寻求酒吧
我想devise一个看起来像下图所示的search栏。
通过使用默认的seekbar我会得到这样的事情：
所以我需要的只是改变颜色。 我不需要额外的风格。 有没有任何直接的方法来做到这一点，或者我应该build立我的自定义drawable。
我试图build立自定义的，但我无法得到如上所示的确切的一个。 使用自定义drawable后，我得到如下所示：
如果我需要build立自定义的，那么请build议如何减less进度线的宽度和形状。
我的自定义实现：
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>
search条：
<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>
我会从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源代码复制需要的绘图，我从这个链接
为每个hdpi，mdpi，xhdpi复制这些drawable是很好的。 例如，我只使用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" />
结果：
编辑：
这里有很好的资源Android Holo颜色生成器 ，这将有助于更快地创build不同颜色的元素。 只要select颜色和元素，它将创build所需的绘制xhdpi，hdpi和mdpi。
如果你想要完全相同的条形，但红色，你可以编程添加一个PorterDuff彩色滤镜。 您可以通过ProgressBar基类的方法获取要着色的每个drawable。 然后为它设置一个颜色filter 。
mySeekBar.getProgressDrawable().setColorFilter(new PorterDuffColorFilter(srcColor, PorterDuff.Mode.MULTIPLY));
如果所需的颜色调整不能通过Porter Dufffilter进行，您可以指定自己的颜色filter 。
我的答案是从安德拉斯BalázsLajtha回答它允许工作没有XML文件的启发
seekBar.getProgressDrawable().setColorFilter(Color.RED, PorterDuff.Mode.SRC_IN); seekBar.getThumb().setColorFilter(Color.RED, PorterDuff.Mode.SRC_IN);
只需用颜色replace颜色分类
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>
Google已经使SDK 21中的这个更容易了。现在我们有了设置拇指色彩的方法
android:thumbTint android:thumbTintMode
http://developer.android.com/reference/android/widget/AbsSeekBar.html#attr_android:thumbTint http://developer.android.com/reference/android/widget/AbsSeekBar.html#attr_android:thumbTintMode
如上所述（@andrew），创build自定义SeekBar是超级简单与这个网站 – http://android-holo-colors.com/
只需启用SeekBar，select颜色，并接收所有资源并复制到项目。 然后在xml中应用它们，例如：
android:thumb="@drawable/apptheme_scrubber_control_selector_holo_light" android:progressDrawable="@drawable/apptheme_scrubber_progress_horizontal_holo_light"
刚刚设置
机器人：maxHeight = “3DP”
机器人：=了minHeight “3DP”
就这样。
默认情况下，android会将滑块的进度颜色与之匹配
`<item name="colorAccent">`
值在你的styles.xml中 。 然后，要设置自定义滑块缩略图，只需在SeekBar xml布局的代码块中使用以下代码：
android:thumb="@drawable/slider"
<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" />
作品就像select的答案一样。 没有必要做任何可绘制的文件或其他（只有IN 5.0）问候
如果你使用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>
我改变了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高度。
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);
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>
如果您查看Android资源，search栏实际上使用图像。
你必须做一个可绘制的顶部和底部是透明的，比如10px，中间的5px行是可见的。
请参阅附件图像。 你需要把它转换成NinePatch。
简单的方法来改变search栏的颜色…
<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);
对于那些使用数据绑定的人：
-
将以下静态方法添加到任何类
@BindingAdapter("app:thumbTintCompat") public static void setThumbTint(SeekBar seekBar, @ColorInt int color) { seekBar.getThumb().setColorFilter(color, PorterDuff.Mode.SRC_IN); } -
将
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 。 进度色调可以用相同的方法configuration。
注意：这种方法也适用于棒棒糖的预装置。
你也可以这样做：
<SeekBar android:id="@+id/redSeekBar" android:layout_width="match_parent" android:layout_height="wrap_content" android:progressDrawable="@color/red" android:maxHeight="3dip"/>
希望它会帮助！
