Android: Tint color inconsistency

[anshul-kai]

Environment

  React Native Environment Info:
    System:
      OS: macOS 10.14.5
      CPU: (8) x64 Intel(R) Core(TM) i7-4850HQ CPU @ 2.30GHz
      Memory: 1.16 GB / 16.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 11.14.0 - ~/.nvm/versions/node/v11.14.0/bin/node
      Yarn: 1.15.2 - ~/.yarn/bin/yarn
      npm: 6.9.0 - ~/.nvm/versions/node/v11.14.0/bin/npm
      Watchman: 3.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
      Android SDK:
        API Levels: 23, 24, 25, 26, 27, 28
        Build Tools: 23.0.1, 23.0.2, 23.0.3, 24.0.0, 25.0.0, 25.0.1, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 26.0.3, 27.0.1, 27.0.2, 27.0.3, 28.0.3
        System Images: android-19 | Google APIs Intel x86 Atom, android-23 | Google APIs Intel x86 Atom, android-24 | Google APIs Intel x86 Atom, android-25 | Google Play Intel x86 Atom, android-26 | Google APIs Intel x86 Atom, android-26 | Google Play Intel x86 Atom, android-27 | Google APIs Intel x86 Atom, android-27 | Google Play Intel x86 Atom, android-28 | Google Play Intel x86 Atom
    IDEs:
      Android Studio: 3.4 AI-183.6156.11.34.5522156
      Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.8.3 => 16.8.3
      react-native: 0.59.8 => 0.59.8
    npmGlobalPackages:
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7

Description

When maximumTintColor matches minimumTintColor, Android overrides the colour setting and makes maximumTintColor lighter than minimumTintColor.

Also, something like below will be ignored as it appears that Android likes to paint a more visible shade on the minimum side.

{ minimumTrackTintColor: 'rgba(255,255,255,0.1)', maximumTrackTintColor: 'rgba(255,255,255,0.4)' }

[incandescentxxc]

(ANDROID) Same problem happens not only "when maximumTintColor matches minimumTintColor". Seems the maximumTintColor is always lighter than the original color. e.g. If you use "#000000", it's obvious that the default grey color is not overridden at all.

[Evyraad]

I think the problem is that the “progress bar" background has a layer with translucence, so we are getting wrong colors. Therefore I suggest to rewrite the Slider progress bar.

• you need to change your ./android/app/src/main/res/values/styles.xml file:

  <resources>
  <!-- Base application theme. -->
  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
      . . .
      <item name="android:seekBarStyle">@style/SeekbarStyle</item>
  </style>
  
  <style name="SeekbarStyle" parent="Widget.AppCompat.SeekBar">
      <item name="android:progressDrawable">@drawable/seekbar_style</item>
  </style>
  </resources>

• and to add a seekbar_style.xml file to ./android/app/src/main/res/drawable directory

  <?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:gravity="center_vertical|fill_horizontal"
      >
      <shape android:shape="line">
          <stroke android:width="2dp" android:color="#ffffff"/>
          <corners android:radius="2dp"/>
      </shape>
  </item>
  <item
      android:id="@android:id/progress"
      android:gravity="center_vertical|fill_horizontal">
      <clip>
          <scale android:scaleWidth="100%">
              <selector>
                  <item android:state_enabled="false"
                      android:drawable="@android:color/transparent" />
                  <item>
                      <shape android:shape="line">
                          <stroke android:width="2dp" android:color="#2ea5de" />
                          <corners android:radius="2dp"/>
                      </shape>
                  </item>
              </selector>
          </scale>
      </clip>
  </item>
  </layer-list>

[BartoszKlonowski]

@a-koka This issue is reported on the outdated version of package. Can you please check if the same issue occurs on the latest release v4.1.1?

[BartoszKlonowski]

Closing due to lack of author's feedback. Feel free to reopen if this issue still occurs.

[ThomasStubbe]

This is still the case in version 4.1.12 To get the colors equal you need to set minimum to "#BBBBBB" and maximum to "#000000" and then you get "#BBBBBB" for both:

              <Slider minimumValue={0}
                           maximumValue={10}
                           step={1}
                           minimumTrackTintColor="#BBBBBB"
                           maximumTrackTintColor="#000000" />

[BartoszKlonowski]

Thank you for checking and letting me know, @ThomasStubbe! I will reopen this obviously 👍

[artsnr1]

The issue is still there

[BartoszKlonowski]

@artsnr1 Yes, thanks for confirmation! The issue is due to how Android renders the seekbar by default on the native side, difficult to change that behavior, but I'm working on it. Thanks for the patience!

[kumailrazapeekaboo]

is this issue not resolved yet?

[kumailrazapeekaboo]

@artsnr1 Yes, thanks for confirmation! The issue is due to how Android renders the seekbar by default on the native side, difficult to change that behavior, but I'm working on it. Thanks for the patience!

not resolved yet ?

[BartoszKlonowski]

Hello @kumailrazapeekaboo! Yes, as you can see this issue is still in the Backlog. I will move it to In Progress as soon as I'll start to work on this, or when community folks open a PR, which would be very welcomed!