Intermediate React Native

Android Splash Screen

Kadi Kraman

Kadi Kraman

Intermediate React Native

Check out a free preview of the full Intermediate React Native course

The "Android Splash Screen" Lesson is part of the full, Intermediate React Native course featured in this preview video. Here's what you'd learn in this lesson:

Kadi walks through creating a splash screen for Android by creating a splash image layout, a drawable-xxdpi folder to hold the image, and setting the background color. The look and feel of the launch screen can be previewed in Android Studio by opening the launch_screen.xml file.


Transcript from the "Android Splash Screen" Lesson

>> Now, let's add a splash screen to Android. So firstly, we need to create a image layout for Android. So if we go to Android app source mean Rez, we should create a layout directory. So, Android app source main press. Let's create a new folder, and call it layout.

And then, inside it let's create a file called Launch screen.XML. A file launch screen to XML. Let's just copy this layout here. Now, you can view this within Android Studio as well and it will give you an idea of what it will look like. But basically this layout Is framed as a type of layout, and it's referencing a couple of properties we don't have yet.

So we have a background colour of splash blue, and a image. And the image which is a drawable launch screen. So in order for this file to reference these, we also need to create them. So to add the image let's create a drawable xxhdpi directory on the res.

So on the wrist let's do a new folder and paste this. And then inside this let's save this butterflies image and let's call it launch screen.png so saving the jazz let's do carry projects we check Android, app source main. It's very deep folder structures in Android. Java, okay, and let's call it launch screen.

So the name is important because in here we're expecting this to be called launch screen, okay. And then we'll also need to add the color. So on the values, let's create a colors.XML. So here and the values we already have strings and styles. So in Android all of the strings, and styles, and colors, anything you use in your native code can even XML value as opposed to paste it here.

So we have primary dark and the blue that we're going to use for our background. And one thing to know to the way that we've set this up, it assumes that you already have React Native Splash screen installed. So if you haven't already set it up, make sure that you've installed and configured the splash screen for Android.

And we haven't done this. So here under Android, we need to update main So let's do that. So, we go to, main Java main Will import the bundle and the splash screen. And uncreate, will do splash screen show this. Okay, so this is a duplicate input on bundles that can remember these.

Excellent, so let's close this. And let's rebuild from Android Studio. So I said earlier that you can actually see the launch screen within android studio. So if I open this. It's currently not happy with me. Okay there it is yeah. So if I open this you can actually see you can use a split screen or design screen so you actually can see what it will look like.

So it's coded in XML but the preview is available same as the IOS version is. All right and then we close this, I go we got a splash screen. So I think it's actually building the Android bundle. So now, we have our Android and iOS apps with splash screens

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now