How To Implement Splash Screen Activity in Android App - Hive Programmers

View this thread on: d.buzz | hive.blog | peakd.com | ecency.com
ยท@skyehiยท
0.000 HBD
How To Implement Splash Screen Activity in Android App - Hive Programmers
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.


![Polish_20240123_141457614.jpg](https://files.peakd.com/file/peakd-hive/skyehi/23wr3UycA3111TSuq2FT2W8gv6Y8u4kVs4HzM3Bj8CjKFhCUUuTk5vNVyG2VngzNb9nCc.jpg)[Original Image Source](https://www.pexels.com/photo/flat-lay-of-mobile-phone-and-dried-flowers-7430733/) by alleksana from Pexels


![YpihifdXP4WNbGMdjw7e3DuhJWBvCw4SfuLZsrnJYHEpsqZFkiGGNCQTayu6EytKdg7zA3LL2PbZxrJGpWk6ZoZvBcJrADNFmaFEHagho8WsASbAA8jrpnELSvRtvjVuMiU1C5ADFX1vJgcpDvNtue9Pq83tjBKX62dqT5UoxtDk.png](https://files.peakd.com/file/peakd-hive/skyehi/23swrbKc3yjMYSUJMwmHkXUC71AufZXrkQ315XAST7nXzaKhpkvsAScnV3nBnpS55SJ2r.png)


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


![YpihifdXP4WNbGMdjw7e3DuhJWBvCw4SfuLZsrnJYHEpsqZFkiGGNCQTayu6EytKdg7zA3LL2PbZxrJGpWk6ZoZvBcJrADNFmaFEHagho8WsASbAA8jrpnELSvRtvjVuMiU1C5ADFX1vJgcpDvNtue9Pq83tjBKX62dqT5UoxtDk.png](https://files.peakd.com/file/peakd-hive/skyehi/23swrbKc3yjMYSUJMwmHkXUC71AufZXrkQ315XAST7nXzaKhpkvsAScnV3nBnpS55SJ2r.png)


### 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


![2dk2RRM2dZ8gKjXsrozapsD83FxL3Xbyyi5LFttAhrXxr16mCe4arfLHNDdHCBmaJroMz2VbLrf6Rxy9uPQm7Ts7EnXL4nPiXSE5vJWSfR53VcqDUrQD87CZSpt2RKZcmrYrze8KanjkfyS8XmMCcz4p33NZmfHE4S9oRo3wU2.png](https://files.peakd.com/file/peakd-hive/skyehi/EoAYDi9ZKfkBZi7rMWbojnS8KytoTpbSepvPmfeZmL2V2h8FDZ3xRpC58MZDkf1LeRQ.png)


### 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 

```xml
<!-- 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. 


![YpihifdXP4WNbGMdjw7e3DuhJWBvCw4SfuLZsrnJYHEpsqZFkiGGNCQTayu6EytKdg7zA3LL2PbZxrJGpWk6ZoZvBcJrADNFmaFEHagho8WsASbAA8jrpnELSvRtvjVuMiU1C5ADFX1vJgcpDvNtue9Pq83tjBKX62dqT5UoxtDk.png](https://files.peakd.com/file/peakd-hive/skyehi/23swrbKc3yjMYSUJMwmHkXUC71AufZXrkQ315XAST7nXzaKhpkvsAScnV3nBnpS55SJ2r.png)


### 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

```xml
<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.


![YpihifdXP4WNbGMdjw7e3DuhJWBvCw4SfuLZsrnJYHEpsqZFkiGGNCQTayu6EytKdg7zA3LL2PbZxrJGpWk6ZoZvBcJrADNFmaFEHagho8WsASbAA8jrpnELSvRtvjVuMiU1C5ADFX1vJgcpDvNtue9Pq83tjBKX62dqT5UoxtDk.png](https://files.peakd.com/file/peakd-hive/skyehi/23swrbKc3yjMYSUJMwmHkXUC71AufZXrkQ315XAST7nXzaKhpkvsAScnV3nBnpS55SJ2r.png)



### 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 

```java
// 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. 


![YpihifdXP4WNbGMdjw7e3DuhJWBvCw4SfuLZsrnJYHEpsqZFkiGGNCQTayu6EytKdg7zA3LL2PbZxrJGpWk6ZoZvBcJrADNFmaFEHagho8WsASbAA8jrpnELSvRtvjVuMiU1C5ADFX1vJgcpDvNtue9Pq83tjBKX62dqT5UoxtDk.png](https://files.peakd.com/file/peakd-hive/skyehi/23swrbKc3yjMYSUJMwmHkXUC71AufZXrkQ315XAST7nXzaKhpkvsAScnV3nBnpS55SJ2r.png)


### 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 

```<intent-filter>
        <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

```xml

<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>
```


![2dk2RRM2dZ8gKjXsrozapsD83FxL3Xbyyi5LFttAhrXxr16mCe4arfLHNDdHCBmaJroMz2VbLrf6Rxy9uPQm7Ts7EnXL4nPiXSE5vJWSfR53VcqDUrQD87CZSpt2RKZcmrYrze8KanjkfyS8XmMCcz4p33NZmfHE4S9oRo3wU2.png](https://files.peakd.com/file/peakd-hive/skyehi/EoAYDi9ZKfkBZi7rMWbojnS8KytoTpbSepvPmfeZmL2V2h8FDZ3xRpC58MZDkf1LeRQ.png)


### 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 ๐Ÿ‘จโ€๐Ÿ’ป

<center>
You Can Follow Me @skyehi For More Like This And Others 
</center>
๐Ÿ‘ , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,