We are trying to migrate (because of a crash, that seem related to this - Here's another question for my crash.
Our existing Splash-Screen which also serves as routing.
Previously we used a full screen vector as a theme of splash screen, after following the documentation -
https://developer.android.com/develop/ui/views/launch/splash-screen/migrate#prevent_the_custom_activity_from_displaying
and updated the theme like this -
<style name="Theme.App.Starting" parent="Theme.SplashScreen">
<item name="windowSplashScreenAnimatedIcon">#drawable/ic_launcher</item>
<item name="background">#drawable/background_splash</item>
<item name="postSplashScreenTheme">#style/AppTheme</item>
</style>
background_splash is the drawable image that we want to have in full screen there. Its not working?
Splash screen is looking distorted, the windowSplashScreenAnimatedIcon is cropped and put into a small circle in the center.
Anyone has idea how to achieve this correctly? Thank you for your time!
Is it possible to provide a full screen drawable to splash in accordance with the new splash API for android 12+ with backward compatibility?
Searched for a solution working with Android-12 as well as with older versions and didn't like to create multiple resolution images. Android-12 changed the behaviour of the splash screen (migration guide) but this resulted in a well sized icon either for Android-12 or for earlier versions, but not for both.
Finally I ended up with a trick, to add two splash screen xml files, one for version 12 and higher, the other for all other versions. Give the item (parent of the image) a size in dp, and the bitmap a gravity="fill". The size differs for both splash_screen xml, I don't know if there is an official solution to this problem.
resources/values/styles.xml
<style name="Theme.App.Starting" parent="Theme.SplashScreen">
<item name="windowSplashScreenBackground">#387aa8</item>
<item name="windowSplashScreenAnimatedIcon">#drawable/splash_screen</item>
<item name="postSplashScreenTheme">#style/MainTheme</item>
</style>
resources/drawable/splash_screen.xml
<?xml version="1.0" encoding="utf-8" ?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:width="224dp" android:height="224dp" android:gravity="center">
<bitmap
android:src="#drawable/silent_notes_256"
android:gravity="fill"/>
</item>
</layer-list>
resources/drawable-v31/splash_screen.xml (Android-12 and higher)
<?xml version="1.0" encoding="utf-8" ?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:width="128dp" android:height="128dp" android:gravity="center">
<bitmap
android:src="#drawable/silent_notes_256"
android:gravity="fill"/>
</item>
</layer-list>
While I did tests with different resolutions, I don't know whether this works for all screen size/resolution combinations.
Related
I am trying to fit a drawable (VectorDrawable/BitmapDrawable) that got a 1:1 aspect ratio on first frame of Android.
I tried the following attempt without success:
styles.xml
<style name="LaunchTheme" parent="#android:style/Theme.Light.NoTitleBar">
<item name="android:windowBackground">#drawable/launch_background</item>
</style>
launch_background.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#android:color/white" />
<item android:drawable="#drawable/splashscreen" android:gravity="top|bottom"/>
</layer-list>
This does not maintain aspect ratio, same behavior as top|bottom|right|left as far as I can tell.
I desired this output:
Any ideas how to achieve this?
Try using android:gravity="center|bottom|clip_vertical"
The only downside is that if there is not enough space, your image won't be fully shown, but it will be clipped, I couldn't find an way to do this directly from a drawable. But from the tests I did it works pretty well, and it doesn't clip that much of the image. You could play more with the gravity options.
Another way will be to just create an layout, where you will use an ImageView and set the scaleType to fitCenter.
I have a 3 devices, they run from android 10,11 and 12. But the device on android 12 seems to have an issue with windowBackground. I have used the windowBackground as a splashscreen/loadingscreen. This appears to work fine on android 10 and 11 but on android 12 it seems to pick a different image, which I think is my applogo image.
This is the splash_image
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/papaya_orange"/>
<item android:drawable="#drawable/logo_transparant_white_loading_screen"
android:width="250dp"
android:height="95dp"
android:gravity="center" />
</layer-list>
In my styles.xml I have made this:
<style name="LoadingScreen" parent="DarkMode">
<item name="android:windowBackground">#drawable/splash_image</item>
<item name="android:statusBarColor">#color/papaya_orange</item>
</style>
In the manifest I have set the theme to android:theme="#style/LoadingScreen" >
And in my mainactivity I already declared that It switches themes, so nothing wrong there.
So this should work fine, but for some odd reason it doesn't work on android 12 like how it works on 10 and 11. Any guesses on why this doesn't work?
The problem is Android 12 migrations for Splash Screen. Check migration official documentation.
I am trying to create a splash screen using this tutorial by using an additional theme.
This is my launcher theme in styles.xml:
<style name="AppTheme.Launcher" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<item name="android:windowBackground">#drawable/ic_launch_screen</item>
<item name="colorPrimaryDark">#color/color_white</item>
</style>
This is the ic_launch_screen.xml file:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/color_white" />
<item>
<bitmap android:src="#drawable/ic_splash_screen" />
</item>
</layer-list>
The ic_splash_screen file is already a 9-patch file looking like this:
In the 9-patch preview in Android Studio it shows that, if stretched, the logos will not be resized and look perfectly aligned.
Yet, when I use it in this combination, the splash screen looks stretched on my Huawei and Samsung but not on the pixel 2 emulator:
Huawei Mate 10 Pro & Samsung Galaxy s9+ (they are stretched the same way):
On the emulator it looks perfect like this:
The problem is not because of the system navigation. It still looks stretched on the Huawei when I use three key navigation like in the emulator.
I have already tried playing around in the ic_launch_screen.xml by using <nine-patch> elements or the gravity:center attribute but it looks even more messed up then.
I'm not sure why 9 patch isn't scaling but I can propose an workaround. You could create 2 drawables, First one with text pass13 and other one with logo. Now you can create the folowing layer-list:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/color_white" />
<item>
<bitmap
android:gravity="center"
android:src="#drawable/drawable1" />
</item>
<item>
<bitmap
android:gravity="center|bottom"
android:src="#drawable/drawable2" />
</item>
</layer-list>
Now it should scale well.
I'm trying to use a 9-patch image as a splash screen, but I get a weird artefact when doing so.
I use the following style on the activity
<style name="AppTheme.Splash" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowBackground">#drawable/splash_screen</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowFullscreen">true</item>
</style>
This references the following drawable
<?xml version="1.0" encoding="UTF-8" ?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<color android:color="#color/splash_background" />
</item>
<item>
<nine-patch
android:src="#drawable/test_splash"
android:tileMode="disabled"
android:gravity="center" />
</item>
</layer-list>
The 9-patch image has two scalable vertical regions---above and below "Middle". There is no horizontal scaling set.
What this ends up giving me is
Where is that black bar 3/4 of the way down coming from?
I had the same issue. After scrubbing thru all of my splash.9.png files looking for the problem, I retreated and tried one that worked fine in another app. It produced the same artifact.
It seems the issue is with the Theme.AppCompat.Light.NoActionBar. Try this instead:
<style name="splashscreen" parent="android:Theme">
It doesn't look exactly the same around the title bar and such, but it looks like a splash screen.
I don't use Xamarin (I use Titanium), but I had this exact problem when I didn't provide a padding box (the black pixels on the right and bottom). I fixed it by filling the padding lines with black.
Based on this tutorial and this answer, which also references this other tutorial, using a theme's android:windowBackground along with a <layer-list/> appears to be the most approved method of creating an Android Splash Screen
Using this technique centering a logo on screen is easy; however, I want to position graphics along the top or bottom of the screen. I've run into problems because, as seen in the screenshot below, the windowBackground appears to be drawn behind both the Status Bar at the top of the screen and the Navigation Bar at the bottom thus making the graphics appear cut-off
Question: Is it possible to instruct the windowBackground to position itself below the Status Bar and above the Navigation Bar? If not, using the windowBackground Splash Screen technique is it possible to create a splash screen that isn't covered by the Status Bar or Navigation Bar?
To reproduce the problem, create a new Android Studio project which will get you the ic_launcher drawable and follow one of the tutorials linked above but use the following layer-list drawable
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:opacity="opaque">
<item android:drawable="#000000"/>
<item>
<bitmap
android:gravity="left|top"
android:src="#drawable/ic_launcher"/>
</item>
<item>
<bitmap
android:gravity="center"
android:src="#drawable/ic_launcher"/>
</item>
<item>
<bitmap
android:gravity="bottom"
android:src="#drawable/ic_launcher"/>
</item>
</layer-list>
You may set windowDrawsSystemBarBackgrounds to false in your theme for lollipop and higher versions.
Example:
res/values-v21/styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="Theme.Splash">
<item name="android:windowBackground">#drawable/splash</item>
<item name="android:windowDrawsSystemBarBackgrounds">false</item>
</style>
</resources>