Hi there everyone and welcome to my favorite Science community online, StemSocial.
It's @skyehi and I'm happy to be back to continue my series on Android App Development Tutorials for Beginners.
In today's episode I'll be teaching on how to implement splash screen activities in your Android Apps.
Original Image Source by alleksana from Pexels
A splash screen is the initial screen that appears when a user launches an app.
It serves as a welcome or intro screen that shows usually for a couple of seconds before the main App activity launches.
It's really great to have Splash Screens added to your App.
It gives users the impression that the App was build professionally and the developer definitely took design into consideration
- If you want to learn how to implement Splash Screen activities in your Android Apps, this is the perfect blog for you guys.
Let's get started with today's work shall we
Prerequisites
For the benefit of newcomers to Android App development or my series, I'll share with you the required softwares you need to be able to go through with this tutorial.
Android Studio IDE - the platform on which we'll develop this and all other Android Apps.
Java Development Kit, JDK - You need to install JDK correctly on your PC for your PC to be able to execute Java commands or codes.
Physical Android Device or Emulator - After building the App, we'll need to test it either on an emulator or a physical Android device.
If you have all these checked out, you're absolutely ready to go through with this tutorial
Create A New Activity
Now guys with this implementation, I would assume that you already have an App you want to add the Splash activity to.
If that's the case then go ahead and open the Android Studio project to that App and continue with the steps.
However if you just want to learn how to implement the Splash activity for the first time or the right way then you need to create a new Android Studio project.
Start by opening Android Studio IDE and click on "Create a New Project"
I would recommend selecting "Empty Activity" as the template of your App project to keep things simple for beginners. When you're through with that click on the "Next" button.
Set both the App name and package name of your project and also ensure that Java is the selected programming language because we'll be using Java as always instead of Kotlin.
- However, if you want the Kotlin version of the codes please let me know in the comments.
Click on the "Finish" button and Android Studio will load your new App Project screen with the template already in place.
Now guys, when Android Studio loads, it would give you MainActivity.java file and activity_main.xml file as the default main activity page that open when the run the App.
Our plan would be to create a whole new activity called SplashActivity which would represent our welcome or Splash screen.
We'll design that welcome screen and also write the logic code to let that splash page open for a few seconds before the main page also opens.
Let's start with the design shall we
Designing the Splash Screen Layout
- I want to make our Splash screen similar to that of the famous YouTube App on Android.
When you open YouTube, all you see first is a white or dark background with the YouTube logo as an image at the center.
That's the design style I'll be going for.
To do this we need to create a new XML layout file for the splash screen.
We'll name that layout activity activity_splash.xml.
When the layout is created, we only need to add an ImageView element to display your app's logo or any welcome graphic.
Here's how your splash screen activity layout code should look like
(html comment removed: res/layout/activity_splash.xml )
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorSplashBackground">
<ImageView
android:id="@+id/imageViewSplash"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_app_logo"
android:layout_centerInParent="true" />
</RelativeLayout>
From the above layout code, I used android:layout_centerInParent and set the value as true to make sure the image would be at the center.
You can use any image of your choice guys.
Customizing The Splash Activity Style
One very important thing we need to do is to customize the style of the Splash activity.
Since it's a whole new activity screen in our App, we would need to ensure that it has its very own style theme and include it in our AndroidManifest.xml file after.
To create the custom style open your res/values/styles.xml file and create a new style for the splash screen.
You need to set the theme of the splash activity to Theme.AppCompat.NoActionBar and also specify the splash screen layout.
Here's how the style code will look like
<style name="SplashTheme" parent="Theme.AppCompat.NoActionBar">
<item name="android:windowBackground">@drawable/splash_background</item>
</style>
I created a style theme and named it SplashTheme . This is the name we'll make reference to when adding it to our AndroidManifest.xml file list I mentioned earlier.
Creating a Splash Screen Activity Logic Code
It's time for us to work on the backend or logic vode that would make the splash or welcome screen work.
To do this we would need to create a new Java class for the splash screen activity.
For simplicity sake I'll name it SplashActivity.java.
Now guys in this class file, we need to set the content view to the splash screen layout so the logic code and the layout file can connect.
We'll be writing a code that adds a delay to simulate the splash screen effect.
This method Handler().postDelayed will handle the delay of the splash activity before the main activity opens.
Here's how your logic vode should look like
// src/main/java/com.example.yourapp/SplashActivity.java
public class SplashActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_splash);
// Simulate a delay using a Handler
new Handler().postDelayed(new Runnable() {
@Override
public void run() {
// Start the main activity after the delay
startActivity(new Intent(SplashActivity.this, MainActivity.class));
finish();
}
}, 2000); // 2000 milliseconds = 2 seconds
}
}
As you can see from the above code, I used the delay method to set a delay of 2 seconds before the splash screen closes and opens MainActivity page.
The code startActivity(new Intent(SplashActivity.this, MainActivity.class)); is what opens the Main activity and the function finish() is what closes the Splash Activity screen.
Updating AndroidManifest
Now guys here's the final and very important step to implementing the Slash Screen activity.
In Android App Development and Android Studio, the default screen which opens first whenever an App is launched is determined by a particular code inside the AndroidManifest file.
If you want any activity page to become the default page to open first, you need to apply the the intent-filter code to that activity inside manifest.
Here's the code
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
So since we want SplashActivity page to open first, we'll apply that code to it in our manifest and please make sure it has been removed from the MainActivity in Manifest.
Another thing we will also do is to set the theme of the SplashActivity to the custom SplashTheme we created inside our style.xml file.
Here's how the code in Manifest should look like guys
<activity
android:name=".SplashActivity"
android:theme="@style/SplashTheme">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
Running The App
Congratulations guys, you've successfully created a splash screen activity for your Android app using Android Studio.
You can now run the app either using an emulator or a physical Android device.
When the App launches, you should see the welcome or Splash screen first for 2 seconds before your main activity page opens.
I hope you enjoyed this tutorial guys. If you're having any kind of trouble implementing this feature please let me know in the comments.
Thanks for reading and I hope this episode was helpful.
Thank you all for the support. To my friends @stickupcurator or @stickupboys and everyone else
Have A Great Day And Catch You Next Time On StemSocial. Goodbye 👨💻
You Can Follow Me @skyehi For More Like This And Others
