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.
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.
In my Splash Screen, I have an image that spreads all over the screen and because of this, the image is not looking good - like it got stretched.
I wanted to fix this by adding "android:height" attribute to the Splash Screen style and change the image height but the image remains stretched.
Apparently, the android:height attribute is affecting all of the views that inside the layout that related to the Splash Screen
This is my style for the splash screen:
<style name="splashScreenTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowBackground">#mipmap/app_icon</item>
<item name="android:height">100dp</item>
</style>
Any ideas on why android:height affect the layout views and not the Splash Screen image?
note:
I saw this question talking about different images for different screen sizes, but the difference is that I don't want the image to spread all over the screen.
You using <item name="android:height">100dp</item> for root view of the Activity. Its not instance of View class, it smth else. And you cant set height for it, Activity should match available area.
To fix stretched image, try this. Set background not a bitmap, but the drawable
<style name="splashScreenTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowBackground">#drawable/shape_background_splash</item>
</style>
and create this drawable
<?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>
<bitmap
android:gravity="center"
android:src="#mipmap/app_icon"/>
</item>
</layer-list>
if you have a bitmap for all scales it should looks good
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.
I am creating a menu in an Android app with several list items and corresponding icons. The problem that I'm having is that the icons are being stretched beyond the image size for some reason. I have created a menu like this before without such a problem, and I essentially copied the code over to this new project, primarily only changing the image names and string names.
Here is the code from the menu layout for a single list item:
<TextView
android:id="#+id/listItemCardTransactions"
style="#style/NavigationMenuItem"
android:drawableLeft="#drawable/ic_card_transaction_menu_icon_normal"
android:text="#string/card_transactions" />
Here is the NavigationMenuItem style:
<style name="NavigationMenuItem">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:paddingTop">#dimen/menu_list_item_padding</item>
<item name="android:paddingBottom">#dimen/menu_list_item_padding</item>
<item name="android:paddingLeft">#dimen/menu_list_item_padding</item>
<item name="android:drawablePadding">#dimen/menu_list_item_left_padding</item>
<item name="android:gravity">center_vertical</item>
<item name="android:clickable">true</item>
<item name="android:background">#drawable/selector_navigation_item</item>
<item name="android:textSize">#dimen/text_size_menu_item</item>
</style>
Here are the dimensions:
<dimen name="text_size_menu_item">18sp</dimen>
<dimen name="menu_list_item_padding">6dip</dimen>
<dimen name="menu_list_item_left_padding">12dip</dimen>
And here is what the menu looks like right now (I know there are several other problems but those aren't my concern right now). You can see the stretching problem best when you drag-and-drop the image to get the full view:
And what the icon is supposed to look like (this one is grey since I wasn't sure how to easily make the white one visible on a white background):
Anyone know what might be causing the image to stretch past its dimensions like this?
I would follow Barry's advise in the comments, ie use an ImageView + TextView inside a LinearLayout for each item. However, to solve the "the height of the list item is smaller", you could try adding the following attribute to the ImageView:
android:adjustViewBounds="true"
If I'm not mistaken, this should effectively make sure that the view bounds is actually based on the content of the image, and not the aspect ratio (ie, it won't change the height beyond the maximum height of the image itself due to "scaling").
Hope that helps (and also makes a bit sense).
I have created a sprite sheet (single image that contains multiple images) with 4 different icons. I would like to create a layer-list that uses different parts of the images to make a single image, for example:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/spritesheet"/>
<item android:drawable="#drawable/spritesheet"/>
<item android:drawable="#drawable/spritesheet"/>
<item android:drawable="#drawable/spritesheet"/>
</layer-list>
For example the sprite sheet would look something like this:
and I would like the final result to look like this:
I have tried the different options that are available here
however I can't find a solution.
Why don't you just use the parts of the picture?
#drawable/layers.xml, for example:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/part1"/>
<item android:drawable="#drawable/part2"/>
<item android:drawable="#drawable/part3"/>
<item android:drawable="#drawable/part4"/>
</layer-list>
And if the full picture is needed, you can use a fifth (the full) picture, or create it from the parts in a RelativeLayout thus it remains the app light-weight.