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>
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 ;) )
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With