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.
Related
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
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/
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/
I am trying to implement splash screen without any extra activities, using theme call in the manifest file's <activity/> tag.
In my styles.xml
<style name="splashTheme" parent="AppTheme">
<item name="android:windowBackground">#drawable/splash</item>
</style>
here the drawable file splash.xml uses layer-list
How do I add text to this layer list?
One way to add Texts in your drawable layer-list is by creating a png file of the text and adding it using bitmap. Here is one example of it.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#drawable/background"/>
<item android:bottom="150dp">
<bitmap
android:gravity="center"
android:src="#drawable/logo"/>
</item>
<item android:top="60dp">
<bitmap
android:gravity="center"
android:tint="#android:color/white"
android:src="#drawable/text"/>
</item>
</layer-list>
I have the following style in my styles.xml that a toggle button is using. However, i want the toggle button to fill_parent but not stretch the image. How can i tell it to center this background image and not stretch it? I'm trying to increase the area the user can click on.
Toggle:
<ToggleButton
android:id="#+id/OtherToggle"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
style="#style/OtherToggle" />
Style:
<style name="OtherToggle">
<item name="android:textOn">""</item>
<item name="android:textOff">""</item>
<item name="android:disabledAlpha">?android:attr/disabledAlpha</item>
<item name="android:background">#drawable/other_toggle_bg</item>
</style>
I assume you mean that you do want to stretch the image, but you want to keep the aspect ratio unchanged?
If so, try adding this to your style:
<item name="android:scaleType">centerInside</item>
See here for the other possibilities if centerInside does not do what you want.
Maybe you can use layer-list as a background drawable for ToggleButton? Create the following xml file and use it in android:background attribute:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+android:id/background"
android:drawable="#android:color/transparent" />
<item>
<bitmap android:src="#drawable/other_toggle_bg"
android:gravity="center" />
</item>
</layer-list>