Splash Screen in Xamarin.Forms cross platform app (Android & iOS)

Practically there is no way to show Splash Screen/ Launch Screen using Xamarin.Forms because Xamarin.Forms libraries load after loading of AppDelegate (iOS) or MainActivity (Android) is completed. There is no point in showing splash screen at this point of application lifecycle because splash screens are meant to be displayed while app libraries are loading and we don’t want to show users a blank dark screen.

Keeping that in mind we have to configure it separately in each platform. Our splash screen will contain a solid colored background and a logo placed on center of the screen. Follow below links for detailed walk-through to add splash screen on each of he platform. Keep on reading

Add Splash Screen in Xamarin.Forms cross platform app – iOS

For showing splash screen in Xamarin forms iOS app we will need to follow below steps

  • Prepare/ Gather Images

We will be preparing our splash screen with a logo and solid color filled background. So for that we have two options that is prepare image for each of resolution type suggested by Apple or have and PDF format vector image through other resolutions are generated at run time. Keep in mind that PDF vector option will work only for iOS 8 and later. Keep on reading

Show Splash Screen While Android WebView is Loading

In one of my recent application (which was a webview app) my client suggested to show splash screen while we are loading the application data (obviously client does not bother if this is webview app or native one) so here I am with a sample for all those who are in similar situation.

I am not going to explain all the basic things like create project and activity etc as we have already discussed this in my previous articles.

1. First thing we have to do is create layout for our webview screen. We will name this layout file activity_main.xml. This file will contain webview element and splash screen element.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">
 <RelativeLayout
     android:id="@+id/splach_screen"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:background="@drawable/splash_bg"
     android:visibility="visible" >
 
     <ImageView
         android:id="@+id/imgLogo"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
      android:layout_centerHorizontal="true"
      android:layout_centerVertical="true"
         android:contentDescription="@string/splash_image_desc"
         android:src="@drawable/ic_logo" />
    
     <ProgressBar
      android:id="@+id/webViewProgress"
      android:layout_centerHorizontal="true"
      android:layout_centerVertical="true"
      android:layout_width="wrap_content"
         android:layout_height="wrap_content"
      android:layout_below="@+id/imgLogo" />
    
     <TextView
         android:id="@+id/error"
      android:layout_centerHorizontal="true"
      android:layout_centerVertical="true"
      android:layout_width="wrap_content"
         android:layout_height="wrap_content"
      android:layout_below="@+id/imgLogo"
         android:textColor="@color/loading_error"
         android:textSize="@dimen/loading_error"
         android:text="@string/loading_error"
      android:visibility="invisible"/>
    
     <Button
         android:id="@+id/reload"
      android:layout_centerHorizontal="true"
      android:layout_centerVertical="true"
      android:layout_width="wrap_content"
         android:layout_height="wrap_content"
      android:layout_below="@+id/error"
      android:text="@string/reload"
      android:onClick="reload"
      android:visibility="invisible" />
 
     <TextView
         android:layout_width="fill_parent"
         android:layout_height="wrap_content"
         android:layout_marginBottom="10dp"
         android:textSize="12sp"
         android:textColor="#454545"
         android:gravity="center_horizontal"
         android:layout_alignParentBottom="true"
         android:text="@string/splash_loading_text" />
 </RelativeLayout>
 <LinearLayout
     android:id="@+id/main_view"
     android:orientation="vertical"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
    android:visibility="invisible">
     <WebView android:id="@+id/web_engine"
         android:layout_width="fill_parent"
         android:layout_height="fill_parent" />
 </LinearLayout>
</LinearLayout>

In this layout we have one main layouts and two sub layouts. One of the two sub layouts contains our splash screen contents and other contains webview.

We have set splash screen layout to visible and webview layout to invisible which will be later changed when webview content is loaded.

2. Now we will create our application’s main activity. We will name it MainActivity.java and its code will be as below:

package com.edunyte.webviewsplashscreen;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends Activity {
@SuppressLint("SetJavaScriptEnabled")
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

WebView myWebView = (WebView) findViewById(R.id.web_engine);

myWebView.setWebViewClient(new MyBrowser());
myWebView.clearCache(true);
myWebView.clearHistory();

myWebView.getSettings().setJavaScriptEnabled(true);
myWebView.getSettings().setLoadsImagesAutomatically(true);
myWebView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
myWebView.loadUrl("https://edunyte.com/");
}

private class MyBrowser extends WebViewClient {
@Override
public void onPageFinished(WebView view, String url) {
if (findViewById(R.id.splach_screen).getVisibility() == View.VISIBLE) {
// show webview
findViewById(R.id.main_view).setVisibility(View.VISIBLE);
// hide splash screen
findViewById(R.id.splach_screen).setVisibility(View.GONE);
}
}
}
}

 

In this code we have loaded URL in webview and set webview client to handle onPageFilished event. onPageFinished event we will hide splash screen layout and show webview layout.

Apart from these two file you may need to add few more files like string.xml, style.xml, color.xml etc.

For complete code of this sample click here to download.