Cordova splash screen change spinner color on android

Question

I found some solutions to change the color of the spinner on iOS:

How to show custom Splash Screen Spinner (i.e spinner with white color) in iOS phonegap app?

Change Color of Splash Screen Spinner in cordova-plugin-splashscreen

... and a couple of other questions more or less related, but nothing to change the color of the loading spinner of the splash screen on android. My splash screen is blue, and the spinner is azure - not really visible - and would like to change it to white.

I am using cordova-plugin-splashscreen from https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/index.html and I build my app locally using cordova build android, and managed to deploy my code on my device. But no luck with changing that spinner's color.

I think the code to edit is in platforms/android/src/org/apache/cordova/splashscreen/Splashscreen.java, when creating the ProgressBar object:

private void spinnerStart() {
    cordova.getActivity().runOnUiThread(new Runnable() {
        public void run() {
            spinnerStop();

            spinnerDialog = new ProgressDialog(webView.getContext());
            spinnerDialog.setOnCancelListener(new DialogInterface.OnCancelListener() {
                public void onCancel(DialogInterface dialog) {
                    spinnerDialog = null;
                }
            });

            spinnerDialog.setCancelable(false);
            spinnerDialog.setIndeterminate(true);

            RelativeLayout centeredLayout = new RelativeLayout(cordova.getActivity());
            centeredLayout.setGravity(Gravity.CENTER);
            centeredLayout.setLayoutParams(new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));

            /* The following line here: */
            ProgressBar progressBar = new ProgressBar(webView.getContext());
            RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
            layoutParams.addRule(RelativeLayout.CENTER_IN_PARENT, RelativeLayout.TRUE);
            progressBar.setLayoutParams(layoutParams);

            centeredLayout.addView(progressBar);

            spinnerDialog.getWindow().clearFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND);
            spinnerDialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));

            spinnerDialog.show();
            spinnerDialog.setContentView(centeredLayout);
        }
    });
}

I do not know android apps programming (although I found many examples, I am not familiar with how to build views in xml from resources files, etc... and hardly found any documentation describing how to add resources to cordova projects).

I use cordova so that I don't have to build android native apps just yet, and without that training, this part has become pretty frustrating - has anyone found a solution yet?

Answer 1

customspinner.xml

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:pivotX="50%" android:pivotY="50%" android:fromDegrees="0"
    android:toDegrees="360">
    <shape android:shape="ring" android:innerRadiusRatio="3"
        android:thicknessRatio="8" android:useLevel="false">
        <size android:width="76dip" android:height="76dip" />
        <gradient android:type="sweep" android:useLevel="false"
            android:startColor="yourcolor" 
            android:endColor="yourcolor"
            android:angle="0"
             />
    </shape>
</rotate> 

Save in drawable folder.

Then add this in your java code

progressBar.setIndeterminateDrawable(R.drawable.customspinner);
                          or
progressBar.setBackground(R.drawable.customspinner);

Answer 2

add this line in your project config.xml file .

<preference name="TopActivityIndicator" value="white"/>