When your app is launched by the user, it will show some white or black screen briefly before the main screen is shown. This is because it will take a few milliseconds to be loaded into memory and the onCreate()
method to be called. This brief white or black screen is your splash screen. Most Google apps will show you the Google logo before the main app is opened fully. This is considered a good design because users might think the app has frozen especially if yours take longer to initialize and this might be a put off leading to uninstalls. You can find the source code for Android Splash Screen from GitHub.
‘Wrong Way’
Some developers will create a splash screen ‘the wrong way’. In quotes because it is not completely wrong but is considered the bad design. Please stop using timers or syncs. It is the wrong way!
The right way
Use the launcher theme. You see, when the app is launched, the window manager draws a placeholder screen using your app’s theme before the main activity is called. So it will show a white blank screen or black screen depending on your theme coloration. Particularly the windowBackground
element in your theme. The trick, therefore, is utilizing this windowBackground
to render what we want before the app is launched.
So how do we do that?
I assume you have already installed the [Android studio]. I am using Android Studio version 3.5.1
Launch the Android Studio, click Start a new Android Studio project then Basic Activity. Name your project, mine is TruckSend then give your preferred package name. The package name is usually your project’s domain ( Java package way). Select the Minimum API version and language. I am using Kotlin and Androidx frameworks. Cool, you created your first app!
Choose the project.
Configure project by specifying basic settings.
Create Android Adaptive Launcher Icons in Android Studio
To create adaptive launcher icons,
- Right Click app folder on your project folder structure
- Select New
- Then Image Asset
Put the following features:
Icon Type: Launcher Icons(Adaptive and Legacy)
Name: ic_launcher
Foreground Layer tab
Asset Type: choose your asset type (mine is an image)
Path: give a path to your image
On the scaling section, scale your image or logo to fit the safe zone. The safe zone is the black circular line in the preview.
Background Layer tab
Here you choose the
background color or image of the launcher. Mine is color, I chose
black.
Then click Next and Finish.
Using a dedicated splash screen
Create a new Empty Activity called SplashActivity.kt. When you select this activity as Launch Activity, you will have a clash in the manifest file as shown.
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
package="com.neveropen.trucksend">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme"
tools:ignore="GoogleAppIndexingWarning">
<activity android:name=".SplashActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:theme="@style/AppTheme.NoActionBar">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
Correct this by removing the intent-filter tag in the MainActivity tag.
Next, create a drawable called bg_launcher.xml
in the drawable folder and add the following.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@color/colorPrimary"/>
<item>
<bitmap
android:gravity="center"
android:src="@drawable/trucksendwhite"/>
</item>
</layer-list>
Note:
<item android:drawable="@color/colorPrimary"/>
This is the main
background, it could be an image or a color. I recommend it be a
color.
The bitmap part
could be your logo.
Play around with them to fit your needs.
Go to your styles, create a new style to hold your launch screen. The style should have the windowBackground
as the drawable you created above and of course, it should not have an action bar. Mine is AppTheme.NoActionBar.Launcher
<resources xmlns:tools="http://schemas.android.com/tools">
<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="android:colorBackground">@color/colorBackground</item>
<item name="android:navigationBarColor" tools:targetApi="lollipop">@android:color/black</item>
</style>
<style name="AppTheme.NoActionBar" parent="Theme.MaterialComponents.Light.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="android:colorBackground">@color/colorBackground</item>
<item name="android:navigationBarColor" tools:targetApi="lollipop">@android:color/black</item>
</style>
<style name="AppTheme.NoActionBar.Launcher" parent="AppTheme.NoActionBar">
<item name="android:windowBackground">@drawable/bg_launcher</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
</resources>
Go back to your manifest file and add the style as your theme.
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
package="com.neveropen.trucksend">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme"
tools:ignore="GoogleAppIndexingWarning">
<activity android:name=".SplashActivity"
android:theme="@style/AppTheme.NoActionBar.Launcher">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:theme="@style/AppTheme.NoActionBar">
</activity>
</application
The SplashActivitity is the starting screen where you could check startup configurations like logins or fetch data before proceeding. startActivity(Intent(this, MainActivity::class.
java
))
Now launch your app to see your new splash screen!
You can find the source code for Android Splash Screen from GitHub.
Also check:
Best Android Development Books
How To Get and Display Current User Location on Android Google Map
Deploy Python 3 Django Application on CentOS 7 with Apache and mod_wsgi
How To Dockerize Django Application With PostgreSQL Database
How To Dockerize a Django Application on Linux