React-native-slider: Android: Tint color inconsistency

Created on 20 Jun 2019  路  3Comments  路  Source: callstack/react-native-slider

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)' }
bug report author feedback

Most helpful comment

I think the problem is that the 鈥減rogress 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>

All 3 comments

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

I think the problem is that the 鈥減rogress 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>

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

Was this page helpful?
0 / 5 - 0 ratings

Related issues

HITESH122 picture HITESH122  路  8Comments

kimsean picture kimsean  路  9Comments

Vednus picture Vednus  路  9Comments

cinder92 picture cinder92  路  4Comments

canyavall picture canyavall  路  5Comments