DEV Community

Cover image for Adding Splash Screen to Trusted Web Activity with Android’s FileProvider
Henry Lim
Henry Lim

Posted on • Edited on

Adding Splash Screen to Trusted Web Activity with Android’s FileProvider

⚠️ THIS ARTICLE IS MORE THAN 1 YEAR OLD.
Please refer to this article on how to add splash screen to Trusted Web Activities.


Learn how you can add a splash screen to your Trusted Web Activity (TWA) with Android’s FileProvider.

What is Trusted Web Activity?

Trusted Web Activities (TWA) are a new way to integrate your web-app content such as your PWA with your Android app using a protocol based on Custom Tabs.


⚠️ This method is NOT production ready, and it only works on Chrome 75+. You have been warned!️ ️️⚠️


Step 1: Add Logo

Add your app logo to the drawable folder (using Asset Studio). In this case, I set the logo size to 96dp and named it ic_splash.

drawable/ic_splash

Step 2: Create an XML file

Create a new XML file in the XML resources folder. In this case, I’m calling it file_path.xml.

Adding

Adding "file_path.xml"

Then, add the following code to the XML file you just created:

Step 3: Update AndroidManifest.xml

Update your AndroidManifest.xml file by adding a new <meta-data> and <provider>:

AndroidManifest.xml

AndroidManifest.xml

Step 4: Update the Trusted Web Activity Library

Make sure you are using the latest build of Chrome Tabs Client (or at least build 3679335).

Check the latest build here: https://chromium.googlesource.com/custom-tabs-client/+log

You can update the library in the build.gradle file:

build.gradle

Step 5: Party Time 🎉

Now you should see your app logo showing in the splash screen. Yay!

Remote for Slides Lite Splash Screen

Remote for Slides Lite Splash Screen

CSS Tricks has an awesome article about how you can implement Trusted Web Activity to your Progressive Web App, you can learn more here:

https://css-tricks.com/how-to-get-a-progressive-web-app-into-the-google-play-store/


Note: This method is based on the doc from the custom-tabs-client library:

https://chromium.googlesource.com/custom-tabs-client/+/refs/heads/master/customtabs/src/android/support/customtabs/trusted/LauncherActivity.java

Top comments (7)

Collapse
 
jacobdb profile image
Jacob Bearce

How would I change the background color for the splash screen?

Collapse
 
masoudmsk profile image
Masoud Salehi

Add this to the manifest after SPLASH_IMAGE_DRAWABLE:

<meta-data
    android:name="android.support.customtabs.trusted.SPLASH_SCREEN_BACKGROUND_COLOR"
    android:resource="@color/backgroundColor" />
Enter fullscreen mode Exit fullscreen mode
Collapse
 
1998chun profile image
1998chun

Do anyone knows how?

Collapse
 
wesleywaihk profile image
wesleywaihk • Edited

I do not succeed, the app keeps force quitting on all of my devices.

It seems to be a custom-tabs-client issue.

I was using d08e93fce3 and it is fine.

but I tried 809a55c which is the latest, 700d2e1 and 3679335, all makes the app crash.

There is my code:
github.com/wesleywaihk/weschat-and...

Collapse
 
wesleywaihk profile image
wesleywaihk

in the provider tag, android.support.v4.content.FileProvider is now deprecated.

We may use androidx.core.content.FileProvider instead

ref: stackoverflow.com/questions/485342...

Collapse
 
revaaasai profile image
Revaaasai

It is working with white background with logo .I need to change the white background .How to change the white background in the splash screen?

Collapse
 
masoudmsk profile image
Masoud Salehi

Add this to the manifest after SPLASH_IMAGE_DRAWABLE:

<meta-data
    android:name="android.support.customtabs.trusted.SPLASH_SCREEN_BACKGROUND_COLOR"
    android:resource="@color/backgroundColor" />
Enter fullscreen mode Exit fullscreen mode