TrinityTuts

Android splash screen and webview

Last updated on April 2nd, 2020 at 11:10 pm

If you are developing an android application you first screen is your splash screen before the user enters the main application. You can display some animation, application logo or some illustration and load some data in the background. The splash screen is really very important because whenever a user opens the app he first interacts with your splash screen.

Android splash screen is one of the best ways to make your android app look more attractive and also a way to advertise your brand in your app. We also use a splash screen to load some data from web service or run some other process in the background or preparing data to show in the next activity. In this post, I will explain to you how we can create a splash screen in android application.

Android Splash screen

1. Launch android studio → create new projects.

2. Name your project, once your project is ready you can create new activity class(SplashScreen).

3. Now edit your activity_splash_screen.xml file and you can add your animation or display your logo on this screen. For this tutorial, I am using two ImageView inside my main layout as shown in below code.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:background="#d73d32" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="126dp"
        android:contentDescription="@string/app_name"
        android:src="@drawable/trinitylogo" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignRight="@+id/imageView1"
        android:layout_marginBottom="45dp"
        android:src="@drawable/by" />

</RelativeLayout>

4. Now once my design is ready I can edit my SplashScreen.java. On this screen you can also load some data in background if you want or else you can put some interval here and after that interval take the user to the main application screen.

package com.splash;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;

public class SplashScreen extends Activity {
	
	@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.splashscreen);
        
        final Handler handel = new Handler();
        handel.postDelayed(new Runnable() {
			
			@Override
			public void run() {
				// TODO Auto-generated method stub
				Intent loadSplash = new Intent(Splash.this, MainActivity.class);
				
				startActivity(loadSplash);
				
				finish();
			}
		}, 5000);
    }
}

In the above code, I am using the Handler() method or android to add delay for the next screen I add a 5-second delay after that screen will automatically redirect to the main screen.

Now you can launch your application in your device or emulator.

Code to create a custom theme for splash screen

Now create a new XML file inside values folder and paste use these code

<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Base application theme is the default theme. -->
<style name="Theme" parent="android:style/Theme" />

<!-- Theme for splash screen-->
<style name="Theme.MyAppTheme" parent="Theme">
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:windowBackground">@color/red</item>

</style>
</resources>

you can define your own style as I create in above XML file and save it now you can call this theme in where you add splash screen activity in AndroidManifest.xml file

<activity
            android:name="com.splash.Splash"
            android:label="@string/app_name"
            android:theme="@style/Theme.MyAppTheme" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

And after doing this your problem is solved.

Working on WebView in Android

WebView is used to display a webpage, maps, etc.. before using web view you need to add Internet permission in your AndroidManifest.xml file

<uses-permission android:name="android.permission.INTERNET"/>

before application

MainActivity

This is my main activity class where I load my webview.

package com.splash;

import android.os.Bundle;
import android.app.Activity;
import android.app.AlertDialog;
import android.app.ProgressDialog;
import android.util.Log;
import android.view.Menu;
import android.view.Window;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;

public class MainActivity extends Activity {

	private WebView webView;
	private ProgressDialog progressBar;
	private static final String TAG = "Main";

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);

		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_main);

		webView = (WebView) findViewById(R.id.trnity);
		webView.getSettings().setJavaScriptEnabled(true);
		webView.getSettings().setLoadWithOverviewMode(true);
		webView.getSettings().setUseWideViewPort(true);
		webView.getSettings().setBuiltInZoomControls(true);
		final AlertDialog alertDialog = new AlertDialog.Builder(this).create();
		progressBar = new ProgressDialog(MainActivity.this);
		progressBar.setMessage("Trinity tuts loading...");
		progressBar.setCancelable(false);
		progressBar.setCanceledOnTouchOutside(false);
		progressBar.show();
		webView.setWebViewClient(new WebViewClient() {
			public boolean shouldOverrideUrlLoading(WebView view, String url) {
				Log.i(TAG, "Loading");
				view.loadUrl(url);
				return true;
			}

			public void onPageFinished(WebView view, String url) {
				Log.i(TAG, "Done loading " + url);
				if (progressBar.isShowing()) {
					progressBar.dismiss();
				}
			}

			public void onReceivedError(WebView view, int errorCode,
					String description, String failingUrl) {
				Log.e(TAG, "Error: " + description);
				Toast.makeText(getApplicationContext(),
						"Oh no! " + description, Toast.LENGTH_SHORT).show();
				alertDialog.setTitle("Error");
				alertDialog.setMessage(description);
				alertDialog.setCancelable(false);
				alertDialog.show();

			}
		});
		webView.loadUrl("http://trinitytuts.com/");

	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

}

In n above code first, I remove my default title bar from my MainActivity.java file using code

requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);

Note that you need to call requestWindowFeature() before you setContentView() to remove your title bar.

and next, I initialize webview and call some default feature and load URL from the internet on this application.

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    style="@android:style/Theme"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#fff"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity"
    android:layout_margin="0dp"
    android:padding="0dp" >

    <WebView
        android:id="@+id/trnity"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true" />

</RelativeLayout>

In my mainactivity.xml I create a webview where I display my site on this application.

You can download this code and try this apk in your android device from the link above.