Adding a launch screen to an iOS app

Do we really need a launch screen? Well, I would say launch screens are a way of making a positive vibe even before a user starts to use the app. So, having simple and clean launch screen is important for a winning app.

Photo by CoinView App on Unsplash

To get started with this tutorial you need to have an iOS app. If you don’t have one, refer my Medium story or YouTube video on Creating a simple browser for iOS using WKWebView with Swift. Else you can simply clone the basic app on GitHub from https://github.com/mmafrar/swift-ios-wkwebview-demo. Hope you have an app now to get started with this tutorial.

Every time you build a mobile app you come across this thing called Launch Screen. And the way you setup a launch screen differs based on the platform or may be the programming language you use. With my little experience building apps for iOS and Android, I personally feel like Apple make things much more easier. Although there are certain libraries out there to do if for you, today we’re going to cover how can we get that done natively. We’ll be be creating a blank white screen with a logo in the center.

Contents of Assets.xcassets folder

On your Mac, head on to Xcode and open the project you’re working on. On the left hand pane you’ll be seeing the files in your project. Click on Assets.xcassets and probably you’ll be seeing a Image Set named AppIcon along with whatever you have already added. Drag and drop your launch image inside Assets.xcassets folder. Now you should be having a screen like the one shown in the image above.

View of the LaunchScreen.storyboard

Next click on the LaunchScreen.storyboard you’ll be seeing an empty View. Click on the button shown on top right hand corner in the image above. You’ll be seeing a list of components you can add to this view. From the menu prompted search for ImageView and drag it to the center of the View.

Show the Attributes inspector column

Then click on the ImageView and go to Show the Attributes inspector. Under Image View -> Image choose the launch image you added earlier in this tutorial. Then make sure set the value of View -> Content Mode to Aspect Fill which will make the image look nice on the screen.

Show the Size Inspector column

Although the image might look centered on your current view, it won’t appear centered on either a small screen or on a large screen. In order to fix that, switch to Show the Size Inspector menu and deselect the top and left red lines in the autosizing section, and select the lines in the middle as shown.

Launch screen inside a simulator

Above is a screenshot of launch screen taken while it rendered on my simulator. I’ll be publishing a YouTube video based on this story very soon. If you’re interested subscribe to my channel and make sure to keep in touch.

How to add an icon for an iOS app on YouTube

Above is a recent YouTube video I have published. Also you might be interested to check out my story How to add an icon for an iOS app built using Swift or React Native published on Medium.

Software Engineer | AWS Certified | DevOps Enthusiast

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store