locked
Black screen after splash screen RRS feed

  • Question

  • User243227 posted

    Hi,

    I have a little problem with my splash screen / app loading. When I use the following code, the graphic (background_splash) is displayed first and then the version information (SplashScreen.axml). But then a black screen appears for a short moment.

    background_splash.axml:

    <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="">
    
      <item
          android:drawable="@color/colorPrimary100"/>
    
      <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/ic_launcher"/>
      </item>
    
    </layer-list>
    

    SplashScreen.axml:

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android=""
        android.id="@+id/SplashScreen"
        android:orientation="vertical"
        android:background="@drawable/background_splash"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center">
        <TextView
            android:id="@+id/txtAppVersion"
            android:text="[APP_VERSION]"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_marginTop="200dp"
            android:textColor="#fff"
            android:textSize="14sp"
            android:background="@android:color/transparent" />
    </RelativeLayout>
    

    style.xml:

    <style name="Theme.Splash" parent="Theme.AppCompat.Light.DarkActionBar">
      <item name="windowNoTitle">true</item>
      <item name="android:background">@drawable/background_splash</item>
      <item name="colorPrimaryDark">@color/colorPrimary100</item>
    </style>
    
    <!-- Base theme applied no matter what API -->
    <style name="Theme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
      <!--If you are using revision 22.1 please use just windowNoTitle. Without android:-->
      <item name="windowNoTitle">true</item>
      <!--We will be using the toolbar so no need to show ActionBar-->
      <item name="windowActionBar">false</item>
      <!-- colorPrimary is used for the default action bar background -->
      <item name="colorPrimary">@color/colorPrimary100</item>
      <!-- colorPrimaryDark is used for the status bar -->
      <!--<item name="colorPrimaryDark">@color/colorPrimary100</item>-->
      <!-- colorAccent is used as the default value for colorControlActivated
           which is used to tint widgets -->
      <item name="colorAccent">@color/colorAccent100</item>
      <item name="android:statusBarColor">@color/statusBarColor</item>
      <item name="android:textCursorDrawable">@null</item>
      <item name="android:windowBackground">@color/windowBackground</item>
      <!-- You can also set colorControlNormal, colorControlActivated
           colorControlHighlight and colorSwitchThumbNormal. -->
      <item name="windowActionModeOverlay">true</item>
      <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    
      <item name="android:colorPressedHighlight">@android:color/transparent</item>
      <item name="android:colorLongPressedHighlight">@android:color/transparent</item>
      <item name="android:colorFocusedHighlight">@android:color/transparent</item>
      <item name="android:colorActivatedHighlight">@android:color/transparent</item>
      <item name="android:activatedBackgroundIndicator">@android:color/transparent</item>
    
      <item name="android:datePickerDialogTheme">@style/AppCompatDialogStyle</item>
    
    
      <item name="android:windowContentOverlay">@null</item>
      <!-- This disables the black preview screen -->
      <!--<item name="android:windowDisablePreview">true</item>
      <item name="android:windowBackground">@drawable/background_splash</item>-->
    </style>
    

    SplashActivity:

    [Activity(
      Label = "@string/app_name",
      Icon = "@drawable/ic_launcher",
      Theme = "@style/Theme.Splash",
      MainLauncher = true,
      NoHistory = true)]
    public class SplashActivity : AppCompatActivity
    {
      protected override void OnCreate(Bundle savedInstanceState)
      {
        base.OnCreate(savedInstanceState);
    
        SetContentView(Resource.Layout.SplashScreen);
        FindViewById<TextView>(Resource.Id.txtAppVersion).Text = $"Version {PackageManager.GetPackageInfo(PackageName, 0).VersionName}";
    
        ThreadPool.QueueUserWorkItem(o => LoadActivity());
      }
    
      void LoadActivity()
      {
        Thread.Sleep(5000);
    
        RunOnUiThread(() => StartActivity(typeof(MainActivity)));
      }
    }
    

    MainActivity:

    [Activity(
      Label = "@string/app_name",
      Icon = "@drawable/ic_launcher",
      MainLauncher = false,
      LaunchMode = LaunchMode.SingleTask,
      ScreenOrientation = ScreenOrientation.Portrait,
      ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
    public class MainActivity : FormsAppCompatActivity
    {
      protected override void OnCreate(Bundle bundle)
      {
        ToolbarResource = Resource.Layout.Toolbar;
        TabLayoutResource = Resource.Layout.Tabbar;
    
        base.OnCreate(bundle);
    
        Forms.Init(this, bundle);
        FormsMaps.Init(this, bundle);
    
        ViewModelLocator.Instance.Resolve<INavigationService>().RegisterViewModels(typeof(App).Assembly);
    
        ImageCircle.Forms.Plugin.Droid.ImageCircleRenderer.Init();
    
        CarouselViewRenderer.Init();
    
        var width = Resources.DisplayMetrics.WidthPixels;
        var height = Resources.DisplayMetrics.HeightPixels;
        var density = Resources.DisplayMetrics.Density;
    
        Utils.Device.ScreenWidth = (width - 0.5f) / density;
        Utils.Device.ScreenHeight = (height - 0.5f) / density;
    
        // CopyConfigurationFiles();
    
        LoadApplication(new App());
      }
    

    I have tested for loading the MainActivity with both Thread.Sleep as well with a timer and with Task.Run. Does anyone have an idea how I get the black screen away?

    Wednesday, October 25, 2017 7:36 PM

All replies

  • User243296 posted

    Add Theme property to activity. It should look like below:

        [Activity(Label = "someName", Icon = "@drawable/cp_icon", Theme = "@style/CoPilot.Splash", MainLauncher = true, LaunchMode = LaunchMode.SingleTop, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
        public class MainActivity : Xamarin.Forms.Platform.Android.FormsAppCompatActivity
    

    At the end of main do this to end the splash screen: Window.SetBackgroundDrawable(null); //kill the splash screen

    In Resources -> Values add the following XML file (your splash screen theme)

    <?xml version="1.0" encoding="utf-8" ?>
    <resources>
      <style name="CoPilot.Splash" parent ="Theme.AppCompat.Light.DarkActionBar">
        <item name="android:windowBackground">@drawable/splash_screen</item>
        <item name="windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
        <item name="colorPrimary">#00509E</item>
        <item name="colorPrimaryDark">#013465</item>
        <item name="android:datePickerDialogTheme">@style/AppCompatDialogStyle</item>
        <item name="android:fontFamily">sans-serif</item>
      </style>
    
      <style name="AppCompatDialogStyle" parent="Theme.AppCompat.Light.Dialog">
        <item name="colorAccent">#00509E</item>
      </style>
    </resources>
    

    I believe that is all you should need.

    Wednesday, October 25, 2017 7:52 PM
  • User243227 posted

    Thanks for your reply, but I have two activities (SplashActivity and MainActivity). I need to show some information while loading.

    After LoadApplication() I do this line Window.SetBackgroundDrawable(null); //kill the splash screen but it didn't help.

    Should I do without the SplashActivity?

    Wednesday, October 25, 2017 8:10 PM
  • User243296 posted

    Oh my method won't show anything while loading it is simply a white screen with a logo that appears briefly while xamarin forms is loading. I originally had tried something very similar to what you are doing (two activities) and I also ran into the same problem (black screen appearing).

    I will look into this more tonight if I have time.

    Wednesday, October 25, 2017 8:49 PM
  • User52878 posted

    I started having this after updating to Xamarin Forms 2.5.1. Any solutions yet?

    Tuesday, May 1, 2018 4:29 PM
  • User236903 posted

    I think it looks like a xamarin's bug. Which xamarin version do you have,windows,visualstudio?

    Wednesday, May 2, 2018 5:39 AM
  • User52878 posted

    Visual Studio for Mac 7.4 Xamarin.Android 8.2 Compiling with Target Android 8.0 On a project with Xamarin.Forms 2.5.1.444934

    Wednesday, May 2, 2018 12:38 PM
  • User377805 posted

    I had this issue as well with Xamarin forms 3.2 using FireOS (but that shouldn't matter for the solution). However, our issue was slightly different in that we don't need a custom theme. We're thinking that the black background is shown when transitioning from the splash theme to the theme that's used by the main activity; again, keep in mind it's a slightly different context. While you may not be able to use our solution in your project, you may be able to use the idea and tweak it to fit your needs. Cheers!

    Solution summary Use a single theme with a splash background and remove it as soon as the app has started.

    1. Create an interface in your Xamarin project with a method to remove the window background

    csharp public interface IPlatformCallbackService { void RemoveWindowBackground(); }

    1. Implement this interface in your Android project taking the Window instance as arg

    ```csharp public class PlatformCallbackService : IPlatformCallbackService { private readonly Window _window; public PlatformCallbackService(Window window) { _window = window; }

    public void RemoveWindowBackground()
    {
        _window.SetBackgroundDrawable(null);
    }
    

    } ```

    1. On startup, pass an instance of the PlatformCallbackService to the Xamarin app and call the method to remove the background as soon as you're done. We're using Ninject to access the services.

    (MainActivity) LoadApplication(new App(new AndroidPlatformModules(Window)));

    styles.xml

    xml <?xml version="1.0" encoding="utf-8" ?> <resources> <style name="MainTheme" parent="MainTheme.Base"> <item name="android:windowBackground">@drawable/splash_screen</item> <item name="android:windowFullscreen">true</item> </style> </resources>

    Wednesday, September 19, 2018 7:17 PM
  • User263612 posted

    I realise it's over a year since the question was posted, but sharing my findings for those still struggling with this!

    After testing, I found that in my case the black screen was due to work that the MainActivity was doing on the UI thread after the splash screen had passed on the control to it. Paring the MainActivity right back to essentially an empty shell (with a white background) got rid of the black screen. I'm now looking at how best to run the tasks that were consuming the CPU cycles and keeping everything looking snappy to the user!

    Friday, November 30, 2018 11:27 PM
  • User380511 posted

    I am facing similar issue even today. Black background is shown when transitioning. Anyone has a solution for this?

    Monday, December 10, 2018 7:21 PM
  • User1773 posted

    You don't even need a splash activity, to do what you want. It also kind of defeats the purpose. You don't want to slow your start up by having two activities to inflate. What a properly designed layer_list does is fill in during a cold start of the app, the normal white background screen you normally see, before your mainactivity inflates. Google "android app cold start" and you should find plenty examples. Typically, in a cold start you may have the need to say start a bound service which does takes time, so you display this pseudo splash screen to hide the fact that you are starting a bound service

    Your layer_list (which looks ok), should be in the Resouce/Drawable folder, just as an xml file. Then your theme is set to the splash theme. Then inside your main activity just before base:OnCreate you call

    SetTheme(Resource.Style.YOURMAINTHEME); base.OnCreate(savedInstanceState);

    That way you aren't slowing your app loading, you are just utilising the cold start time what every app has to display the layer _list contents.

    To prove the point. Once loaded exit your app and restart it. The second and subsequent times you will barley notice the splash screen because you are now doing a warm start.

    If you do it with a specific splash activity and then the mainactivity it will always be slower, because you will always be inflating two activities. I'm pretty sure you'll find that extra load time will annoy your users big time.

    Monday, December 10, 2018 9:50 PM
  • User380511 posted

    I need a specific axml screen with model number, version number and other details. what is the best solution for that?

    Tuesday, December 11, 2018 6:53 AM
  • User1773 posted

    cchauhan,

    What would be the point of model number, version number etc. information on a splash screen. The user wouldn't have time to note the details before it disappeared. Read up on what is suitable for display in a layer_list.

    Tuesday, December 11, 2018 8:33 PM
  • User361784 posted

    I found the solution removing "Task" form my SplashActivity.cs (I was using Task).

    https://forums.xamarin.com/discussion/comment/358288#Comment_358288

    Monday, December 17, 2018 10:59 AM
  • User237334 posted

    @Esaavedra89 said: I found the solution removing "Task" form my SplashActivity.cs (I was using Task).

    https://forums.xamarin.com/discussion/comment/358288#Comment_358288

    YES! Thank you!

    Friday, July 12, 2019 6:36 PM