'How to change the StatusBar color of the splash screen?

I'm using React Native for building my android application and I've followed this tutorial to set up my splash screen. Here is the result. My main problem is that the status bar color changes to black, I can't solve this by having <item name="colorPrimaryDark">@color/colorPrimaryDark</item> in my styles.xml file, and <color name="blue">#009CD7</color>, <color name="colorPrimaryDark">#009CD7</color> in my colors.xml file.

Bonus question: how to center the image without hardcoding a margin so that it stays in the center regardless of the device the app is running on?

Solution 1:^[1]

Add colorPrimaryDark one more item in your current splash theme or create a new one.

<style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:statusBarColor">@android:color/white</item>
    <item name="android:windowLightStatusBar">true</item>
    <item name="android:background">@drawable/background_splash</item>
    <item name="colorPrimaryDark">@android:color/white</item>
</style>

Then use it as a second parameter while showing SplashScreen.

public class MainActivity extends ReactActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this, R.style.SplashTheme);
        super.onCreate(savedInstanceState);
    }
}

Solution 2:^[2]

If you see an error something like that -> "int can not be boolean" Just add third parameter to MainActivity.java

SplashScreen.show(this, R.style.SplashTheme, true);

Solution 3:^[3]

Create a style definition for this in android/app/src/main/res/values/styles.xml:

<?xml version="1.0" encoding="utf-8"?>
    <resources>
         <style name="SplashTheme" parent="SplashScreen_SplashTheme">
             <item name="colorPrimaryDark">your_color</item>
         </style>
   </resources>

now you have change show method to include your custom style:

SplashScreen.show(this, R.style.SplashTheme);

you are donw now :)

Solution 4:^[4]

If you wanna change the TaskBar color, just add the activity and the color that you desire in the output function.

fun setTaskBarColored(colored: Int,activity: Activity) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            activity.window!!.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS)
            activity.window!!.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS)
            activity.window!!.statusBarColor = ContextCompat.getColor(activity, colored)
        }
    }

And also the same applies for the NavigationBar

    fun setNavigationBarColored(colored: Int, activity: Activity){
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            activity.window!!.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS)
            activity.window!!.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS)
            activity.window!!.navigationBarColor =  ContextCompat.getColor(activity, colored)
        }
    }

Solution 5:^[5]

You can simply add this JSX code to the root of your app instead of editing any native files.

<StatusBar backgroundColor="blue" barStyle="light-content" />

Also in order to center your image, wrap it with a view and add the styling “{justifyContent: ‘center’, alignItems: ‘center’}”. If that doesn’t work then add this style directly to your image component “alignSelf: ‘center’”

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Shahab Rauf
Solution 2	feyyum
Solution 3	Sanjay
Solution 4	Luis Cardoza Bird
Solution 5	Edison D'souza

'How to change the StatusBar color of the splash screen?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]