This is a migrated thread and some comments may be shown as answers.

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

1 Answer 26 Views
SideDrawer
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Marc
Top achievements
Rank 1
Marc asked on 07 Dec 2016, 10:55 AM

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

1 Answer, 1 is accepted

Sort by
0
Nick Iliev
Telerik team
answered on 09 Dec 2016, 07:24 AM
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
Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
Tags
SideDrawer
Asked by
Marc
Top achievements
Rank 1
Answers by
Nick Iliev
Telerik team
Share this question
or