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
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 added a splash screen to my Android app by using an XML drawable as a window background inside the theme.
<style name="SplashTheme" parent="Theme.AppCompat.NoActionBar">
<item name="android:windowBackground">#drawable/splash_screen_drawable</item>
</style>
Here is the code for the drawable:
<item
android:drawable="#color/white"/>
<item>
<bitmap
android:gravity="center"
android:src="#drawable/splash_screen_icon"/>
</item>
I need the splash screen to continuously be shown even after the second activity was loaded because it first needs to load some data from firebase. That's why I added the same drawable to the parent view of the second activity.
The problem I face is that the icon on the splash screen is aligned slightly higher than in the second activity, even though I used:
android:fitsSystemWindows="true">
Is there an easy way to fix this problem?
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).
What I need to do is have the background image just fill up the natural size of the button, as when no background is specified and the default grey background image is shown. But instead, my button scales up to the size of the background image rather than the text.
There was a previous question, but nobody had a solution.
The button:
<Button
android:id="#+id/morebtn"
style="#style/CustomButton"
android:text="More" />
I have this custom button style (greybutton is a 9-patch):
<resources>
<style name="CustomButton" parent="#android:style/TextAppearance">
<item name="android:textColor">#FFFFFF</item>
<item name="android:layout_marginLeft">10dip</item>
<item name="android:layout_marginRight">10dip</item>
<item name="android:layout_marginBottom">10dip</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_centerInParent">true</item>
<item name="android:background">#drawable/greybutton</item>
<item name="android:textSize">20sp</item>
</style>
</resources>
Right now it fills up the screen widthwise, despite being told to wrap_content. When I remove android:background from the Button style, the button shrinks down to wrap the text as expected.
Does anyone see why my background image isn't behaving like the default Button background?
Why don't you use ImageButton instead:
<ImageButton android:src="#drawable/greybutton"
android:scaleType="fitCenter" android:layout_width="wrap_content"
android:layout_height="wrap_content" />
then you can adjust the scaling with the scaleType attribute.
The only downside is you can't set any text.
Damnit. I had an hdpi drawable that hadn't been converted to 9patch, and for some reason that was getting applied instead of the one in the mdpi drawables folder even on my mdpi screen. The background scaling actually does work as expected after all. Sorry!
(So if you're browsing this question with a similar problem, check your drawables folder to make sure you're drawing what you think you are. Also: may wish to be sure the content boundaries in your nine-patch are of the appropriate size. Note that they aren't the same as the stretchable boundaries.)
You could try hard coding the height and width of the buttons using dip. That will be an issue if you need the Text on the buttons to change but it should work to restrain the button from expanding to the size of the image. Of course a large image will make the button larger.. the width / height is wrap_content, and the image is clearly part of the content... try hardcoding width / height parameters.
Add these two items to your CustomButton style
<item name="android:minWidth">0dp</item>
<item name="android:minHeight">0dp</item>