[Solved] Color of ActivityIndicator within drawer is set for all ActivityIndicators ouside the drawer (Android 4)

[Marc]

Hi,

in our app, we have have an ActivityIndicator within our RadSideDrawer component and we noticed, that the color for this ActivityIndicator affects all other ActivityIndicators in our app as well.

Note: this happens only on Android 4.X (we tested Android 4.2.2 and 4.4.2). On Android 5, 6 and 7, the color of each ActivityIndicator is set properly.

 

You should be able to reproduce this behaviour with the wollowing sample code:

<!-- main-page.xml -->

<Page xmlns:drawer="nativescript-telerik-ui-pro/sidedrawer" navigatedTo="pageMainNavigated">
    <ActionBar>
        <NavigationButton icon="res://drawericon" tap="toggleDrawer" />
    </ActionBar>
    <drawer:RadSideDrawer id="mySideDrawer">
        <drawer:RadSideDrawer.mainContent>
            <StackLayout>
                <ActivityIndicator color="blue" busy="true" visibility="visible"/>
            </StackLayout>
        </drawer:RadSideDrawer.mainContent>
        <drawer:RadSideDrawer.drawerContent>
            <StackLayout backgroundColor="#124a59">
                <ActivityIndicator color="red" busy="true" visibility="visible"/>
            </StackLayout>
        </drawer:RadSideDrawer.drawerContent>
    </drawer:RadSideDrawer>
</Page>

 

<!-- main-page.js -->

var drawerModule = require("nativescript-telerik-ui-pro/sidedrawer");
var mySideDrawer;
var page;

exports.pageMainNavigated = function(args) {
    page = args.object;

    mySideDrawer= page.getViewById('mySideDrawer');
    mySideDrawer.setDrawerLocation(drawerModule.SideDrawerLocation.Left);
};

exports.toggleDrawer = function() {
    mySideDrawer.toggleDrawerState();
};

 

We tested on NativeScript 2.3.0 and 2.4.1.

Please tell me, if this can be fixed or if there is any workaround for this.

 

Best regards

[Nick Iliev]

Hello Marc Geller,

We have researched the described case and it seems that this is caused by the design in Android API 19.
The thing is that for Android API levels below 20 the ProgresBar (which is the native module that stands behind ActivityIndicator in NativeScript) is setting its primary color via the globally set accentColor in the resources for example like this

• Extend your default theme and override colorAccent

  <style name="AppTheme.WhiteAccent"> <item name="colorAccent">@color/white</item> <!-- Whatever color you want--> </style>

• And in ProgressBar adds the android:theme attribute:

  android:theme="@style/AppTheme.WhiteAccent"

However, this approach is limiting the native developers and the NativeScript ones as well because you have to modify each XML file where there is a Progressbar included (which is not possible for nativeScript where the app theme is set in AndroidManifest.xml). You can change programmatically the  color of your Progressbar but it will also change the color of all your other Progressbar as well. So this is the reason you are observing the same behavior in NativeScript as well. For details ,you can follow this discussion where most of the solutions are applicable only for API21+ or via the app theme.

With API21+ Android has changed their API for Progressbar so they can be styled separately which is also implemented in NativeScript.

Regards,
Nikolay Iliev
Telerik by Progress