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>
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:
<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>
This question is related to
android
android-seekbar
custom-selectors
android-slider
For those who use Data Binding:
Add the following static method to any class
@BindingAdapter("app:thumbTintCompat")
public static void setThumbTint(SeekBar seekBar, @ColorInt int color) {
seekBar.getThumb().setColorFilter(color, PorterDuff.Mode.SRC_IN);
}
Add app:thumbTintCompat
attribute to your 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}"
/>
That's it. Now you can use app:thumbTintCompat
with any SeekBar
. The progress tint can be configured in the same way.
Note: this method is also compatble with pre-lollipop devices.
By default, android will match the progress color of your slider to
`<item name="colorAccent">`
value in your styles.xml. Then, to set a custom slider thumb image, just use this code in your SeekBar xml layout's block:
android:thumb="@drawable/slider"
With the Material Component Library version 1.2.0 you can use the new Slider
component.
<com.google.android.material.slider.Slider
android:valueFrom="0"
android:valueTo="300"
android:value="200"
android:theme="@style/slider_red"
/>
You can override the default color using something like:
<style name="slider_red">
<item name="colorPrimary">#......</item>
</style>
Otherwise you can use these attribute in the layout to define a color or a color selector:
<com.google.android.material.slider.Slider
app:activeTrackColor="@color/...."
app:inactiveTrackColor="@color/...."
app:thumbColor="@color/...."
/>
or you can use a custom style:
<style name="customSlider" parent="Widget.MaterialComponents.Slider">
<item name="activeTrackColor">@color/....</item>
<item name="inactiveTrackColor">@color/....</item>
<item name="thumbColor">@color/....</item>
</style>
Just replace color atributtes with your color
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>
My answer is inspired from Andras Balázs Lajtha answer it allow to work without xml file
seekBar.getProgressDrawable().setColorFilter(Color.RED, PorterDuff.Mode.SRC_IN);
seekBar.getThumb().setColorFilter(Color.RED, PorterDuff.Mode.SRC_IN);
Simple Way to change the seek bar color ...
<ProgressBar
android:id="@+id/progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:theme="@style/Progress_color"/>
Style : Progress_color
<style name="Progress_color">
<item name="colorAccent">@color/white</item> <!-- Whatever color you want-->
</style>
java class change ProgressDrawable()
seek_bar.getProgressDrawable().setColorFilter(getResources().getColor(R.color.white), PorterDuff.Mode.MULTIPLY);
Android seekbar custom material style, for other seekbar customizations 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>
As mention one above (@andrew) , creating custom SeekBar is super Easy with this site - http://android-holo-colors.com/
Just enable SeekBar there, choose color, and receive all resources and copy to project. Then apply them in xml, for example:
android:thumb="@drawable/apptheme_scrubber_control_selector_holo_light"
android:progressDrawable="@drawable/apptheme_scrubber_progress_horizontal_holo_light"
You can also make it this way :
<SeekBar
android:id="@+id/redSeekBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:progressDrawable="@color/red"
android:maxHeight="3dip"/>
Hope it will help!
Google have made this easier in SDK 21. Now we have attributes for specifying the thumb tint colors:
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
<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" />
works Like same the answer selected. no need to make any drawable file or else.(IN 5.0 only) Regards
Small correction to the answer by @arnav-rao:
to make sure that the thumb is colored properly, use:
<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>
here android:thumbTint actually colors the "thumb"
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);
If you look at the Android resources, the seek bar actually use images.
You have to make a drawable which is transparent on top and bottom for say 10px and the center 5px line is visible.
Refer attached image. You need to convert it into a NinePatch.
If you want exactly the same bar but in red, you can add a PorterDuff color filter programatically. You can get each drawable that you want to colorize through the methods of the ProgressBar base class. Then set a color filter for it.
mySeekBar.getProgressDrawable().setColorFilter(new PorterDuffColorFilter(srcColor, PorterDuff.Mode.MULTIPLY));
If the wanted color adjustment can't be made through a Porter Duff filter, you can specify your own color filter.
check this tutorial very good
https://www.lvguowei.me/post/customize-android-seekbar-color/
simple :
<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"/>
then a style file:
<?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>
For APIs < 21 (and >= 21) you can use the answer of @Ahamadullah Saikat or 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: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>
output:
Change Progress Color:
int normalColor = ContextCompat.getColor(context, R.color.normal_color);
int selectedColor = ContextCompat.getColor(context, R.color.selected_color);
Drawable normalDrawable = new ColorDrawable(normalColor);
Drawable selectedDrawable = new ColorDrawable(selectedColor);
ClipDrawable clipDrawable = new ClipDrawable(selectedDrawable, Gravity.LEFT, ClipDrawable.HORIZONTAL);
Drawable[] layers = {normalDrawable, clipDrawable, clipDrawable};
LayerDrawable seekbarDrawable = new LayerDrawable(layers);
seekBar.setProgressDrawable(seekbarDrawable);
Change Thumb Color:
int thumbColor = ContextCompat.getColor(context, R.color.thumb_color);
Drawable unwrappedDrawable = AppCompatResources.getDrawable(context, R.drawable.ic_seekbar_thumb);
assert unwrappedDrawable != null;
Drawable wrappedDrawable = DrawableCompat.wrap(unwrappedDrawable);
DrawableCompat.setTint(wrappedDrawable, thumbColor);
seekBar.setThumb(wrappedDrawable);
Just set
android:maxHeight="3dp"
android:minHeight="3dp"
That's all
All those answers are deprecated.
In 2019 it's easier to style your seekbar to your preferred color by changing your ProgressBar
to this
<SeekBar
android:id="@+id/seekBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:progressTint="#36970f"
android:thumbTint="#36970f"
/>
Styling your seekbar color programmatically try the following code
seekBar.getProgressDrawable().setColorFilter(Color.RED, PorterDuff.Mode.SRC_IN);
seekBar.getThumb().setColorFilter(Color.RED, PorterDuff.Mode.SRC_IN);
I wanted to create a style for the seekbar and then add the style to a theme so that I could have it applied to an entire theme while still allowing a substyle to override it. Here is what I did:
<!-- 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>
The above sets the Theme seekbar style to blue for all devices 21+ including Samsung (which need the seekBarStyle applied in addition to android:seekBarStyle; not sure why but I saw this issue firsthand). If you want all seekbars to keep the theme style and only apply the green seekbar style to a few widgets then add the following to the widget you want:
<SeekBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.Green"/>
I change the 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>
and the 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>
to make the background & progress 1dp
height.
If you are using default SeekBar provided by android Sdk then their is a simple way to change the color of that . just go to color.xml inside /res/values/colors.xml and change the colorAccent.
<resources>
<color name="colorPrimary">#212121</color>
<color name="colorPrimaryDark">#1e1d1d</color>
<!-- change below line -->
<color name="colorAccent">#FF4081</color>
</resources>
Source: Stackoverflow.com