I have a JPEG photo which I want to use to as a background for one of the screens.
I want the behaviour to be simlar to the css backgroundSize: cover property. (Play with the following tool to see what I mean: https://davidwalsh.name/demo/background-size.html)
For iPhone, this issue is fairly easy, as you can literally have several different versions of the same image depending which iPhone the app is being installed on.
For Android, this is much more difficult as they have various different aspect ratios and resolutions.
Therefore my question is, how can I specify an image that covers the entire screen.
You can always fake this by adding the imageview inside a View and calculate the proper height/width you need to cover the screen (get the shortest side and scale it up and multiply the other side by the original ratio).
You could also use https://github.com/AndreaVitale/imageview that supports a cover mode
For Android, My suggestion is to use 9-patch Image instead of normal image. It will stretch it self to entire Screen, if you placed image as background
of Window it self as well as worked for ImageView perfectly.
Thank you.
Related
I created an image to use for an android splash screen and it displays properly on my phone however when I open the app on a phone with a larger screen it pixelates. So I was wonder if I should create more than one image and if so what sizes should I set for other images because I know I can't use the same sizes as I used for the app icon?
If the images are pixelated
then you need to add larger images for each screen size under your
res folder. sizes depends on your target
or
scale the images. to be safe, make it bigger
it might help you: am I supposed to make images larger for tablets, or same size as handset?
you could probably use draw-9-patch to state which area of the picture can be extended.
Google draw-9-patch
I worked with two approaches so far:
Screen composition
One approach can be using a composition of brackground and a logo. You can have the logo as big as you need (for high resolution screens) and the background as a repeatable texture (it all depends on your design approach) or a gradient or other composition (less prone to pixelation errors).
As big as possible approach
If one image is your approach, you should do a research to know the currently most used and biggest android screen used (https://developer.android.com/about/dashboards/index.html). Knowing that one, you can design your image for that [high] resolution and set the scaleType as CENTER_CROP. With that, you will ensure that the image will be centered, inside the screen, keeping aspect ratio, and at its highest resolution [keep an eye about logos/graphics positions if you want to be sure that they remain visible even in thin screens).
For icons, the best way is Draw 9-patch
Otherwise, you need to scale the images into drawable-xx (res directory), here the explanation
I hired a designer to help me redesign the UI for my Android app. For each Activity he gave me an image for the background, which includes any static content like fancy frames for text content; plus images for the buttons, which must fit in to the background image in exact places, to fit into the frames in the background image.
However, since Android devices have different screen sizes and aspect ratios, it's easy to fit the background image by itself with android:scaleType="centerInside", but how can I get all the other images to fit in with background exactly, to the pixel? If they didn't have to fit in with the background, I would just set the exact width and height for each ImageButton, but depending on how the background scales (based on the screen size and ratio) they might end up not aligned correctly.
Thank you very much in advance.
Update:
Is there some way I can have an entire view (e.g. a RelativeLayout) scale inside the screen, like the way the image scales inside the ImageView with scaleType="centerInside"? If so, I would be able to set the RelativeLayout's size to the same as the background image, and put all of the other buttons / images in their places relative to the background image, and then just have the whole thing (the RelativeLayout containing all the other views) center inside the phone's screen.
Your approach is wrong (or at least bad), because android devices offer screens not only with different sizes but also with different densities. What you shall read now is Designing for Multiple Screens first. Then understand that non scallable bitmaped UI will rather not work as you imagine. You need to support screen sizes which means your UI elements (like i.e. buttons, lists, headers etc) shall scale. There's lot of possibilities to deal with this, one is using 9-patch bitmaps (randomly chosen tutorial on the 9-patch).
Also, please read this article: Supporting Multiple Screens
When desining UI it suffices to assume you design for mdpi density. Once your layout is done you create drawables for i.e. mdpi and hdpi (and put under the same names into res/drawable-mdpi and res/drawable-hdpi respecitvely). Layout files remains unchaged but framework would automatically pick right asset so your UI will look sharp as long as you provided drawables for that density. Please see Providing Resources article as well.
I want my app to run on a wide variety of android devices in portrait only. I have a whole-screen background image that includes borders for other components. I want to place items like listviews/sponsor ads accurately within those borders... overlay them on top of the background in exactly the right place. Is using Framelayout the best/easiest way to do this? How do I make sure I get the listviews or sponsor ads in exactly the right place, and exactly the right size given that the background will be stretched to different dimensions for different devices? I've considered cutting up the background image instead but that seems like more work. What's the best approach? Thanks for any thoughts!
Unfortunately, this scheme is never going to work consistently across all screen sizes. If you want borders, you need to create 9-patch graphics out of those and assigne them as teh background to the UI item.
I have an iOS app that uses unique textured backgrounds (think of a game title screen or something) on each of the screens that I am trying to port to Android. On iOS they knew the resolutions and just designed the backgrounds around those. Obviously that isn't possible on Android.
What is the best way to put a textured/non-repeatable background into Android that works on various screen sizes and aspect ratios?
The solutions I have thought of so far are:
Fit the shortest dimension and allow the image to go off the edge of the screen for the larger dimension
Make the background image large and center it, then make it stretch out beyond the edges when the resolution is smaller than the image
Stretch the image to just fit (this is ugly and I'd like to avoid it)
Create a different version of the image for each resolution. (This seems way beyond the scope of what is possible for this project.)
As far as I can tell in Android, 1. and 2. aren't possible out of the box because background images set the size of the view to match their size (you can't tell it to just extend beyond the edges, please correct me if I am wrong).
What solutions would you use in this situation?
Use an (match_parent) ImageView to simulate back ground image. (By adjusting the scale type of imageview you can get the result of point 1,2)
http://developer.android.com/reference/android/widget/ImageView.ScaleType.html
Use 9-patch image. You can specify which part of your image can be stretched. For your case I suggest adding a small "margin" to your image, and make it stretchable using 9-patch. Only the margin will be stretched, maintaining the aspect ratio of your image.
android developer 9-patch
Create a different version of the image for each resolution.
As you're probably aware, Android can run on a wide variety of devices with varying resolutions and screen densities. To be fully compatible with all of them takes a bit of graphics work; you need resources for each possible screen density (and in this case, resolution).
For full details, see Supporting Multiple Screens in the Android developer documentation.
Unless something has gone seriously wrong in your development process, you should have the original files (e.g. .psd) to work with when creating these resources.
I read a topic about multiple screen support, but I don't understand why I need a different picture for every screen size if I can stretch image by setting
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/bk"
for every screen.
You don't have to have a different image for each screen size. You certainly can just use fill_parent and just use the same image. The only issue is that it usually won't look as good. In fact, in some cases it will look absolutely terrible. Assuming that you're fine with your image being stretched though, you can just use one image.
If your background image is not a plain image, and has a lot of detail, then it renders better if it is the exact size needed. Shrinking a large image to small may make it look grainier than you want.
However, you can still do it. Make sure to make AVDs with different screen sizes, so you can see how it might look.