How to add branding to the bottom of the splash screen. in android

[SymntxHomendra51]

Why it is needed?

I want to add custom branding like "powered by android" on the bottom of the splash screen. Like this example image.

How can I do this with this library?

if it's not possible how facebook and Whatsapp are showing in current apps?

Possible implementation

No response

Code sample

No response

[zoontek]

It's not possible yet because the current version of this library rely on AndroidX core-splashscreen and it doesn't polyfill this for Android < 12.

But I will soon get rid of this library (which bring too much issues for my taste) and I already successfully added support for it (with Android 5.1+ compatibility 🥳)

I'm also working on new architecture, expect a first test version in ~1 or 2 weeks

[SymntxHomendra51]

thanks, is there any alternative way for react native which support this feature in all android versions?

[zoontek]

@SymntxHomendra51 Forking this module and implementing it yourself.

[SymntxHomendra51]

okay i manually tried and got some success. Here is what I've done along with package

https://developer.android.com/develop/ui/views/launch/splash-screen#set-theme from 5th point I've used windowSplashScreenBrandingImage

like this in android\app\src\main\res\values\styles.xml edited BootTheme to this: ``

and placed my generated bottom branding of size 200x80 dp in mipmap folders. added this line <item name="android:windowSplashScreenBrandingImage">@mipmap/bootsplash_branding</item>

[zoontek]

@SymntxHomendra51 Be careful, this doesn't work on Android < 12.

[SymntxHomendra51]

yes i found that problem i switched to rn splash screen package because we need that branding on bottom.

[noamyagil]

Hi Im trying to move our app from react-native-splash-screen to the boot splash however we have an issue with the bottom part for which we have another image for some text in vector/image format. Our splash background is also a gradient so to do this I tried to use it like this:

<style name="BootTheme" parent="Theme.SplashScreen">
   <item name="android:windowBackground">@drawable/splash_background</item>
    <item name="postSplashScreenTheme">@style/AppTheme</item>
</style> 

or

<style name="BootTheme" parent="Theme.SplashScreen">
    <item name="windowSplashScreenBackground">@drawable/splash_background</item>
    <item name="postSplashScreenTheme">@style/AppTheme</item>
</style>

and the bg file:

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

unfortunately nothing work.

any idea whats needed to make this work?

[zoontek]

@noamyagil Another images are not supported by Android 12+ SplashScreen API (except android:windowSplashScreenBrandingImage)

[PadovaY]

hey @zoontek thanks for this awesome lib 🙂, any estimation on a the new version you mentioned that supports branding image?

[zoontek]

@PadovaY Hey! The usual, it's not easy to find motivation to work on this on my free time. Would love a bit of support from companies that want the feature. After all, the README mentions:

This module is provided as is, I work on it in my free time.

If you or your company uses it in a production app, consider sponsoring this project 💰. You also can contact me for premium enterprise support: help with issues, prioritize bugfixes, feature requests, etc.

But you know, open source funding… 😅

[Fahad-Ali-Qureshi]

Sharing a workaround.

Make custom xml layout with including bottom center image. This will only be used for Android 11 and lower. Example xml file code:

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

    <item android:gravity="center" android:drawable="@mipmap/bootsplash_logo" />
    <item
        android:width="200dp"
        android:height="80dp"
        android:drawable="@mipmap/branding"
        android:gravity="center|bottom"
        android:bottom="60dp" />
</layer-list>

Now put this file in android\app\src\main\res\drawable folder. Then merge the two strategies of splash style only for Android 11 and lower. Means assign windowBackground as xml as well as windowSplashScreenBackground and windowSplashScreenAnimatedIcon in styles file.

Below is the sample styles.xml in android\app\src\main\res\values folder:

<resources>

    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
    </style>

  <style name="BootTheme" parent="Theme.SplashScreen">
    <item name="android:windowBackground">@drawable/launch_background</item>
    <item name="windowSplashScreenBackground">@color/bootsplash_background</item>
    <item name="windowSplashScreenAnimatedIcon">@mipmap/bootsplash_logo</item>
    <item name="postSplashScreenTheme">@style/AppTheme</item>
  </style>

</resources>

And now the styles file only for Android 12 and above in android\app\src\main\res\values-v31 folder:

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
    </style>

      <!-- BootTheme should inherit from Theme.SplashScreen -->
  <style name="BootTheme" parent="Theme.SplashScreen">
    <item name="windowSplashScreenBackground">@color/bootsplash_background</item>
    <item name="windowSplashScreenAnimatedIcon">@mipmap/bootsplash_logo</item>
    <item name="android:windowSplashScreenBrandingImage">@mipmap/branding</item>
    <item name="postSplashScreenTheme">@style/AppTheme</item>
    <item name="android:statusBarColor">@color/black</item>
    <item name="android:navigationBarColor">@color/black</item>
  </style>

</resources>

By using this merged strategy, you can display bottom branded image even on below Android 12.

(Note:) This is temporary workaround until this library release a stable version which supports adding branded image only in one file.

[zoontek]

@PadovaY @Fahad-Ali-Qureshi @noamyagil @SymntxHomendra51 Hi all 👋 The first beta of v5 is here: https://github.com/zoontek/react-native-bootsplash/pull/475

Sorry about the delay, but it was a huge release.

[zoontek]

Version 5.0.0 is available: https://github.com/zoontek/react-native-bootsplash/releases/tag/5.0.0