androidandroid-layoutmaterial-components-androidandroid-seekbarandroid-slider

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?


Solution

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