CODEWITHSUNDEEP
androidandroid-layoutmaterial-components-androidandroid-seekbarandroid-slider
YosiFZ
YosiFZ

Reputation: 7900

Android change seekbar color

I have this SeekBar in my app:

<SeekBar
        android:id="@+id/volume_seek_bar"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:theme="@style/Volume_Seekbar" />

And this is the style file:

<resources>

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/toolbar_background</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

<style name="ProgressBarStyle">
    <item name="colorAccent">@color/colorPrimary</item>
</style>

<style name="Volume_Seekbar">
    <item name="colorPrimary">@color/app_blue</item>
    <item name="colorPrimaryDark">@color/toolbar_background</item>
    <item name="colorAccent">@color/app_blue</item>
</style>

I want to use the style to change the color of the SeekBar but it keeps taking the color definition from the AppTheme style. Any idea what is the problem?

Upvotes: 2

Views: 503

Answers (1)

Gabriele Mariotti
Gabriele Mariotti

Reputation: 364730

With a SeekBar you can use:

   <SeekBar
        android:theme="@style/MySeekBar"
        />

with:

<style name="MySeekBar">
    <item name="android:progressBackgroundTint">@color/....</item>
    <item name="android:progressTint">@color/...</item>
    <item name="android:colorControlActivated">@color/....</item>
</style>

enter image description here enter image description here

Now you can also use the new Slider components provided by the Material Components Library:

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

enter image description here

Note: Slider requires the version 1.2.0 of the Material Components.

Upvotes: 2

Related Questions