How to create a splash screen for a Wear OS 3 app similar to the "big" apps?

user_3697030 0
Viewed 249

I am searching for a possibility to make my Wear OS 3 app have a simple splash screen. I cannot find anything specific, but I read that Android 12 introduced an automatic splash screen for every app. Don't know if that applies to Wear OS 3 though.

I can see multiple Apps (e.g. Spotify and Strava) on my Galaxy Watch 4 starting with a similar splash screen: On click on the app icon in the "app drawer", the icon moves from the app drawer position to the center for 1-2 seconds while a black background appears. After that the app is shown. My guess would be those splash screens are generated by Android. But my app only shows a black screen until the app first draws. I artificially delayed the startup of my app via Thread.sleep in my OnCreate. (If that is a problem, please tell me how to artificially create a delay to test the splash screen)

If not clear already: I would like to have the same kind of splash screen as the others for my app.

Help is much appreciated! Thank you in advance for any suggestions

wear-os splash-screen android
3 Answers

I solved it myself. I found the way to the solution on an Android Developer page under "Branded launch". The important thing is to manipulate the window which seems to be basically the root layer of the app shown even if the layout is not inflated yet (hence the right spot for implementing the splash screen). Interesting to me is that Android (Wear) animates the icon nicely from the position in the App drawer into the center of the screen as if it knows that I now have a splash screen. Didn't experiment much with it but if anyone can explain please do :)

To implement the splash screen I did the following:

  1. Add an inset drawable which will show the desired icon centered with an inset. My version uses a vector drawable and looks like this (/res/drawable/splash_background.xml):

    <?xml version="1.0" encoding="utf-8"?>
<inset
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/ic_laucher_icon_composite"
    android:insetTop="60dp"
    android:insetRight="60dp"
    android:insetBottom="60dp"
    android:insetLeft="60dp" />

  2. Add two themes. One for the splash screen and one for the default. I had no custom theme before and since I did not extend my MainTheme I actually do not even need it but I added it anyway. The splash screen theme manipulates the windowBackground which is the key to this. These are both my themes in the file res/values/styles.xml:

    <?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="SplashTheme" parent="@android:style/Theme.DeviceDefault">
        <item name="android:windowBackground">@drawable/splash_background</item>
    </style>
    <style name="MainTheme" parent="@android:style/Theme.DeviceDefault">
    </style>
</resources>

  3. I configured the SplashScreen-Theme as the initial theme in the Android Manifest like so:

    <application
    ...
    android:theme="@style/SplashTheme">

  4. In the MainActivity I switched the theme after inflating my layout. I did this right in between the inflation and the setContentView but it would probably make no difference being after the latter.

    binding = ActivityMainBinding.inflate(layoutInflater)
setTheme(R.style.LushMainTheme)
setContentView(binding.root)
user_36970300

Thanks @user3697030, great answer but I tweaked slightly the splash_background.xml, since you had a transparent background.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@android:color/black"/>
        </shape>
    </item>
    <item
        android:width="@dimen/launch_icon_size"
        android:height="@dimen/launch_icon_size"
        android:gravity="center">
        <bitmap
            android:src="@drawable/ic_launcher_round"
            android:gravity="fill_horizontal|fill_vertical"/>
    </item>
</layer-list>
user_15426670

For compose, clearing your content is mostly the same, probably just

    override fun onCreate(savedInstanceState: Bundle?) {
        setTheme(android.R.style.Theme_DeviceDefault)

        super.onCreate(savedInstanceState)

        setContent {

Instead of inflating content.

user_15426670
Related