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.
Related
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.
First of all ... I apologize for my English.
I am trying to add a background to the notification panel, the issue is that I have already achieved it by modifying the file qs_background_primary.xml located in SystemUI/res/drawable
This is the code I am using:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#android:color/black"/> <!-- the image is very small, so add a black background -->
<item>
<bitmap android:scaleType="fitXY" android:src="#drawable/background_bg" android:gravity="center|bottom|clip_vertical" xmlns:android="http://schemas.android.com/apk/res/android" />
</item>
</layer-list>
Once the background with image and compilation is ready, one problem bothers me and it is that when I slide the navigation bar the image looks horribly, as if the size started from 0 to its original size once it was completely slid.
This is what the size looks like:
This is what the full size looks like:
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>
I have just begun creating Android apps using Eclipse and the ADT.
I have got the basic functionality working in a demo app, and would like to create a button that looks like a search field (there is no search functionality built in, I just want the user to press it and start a new activity).
My question is: what is the best practice for creating a button like the above (ignoring the 1px dark grey stroke around the outside)?
I have got as far as
Create the button in activity_main.xml
<Button
android:id="#+id/inputSearch"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:hint="#string/hint_search"
android:background="#drawable/input_search"
style="#style/input_search"
android:onClick="findProducts" >
</Button>
Create a few styles
<style name="input_search" parent="#android:style/TextAppearance.Medium">
<item name="android:textColor">#color/light_grey</item>
<item name="android:background">#color/white</item>
</style>
Create the input_search_background.xml which has a light grey stroke, rounded corners
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<stroke
android:width="#dimen/stroke_width" android:color="#color/light_grey" />
<corners
android:radius="#dimen/corner_radius" />
<solid
android:color="#color/white" />
</shape>
Create input_search.xml for the states.
<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/input_search_background"
android:state_pressed="true" />
<item android:drawable="#drawable/input_search_background"
android:state_focused="true" />
<item android:drawable="#drawable/input_search_background" />
</selector>
I'm not sure how to create the orange block on the right. Should I define a shape which is orange and use a transparent png for the magnifying glass or should the png be the orange block with the magnifying glass all in one?
What tools do you use for creating the assets?
How do I know how big to create them?
I'll appreciate any words of wisdom or links that could help.
Thanks,
Andrew
You can simply use a 9 patch.
You can find a similar one, in your sdk platform graphics:
In Windows (install path may change),
C:\Program Files\adt-bundle-windows-x86_64-20130522\sdk\platforms\android-8\data\res\drawable-mdpi
You can find this:
With some (very little) work, you can make the perfect image that matches your needs.
Just add it as the background of your Button (I'd use a TextView, but it's a matter of tastes) and enjoy.
You see, no need for a custom style nor an extra xml drawable.