The app icon is the first thing your user sees every day when they use your app, and it’s competing for attention with other icons on screen. Therefore it’s very important to get it right.

Why write another Android icon/splash screen article? While there are quite a few tutorials out there covering similar topics, I feel like there is room for an update because some of the answers have changed and a few of the problems we examined here are React Native specific.

Sold? Then let’s begin.

1. Generate Android Adaptive Icons using Android Studio

Before we start, you will need to prepare the artwork for the icon. You can find some ready-made templates in the Resources and tools section near the bottom of this excellent Adaptive Icons Design article.

If you don’t want to create the artwork now and just want to try out the steps in this tutorial, you can use this pre-generated one to follow along.

Ready? Let’s open your project in Android Studio and create a new Image Asset in app -> New -> Image Asset

In the Foreground Layer tab, change the image asset Path to your icon artwork. Then switch to the Background Layer tab and add a solid color background, or image if you have one.

Press Next and Finish in the subsequent screens. Now clean and run the Android project again and your new icon should now appear.

2. Android splash screens

Due to differences in how Android activities are handled in React Native’s two major navigation libraries. The splash screen part of this tutorial assumed that you are using Wix’s React-Native-Navigation. I will update this article with steps for React-Navigation in a later date.

Copy splash screen image

If you don’t have a splash screen image handy, you can still follow along with this pre-generated one.

Navigate to the android -> app -> src -> main -> res folder and paste a copy of your splash screen image into each mipmap-xxxxxxx folder generated from the previous App Icon section. Skip the mipmap-anydpi-v26 folder if you have one or it will cause an error.

Create a splash_screen.xml file

Create a new xml named splash_screen.xml and paste in the content below. Replace logo_splash with the name of your image.

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<item

android:drawable="@color/black111"/>

<item>

<bitmap

android:gravity="center"

android:src="@mipmap/logo_splash"/>

</item>

</layer-list>

Then create the following folders in android -> app -> src -> main -> res and paste a copy of the newly created splash_screen.xml in each of them.

Create a color.xml file

In the android -> app -> src -> main -> values folder, create a new xml named color.xml and paste in the content below.

<?xml version="1.0" encoding="utf-8"?>

<resources>

<color name="black111">#111111</color>

</resources>

Edit the styles.xml file

In the same values folder, you should have a styles.xml

Add a new SplashTheme style item so it look something like below. Note that the splash_screen value here is referencing the name of the splash_screen.xml we created earlier.

<resources>



<!-- Base application theme. -->

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

<!-- Customize your theme here. -->

<item name="android:textColor">#000000</item>

</style>

<style name="SplashTheme" parent="AppTheme">

<item name="android:windowBackground">@drawable/splash_screen</item>

</style>

</resources>

Update AndroidManifest.xml

Add the following items to your AndroidManifest.xml

xmlns:tools=”http://schemas.android.com/tools"

android:theme=”@style/SplashTheme”

tools:replace=”android:theme”

Here is an example showing where to place each of them

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

package="com.iconsplashmedium">



<uses-permission android:name="android.permission.INTERNET" />



<application

android:name=".MainApplication"

android:allowBackup="false"

android:icon="@mipmap/ic_launcher"

android:label="@string/app_name"

android:roundIcon="@mipmap/ic_launcher_round"

android:theme="@style/SplashTheme"

tools:replace="android:theme">

<activity

android:name=".MainActivity"

android:configChanges="keyboard|keyboardHidden|orientation|screenSize"

android:label="@string/app_name"

android:windowSoftInputMode="adjustResize">

<intent-filter>

<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />

</intent-filter>

</activity>

<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

</application>



</manifest>

Solving the white flash problem

If you run the app now, the splash screen will work but if your app has a dark or strong color theme, you might have noticed there is a white flash between React loading and the React-Native-Navigation taking over. To solve this problem, simply edit the MainActivity.java with the content below.

package com.iconsplashmedium;



import com.reactnativenavigation.NavigationActivity;

import android.graphics.Color;

import android.os.Bundle;

import android.view.View;



public class MainActivity extends NavigationActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(this.createSplashLayout());

}



public View createSplashLayout() {

View transparentView = new View(this);

transparentView.setBackgroundColor(Color.TRANSPARENT);

return transparentView;

}

}

And a solid background color on all navigation screens.

Navigation.setDefaultOptions({

layout: {

backgroundColor: '#111111',

},

})

Clean and run the app, you should now see the splash screen when you start the app.

Congratulations! You have reached the end of the article and hopefully an app with proper icons and launch screens. If you like the article and have any feedback or suggestions on how it can better, please leave a comment below. And don’t forget to mash that 👏 button! Thank you for reading and have a nice day.

Useful resources that might interests you