Centered image on windowBackground is different than on an inflated layout

Question

I tried to implement a "slash screen" and I faced an issue where the image on splashscreen is not really centered, some times it jumps up and sometimes down and sometimes it's well placed.

First of all, the issue:

So here you can see my logo, the first one to show up is the one that is in Red, it's declared like this :

background_splash.xml

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

    <!-- Logo at the center of the screen -->
    <item
        android:width="300dp"
        android:height="300dp"
        android:gravity="center">
        <bitmap android:src="@drawable/ic_launcher_sablier" />
    </item>
</layer-list>

And added like this:

styles.xml

<style name="SplashTheme" parent="AppTheme">
    <item name="android:windowBackground">@drawable/background_splash</item>
</style>

Then the view with the Blue one is shown, it's declared like this :

activity_splash.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/linearLayoutSplash"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:animateLayoutChanges="true"
    android:background="@color/colorPrimaryDark"
    android:gravity="center"
    android:orientation="vertical">

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/imageViewSplash"
        android:layout_width="300dp"
        android:layout_height="300dp"
        app:srcCompat="@drawable/ic_launcher_sablier" />

    <ProgressBar
        android:id="@+id/progressSplash"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_marginTop="12dp"
        android:indeterminateTint="@color/grey_light"
        android:visibility="gone" />

</LinearLayout>

It's just like the windowBackground is taking into consideration something else (StatusBar height, etc.) and it's not really centered on the screen.

I've tried this:

<item name="android:windowDrawsSystemBarBackgrounds">false</item>

and/or

<item name="android:windowNoTitle">true</item>

and/or

<item name="android:windowContentOverlay">@drawable/background_splash</item>

And nothing is working.

At a moment I said to myself it's ok if it's not working under api 26 so I used that :

v26/style.xml

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

    <style name="SplashTheme" parent="AppTheme">
        <item name="android:windowSplashscreenContent">@drawable/background_splash</item>
    </style>
</resources>

And same issue.

So finally I was thinking to move the inflated view up/or down instead of trying to place correctly the window background, it's not a big problem if it's not exactly centered in the screen so I tried to remove Status bar height, and it was working on some devices but not on others, and etc...

It's working on Nexus 5 with the specific v26/style.xml I shared before, so that is exactly what I want :

And what happen on my Xiaomi MI 8 for example (it also happen on a Pixel 2XL, on some Huawei,...):

So if someone have a solution to center correctly the windowBackground OR to move the inflated view accordingly, I will be happy with both !

Thx to you to help me !

EDIT 13/08:

Here the AppTheme you asked for :

<!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

Have you set gravity _center_ ? Change _GONE_ to _INVISIBLE_ for Pb — Piyush, Aug 12 '19 at 12:57
@Skyle Try to set on `LinearLayout` attribute `android:fitsSystemWindows="true"`. — mmmatey, Aug 12 '19 at 13:13
@Piyush I tried, and hide the progressBar is not a solution, cause now it jumps up instead of jumping down (cause of the size of the progressBar) — Skyle, Aug 12 '19 at 13:24
@mmmatey I tried it too, but it seems to do strictly nothing :/ — Skyle, Aug 12 '19 at 13:25
@Skyle Can you also share your "appTheme"? So we can check if problem comes from there. — mmmatey, Aug 13 '19 at 08:40
@Skyle no idea what could be possibly wrong, one thing you can try is to change parent theme in your AppTheme to "Theme.AppCompat.Light.NoActionBar". — mmmatey, Aug 13 '19 at 15:01
@mmmatey Forgot to give you an anwer: it's the same sadly :/ — Skyle, Aug 17 '19 at 13:24
@Skyle If nothing helps, then set your imageView position programatically in "SplashActivity" set your imageView to center and trigger an animation afterwards, consider using **TransitionManager.beginDelayedTransition**. — mmmatey, Aug 17 '19 at 22:46

Skyle · Accepted Answer · 2020-12-01T15:28:36.337

So, after doing a lot of research, I managed to make it work for API 26 and above.

Let's recap, if you just want to make sure to display an image when launching the application to avoid "the white screen loading", just use:

styles.xml

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="SplashTheme" parent="AppTheme">
        <item name="android:windowBackground">@drawable/background_splash</item>
    </style>
</resources>

And set it like this:

AndroidManifest.xml

<activity
    android:name=".ui.splash.ActivitySplash"
    android:theme="@style/SplashTheme">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>

Now if you want to have a flow of flowing screens by displaying an animated progressbar for example, you can do it but only for API 26 and above like this:

v26/style.xml

<resources>
    <style name="SplashTheme" parent="AppTheme">
        <item name="android:windowSplashscreenContent">@drawable/background_splash</item>
        <item name="android:windowOverscan">true</item>
    </style>
</resources>

The solution is to use android:windowOverscan, I don't really know why, I tried to search for answers in doc, but only thing I found was :

windowOverscan

Flag indicating whether this window should extend into overscan region. Corresponds to WindowManager.LayoutParams.FLAG_LAYOUT_IN_OVERSCAN.

May be a boolean value, such as "true" or "false".

To make it work in-out of API 26, maybe there are some calculations to be done with the help of this (I admit I have not had the time or the patience to spend more time in solve this problem):

https://developer.android.com/reference/androidx/core/view/WindowInsetsCompat

Enjoy.

(If someone have a better answer to this question, I can check his answer instead of mine ;) )

Centered image on windowBackground is different than on an inflated layout

1 Answers1