Image in splash screen is repeated - android

I'm intending to show a very simple splash screen using a theme and an #drawable xml for the background.
Styles.xml
<style name="SplashTheme" parent="Theme.AppCompat.NoActionBar">
<item name="android:windowBackground">#color/white</item>
<item name="android:background">#drawable/splashx</item>
</style>
Splashx.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<bitmap
android:gravity="center"
android:src="#drawable/splash"/>
</item>
</layer-list>
For some reason, the top few pixels are repeated when the splash screen is displayed, like so:
The actual image that I used obviously doesn't have this distortion on top (the little triangle on top which is essentially the hand and the club repeated from below). I've tried it with a few other images, too. Same mysteria.
Any ideas?

Why don't you try shifting your image from drawable to the mipmap folder? and then adding the mipmap image as a bitmap to your layer list.
<?xml version="1.0" encoding="utf-8"?>
<item
android:drawable="#color/your_background_color"/>
<item>
<bitmap
android:gravity="center"
android:src="#mipmap/your_image"/>
</item>
See the link here: https://www.bignerdranch.com/blog/splash-screens-the-right-way/

Related

Add full active drop-shadow from figma for any icon

I want add drop-shadow in drawables for use them on any android icons (navbars, custom views, buttons). Then should get something like this. Trying with ninepatch and layer-list or just png. It works, but there is a problem: due to the shadow, paddings of drawable increases, as a result, main picture becomes smaller. And it becomes impossible to use such a layers-list in selector with other images for example. What can do about it?
Okay, I just used shadow png bitmap as background for vector image like this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/ic_vector_active_with_sunshine" android:state_checked="true" />
<item android:drawable="#drawable/ic_vector_inactive" android:state_checked="false" />
</selector>
Where ic_vector_active_with_sunshine:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/drop_shadow" />
<item android:drawable="#drawable/ic_vector" />
</layer-list>

How can I add the app name in a splash screen based on a layer-list?

I want to create a splash screen containing the app name. How can I add text to a layer-list?
This is my splash screen file at the moment:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#android:color/white"
android:gravity="fill_horizontal|fill_vertical" />
<item> <!--APP NAME--></item>
</layer-list>
I already tryed to create a png file with the app name but this caused some issues on different screen sizes.
I already tryed to create a png file with the text but it does not work for all screen sizes.
You can use a vector drawable (app_logo.xml) with your text as window background:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque">
<item android:drawable="#android:color/white"/>
<item
android:drawable="#drawable/app_logo"
android:gravity="center" />
</layer-list>
Setting theme:
<style name="NewSplashTheme" parent="Theme.AppCompat.NoActionBar">
<item name="android:windowBackground">#drawable/background_splash</item>
</style>
This will work correctly on API level >= 23, you should provide an alternative version of background_splash with raster graphics for previous API levels (see #Venky's answer).
You can add an image in layer list
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#color/gray"/>
<item>
<bitmap
android:gravity="center"
android:src="#mipmap/ic_launcher"/>
</item>
</layer-list>
In theme.xml
<style name="NewSplashTheme" parent="Theme.AppCompat.NoActionBar">
<item name="android:windowBackground">#drawable/background_splash</item>
</style>
Don't forget to create an image with App Name

Android: how to create splash screen with text

How can I add some text to splash screen? My splash screen isn't a separate activity and I don't want to make it as standard activity.
I created it by following this article:
https://android.jlelse.eu/launch-screen-in-android-the-right-way-aca7e8c31f52
Is it possible to add some text?
You can create a new layout for your splash screen. But if you still don't want to create it then there is a nasty hack to achieve it.
Open Paint write your text and save the file as png image
Import png file in drawables and add it in <layer-list> as an item below or above your logo/icon
<item android:bottom="50dp"> set position as you want
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:opacity="opaque">
<item android:drawable="#color/colorPrimary"/>
<item>
<bitmap
android:gravity="center"
android:src="#drawable/icon"/>
</item>
<item android:bottom="50dp">
<bitmap
android:gravity="center"
android:src="#drawable/myTextImage"/>
</item>
</layer-list>

React-Native: Splash screen with resizable image (logo)

I am trying to make a simple splash screen where im setting the background color and add a image in the center, my problem is that the image its going out of the bounds and I am trying to find a way how to make it "responsive". Is there a good way how to do this with react-native/java?
What I have now:
<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/green" />
<item>
<bitmap android:src="#drawable/logo"
android:gravity="center"/>
</item>
</layer-list>
<style name="SplashTheme" parent="AppTheme">
<item name="android:windowBackground">#drawable/splash_screen</item>
</style>
You have to make different layouts for different devices.
I hope these Links will help you.
https://developer.android.com/training/multiscreen/screendensities.html
http://www.android-examples.com/support-multiple-screen-sizes-in-android-responsive-example/

Android Activity Background Image

How do I use a background image in an Activity theme/style?
If I do this using a colour:
<style name="CustomTheme" parent="android:Theme.Light">
<item name="android:windowBackground">#color/custom_theme_color</item>
</style>
It works correctly, but if I replace the line with:
<item name="android:windowBackground">#drawable/splash_image</item>
The image displays correctly, but all the content is squished into a tiny block in the top left corner of the screen. The shadow underneath the status bar is also cut off or messed.
I am using Mono for Android and the image is a valid nine-patch png.
I also don't use themes, so in the layout of the activity I would add
android:background="#drawable/splash_image"
My solution was change the android:windowBackground to android:background.
<?xml version="1.0" encoding="UTF-8" ?>
<resources>
<style name="Theme.Splash" parent="android:Theme">
<item name="android:background">#drawable/splash</item>
<item name="android:windowNoTitle">true</item>
</style>
</resources>
I don't use themes or anything, so I'm not sure how that will affect this, but I set my background like this:
getWindow().setBackgroundDrawableResource(R.drawable.background_image);
in onCreate
I needed to have a splash image that looked like my app's initial activity and ran into same issue. I had good luck with windowContentOverlay instead of windowBackground. The drawable appeared below the status bar in the exact same position as a real layout would. It has worked on Android 2.2, Android 3.0, and Android 4.1.
This is my style:
<style name="SplashTheme" parent="android:style/Theme.Light">
<item name="android:windowNoTitle">true</item>
<item name="android:windowContentOverlay">#drawable/splash</item>
</style>
My splash.xml drawable mimics my user interface header using layer-list:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!--- Background; tile is broken on Android 2.2 so just have super wide background that will get clipped -->
<item>
<bitmap android:gravity="top|left" android:src="#drawable/splash_background" />
</item>
<!--- Icon left justified -->
<item>
<bitmap android:gravity="top|left" android:src="#drawable/header_icon" />
</item>
<!--- Buttons/etc right justified -->
<item>
<bitmap android:gravity="top|right" android:src="#drawable/splash_buttons" />
</item>
</layer-list>
I believe ActionBar also has some built-in ways to handle this, if your app uses it. The MonoIO sample seems to have such a launch image.
You can use the android:gravity="fill" instead of android:gravity="center",
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:opacity="translucent">
<item>
<bitmap
android:gravity="fill"
android:src="#drawable/splash_screen" />
</item>
</layer-list>
Note: It will depend on your shape and size of the splash image. In my case by the use of android:gravity="fill" my splash is looking perfect.
You can use the different attribute of gravity on the type of your splash image.

Categories

Resources