3

I have an app with Ionic 3 and in your app.component.ts, i using the Statusbar ionic plugin to hide that, but, this occurs only after platform ready is fired.

How do i hide that during splashscreen? I tried:

– Not hide during splashscreen, only after this hide – Not change background color during splashscreen

Solutions?

Stenio Anibal
  • 53
  • 2
  • 9

3 Answers3

6

Android

It seems that there is not elegant way to hide statusbar on app launch. But there is an way to do that.

  1. Find MainActivity.java (maybe platforms/android/src/io/ionic/starter)
  2. Add the below code

import android.view.WindowManager;

public class MainActivity extends CordovaActivity
{
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);

        // enable Cordova apps to be started in the background
        Bundle extras = getIntent().getExtras();
        if (extras != null && extras.getBoolean("cdvStartInBackground", false)) {
            moveTaskToBack(true);
        }
        // [Hyuck] add this two line below    
        getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);
        getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);

        // Set by <content src="index.html" /> in config.xml
        loadUrl(launchUrl);
    }

    // [Hyuck] onStart() is totally new.
    @Override
    public void onStart()
    {
        super.onStart();
        getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
        getWindow().addFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);
    }
}

IOS

I can only test Android device. So, I just leave the link which may solve your issue

Hyuck Kang
  • 1,671
  • 2
  • 16
  • 24
  • Thanks Hyuck! I search during most days for that, but, i wont finded a beautifully solution. Your android solution solve's the problem, but, the platform is not included in git. In this case, the changes in android file should be maked in all time if the platform is added or removed. In Cordova Documentation, the preference "Fullscreen" make a promise to this work, but, in most android devices, this option hide the native navigation bar (bottom of the screen). This Cordova solution is a perfect illusion. Again, thanks for your reply, this confirms my sad suspect. – Stenio Anibal Jun 22 '18 at 14:21
  • Yes, sometimes cordova plugins(this or inappbrowser and so on) does not have enough functions which we need. Anyway, you can consider **gulp** to make script which modifies your code automatically(still but less annoying). It is what I really used to deal with. – Hyuck Kang Jun 22 '18 at 14:44
  • In my case I want to hide the Status Bar too, but all time, not only during the app launch (splashscreen). Your solution works for me too at app launch. But if you quit the app for a while (e.g: turning off your device screen) then when you come back the Status Bar is visible again. And no way to hide it with StatusBar.hide(). Any ideas? Could we add a function onResume() to the MainActivity.java file doing the same job than your function onStart() ? Thanks! – Faks Sep 23 '19 at 16:48
0

After addition of your code in MainActivity page I run the command to build apk I got this error

 Task :app:compileDebugJavaWithJavac FAILED
E:\Ionic\AIOU_Solutions1\platforms\android\app\src\main\java\io\ionic\starter\MainActivity.java:38: error: package WindowManager does not exist
        getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);
Ahmad Saeed
  • 163
  • 1
  • 1
  • 11
0

I got the same problem with a Cordova based app. I couldn't figure out how to hide the status bar during the Splashcreen (tried many things) until I found this solution.

Hide status bar during splashcreen

Option 1 - Edit files yourself

  • Find the file platforms/android/app/src/main/res/values/strings.xml

  • Add a custom theme with specific rules by editing the XML

     <?xml version='1.0' encoding='utf-8'?>
 <resources>
     <string name="app_name">My App Name</string>
     <string name="launcher_name">@string/app_name</string>
     <string name="activity_name">@string/launcher_name</string>

     <!-- Add your custom theme rules -->
     <style name="MyCustomTheme" parent="@style/Theme.AppCompat.NoActionBar">
         <item name="android:windowActionBar">false</item>
         <item name="android:windowNoTitle">true</item>
     </style>
 </resources>

  • Find the file platforms/android/app/src/main/AndroidManifest.xml

  • Find the <activity> tag and add the reference to "MyCustomTheme"

     <activity android:theme="@style/MyCustomTheme" ...etc...

Option 2 - Edit files from the Cordova config.xml

  • You may prefer to manage this custom theme directly from your config.xml file without having to edit yourself the AndroidManifest.xml and strings.xml. It can be helpful in case of cordova platform remove android and cordova platform add android which will delete your changes.

  • Add this in your config.xml

      <platform name="android">

      <!-- Edit the activity tag fo your AndroidManifest.xml -->
      <edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application/activity">
          <activity android:theme="@style/MyCustomTheme"/>
      </edit-config>

      <!-- Edit the strings.xml file -->
      <edit-config file="strings.xml" mode="add" target="/resources">
          <style name="MyCustomTheme" parent="@style/Theme.AppCompat.NoActionBar">
              <item name="android:windowActionBar">false</item>
              <item name="android:windowNoTitle">true</item>
          </style>
      </edit-config>

  </platform>

  • Last step, remember that for being able of using <edit-config> tag from your config.xml file, you need to add this xmlns attribute to your <widget> tag.

      <?xml version='1.0' encoding='utf-8'?>
  <widget xmlns:android="http://schemas.android.com/apk/res/android" ...etc...

If you have better options, I'm curious to heard about it!

Faks
  • 416
  • 5
  • 20