Branded Lauch Screen

What do you see when the android apps starting?

During the transition since the app is closed and until it is initialized and ready to inflate its first view, the only thing we can see is the window background. During this time, the window manager makes its best effort to draw a placeholder UI using elements from your theme such as the background and status bar color.

We can use this time to add branding to ous apps. Now I will show you how to make branded lauch screen for your app.

Create a special theme for lauch activity

In res/styles.xml file, you create a new stype tag with name AppTheme.LauncherTheme has parent is AppTheme.

<resources>
  <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar" />
  <style name="AppTheme.LauncherTheme" parent="AppTheme">
    <item name="android:windowBackground">@drawable/branded_logo</item>
  </style>
</resources>

In new theme, you must override android:windowBackground by add item with name android:windowBackground and set value for this with a drawable.

Create drawable for windowBackground

In res/drawable folder, create a new xml file with name branded_logo.xml. You can’t use an image directly into the background because it will stretch to fit the whole screen. You can use a layer drawable like code below:

<?xml version="1.0" encoding="utf-8"?>
<layer-list
  xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <color android:color="@color/background_material_light" />
  </item>
  <item>
    <bitmap android:gravity="center"
      android:src="@drawable/logo_image" />
  </item>
/layer-list>

You must have a image file in drawable folder with file name is logo_image.png.

Apply theme for laucher activity

Open AndroidManifest.xml file to set android:theme for activity laucher.

<activity android:name=".MainActivity"
  android:label="@string/app_name"
  android:theme="@style/AppTheme.LauncherTheme">
  <intent-filter>
    <action android:name="android.intent.action.MAIN" />
    <category android:name="android.intent.category.LAUNCHER" />
  </intent-filter>
</activity>

Now, your application will be use LaucherTheme for laucher activity. But when MainActivity ready to inflate you must remove LauncherTheme for activity because MainActivity still have window background. Then we change our theme to the original one right before MainActivity inflates its UI.

@Override protected void onCreate(Bundle savedInstanceState) {
  setTheme(R.style.AppTheme);
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
}

Complete, you can run project to see the result.

You can get complete code in github.