Develop Reference

Xamarin, Android: Lock Aspect Ratio to 16:9

We are working on an app that mainly uses either Framelayouts or Linearlayouts.
In our app, we provide 5 different folders with drawables, from mdpi to xxxhdpi.
Working with weights or DisplayDimensions made our app look the exact same on basically every smartphone device.
Every smartphone device, but one. The Samsung S8.
The problem is as seen below:
This is the main menu on almost any other device (S3, S4, S5, S6 -Edge, S7 - Edge)
This right here, is a screenshot of the mainmenu on the S8:
.
Removing the bottom buttons and displaying the app in fullscreen makes this even worse!
So what is going on here?
Simple - the S8 uses the same width (1440px) as the S7 for instance, but yet its screen is higher. Increasing the screen height without the width changes the aspect ratio.
While most smartphones use a ratio of 16:9, the S8 is somewhere at 20.5:9 I believe. Ergo: The screen DO NOT look the way they are supposed to.
Now theres gotta be a solution to that, which won't have us redisign almost every activity to ALSO fit the s8.
What optins are there?
Is there maybe an option in VISUAL STUDIO, to "lock" the aspect ratio to 16:9 and display maybe a black bar on top instead of streching the layout?
I hope you guys can help us! That'd be great!
Thank you!
Btw: I noticed that the apps that we made in unity which are usually games DO look the same. There the aspect ratio is maintained and a black bar is shown on the sides. This I hope, is possible for Visual Studio?

I have found a workaround, that is pretty easy.
if (Resources.DisplayMetrics.HeightPixels >= 2560)
{
intHeightOfDisplay = 2560;
}
else
{
intHeightOfDisplay = Resources.DisplayMetrics.HeightPixels;
}
Basically saying, that if the height of the display is heigher than "most phones" I just set it to the maximum height of my app. This works pretty much everywhere.

android sdk. Background image fits. Foreground images too small

I have my view built to fit a phone screen 800x480. The background PNG shows up as a perfect fit. I have a bunch of imageViews of PNGs sitting on the view that should line up perfectly on any screen that is that size.
When tested on my phone, it works fine. However, when tested on my 7" tablet that has the same screen resolution, the backdrop fits as expected, but the imageViews are all too small.
Why wouldn't they fit the same way, considering the resolution is the same?

Could it be the aspect ratio of the second screen?
I know that when I developed an app on my Note I, it showed up differently on almost every other device with the same resolution, on account of the aspect ratio of the Note I being so wide.
Can you check and see the actual pixel ratio of your second device?
Also, is it showing the on screen action bar thing? The back/menu/etc bit? Because that could be because of the version you're targeting is less than the version of your 7" device, causing it to run in backwards compatibility mode. That'll squish your layout a bit as well.

I have a partial answer to this.
I couldn't find a way to set the size of the PNG itself. Only the ImageView height and width. So I set those to 90dp. I tried px first. Don't do that. It's no good.
But, check this out... Forcing the size in dp made the images show correctly on the tablet, but enormous on the phone! So, it more or less reversed my problem.
But at least I know what the problem is now. I just have to create a secondary view for 7" screens to set the imageView sizes. Or, I'm thinking there must be a way to do this problematically. Before the view launches, detect the screen size, if it's not a phone, change the height and width accordingly.
That should work because, as I mentioned in an earlier comment, the relative positioning is perfect. It's just the size that's incorrect.

Different WIDGET margins on different phones with android 4.0-4.2?

I've small problem - I've and app (home screen widget) for android ICS and higher. But different phones with different OS version (4.0.4, 4.1.2, 4.2, etc) and also different brands (Samsung, HTC, LG, ...) makes my app look diferent.
Ok, it doesn't happens always, but on some phones just Android adds automatic margins to my own - and on some not!!! How is this possible, and how to avoid this? Looks like every brand does it in their own way - which is fine for them, but bad for me :)
EDIT:
I use dp, not px. The main problem is not in dp/px nor in portrait/landscape changes. Main problem is, that for example on phone1 my widget has NO margins (it's like sticked to screen borders) and on other phones it has automatic margins like it should. When I add my own margin to widget provider, it has this margins on phone 1, but on other phones it has (my margins + automatic margins). Hope, now it's clear :)

Welcome to Reality show, when the Android it isn't platform independent, either Java it isn't.
For this reason a single android layout.xml should use elements which are doing layout acceptable in all targeted devices. The screen ratio differs, the dpi differs the resolution differs... As best practice:
use dp size instead of pixels
do different layout for portait and landscape case
have multiple folders based on screen size ( and different layout)
I hope it helps!

well, to close this answer - it looks like there is really no option to have same margin on all devices - as different devices uses different home screen implementation. I can't do anything with that...Closed.

Size images properly for mobile devices

Currently i'm trying to develop a mobile app for the Android devices (using Appcelerator).
There are alot of Android devices out there with different screen resolutions. So i basically want the app to look the same on every Android device.
So suppose i have a background image in the center of the screen. Which is (in pixels) 550x300.
I just tried to set the width and height of the imageviews to dips (density independent pixels). So in my case to: 332dp x 226dp.
I tested this first on an HTC One X. In there the image in nicely centered and i have a small space left on the left and right side to the edge of the screen.
Then i tested it on a slightly older device, the HTC Desire Z. In there the image width is a little bit more than the actual width of the screen. (example screen. The blue square represents the image)
So that means setting the width and height as dp isn't a good choice either for images.
What would be a good way to set the image width and height so that it looks the same on both phones. i.e., so that they both have a small white spaces on the other edges of the image left (like i have now in the HTC One X)??
Any advice on this matter?
edit
Thanks for the info so far. Some of you posted links to resources etc and made some suggestions. I'll try to work them out in the next few days, so i might take a couple of days before i accept an answer. In the mean time, any ideas suggestions are welcome.

Use the various drawable folders, i.e. drawable, drawable-large, drawable-xlarge to store your image assets for your background in various sizes. Review http://developer.android.com/guide/topics/resources/providing-resources.html for more information.
Also refer to Android: Scale a Drawable or background image? for helpful information.

I would recommend using a size to fit.
in objective c it looks kinda like this... not much of a android programmer but this may help.
CGRect frame = _textView.frame;
frame.size.height = _textView.contentSize.height;
_textView.frame = frame;
so if you could figure a way to get the frame size then you could set your image to that size any way the view is positioned.
and if you dont want it to take up the whole screen and just the sides then there might be a autoresizing function for android this way your image will be flexible with your frame which will vary based on the phone size.

I think the is problem is not that the image is wider, but the screen width of the phone is smaller on the HTC Desire Z.
I think the best way fot the image to look the same on all devices would be to set width/height programmatically.
But I think this doesn't really matter, as you will encounter much more complicated problems further wil developing for multiple devices. Both look good IMO.

What I would is set your android:layout_width to fill_parent and then add a android:layout_marginLeft and android:layout_marginRight in dip. You can also set a margin for the top and bottom, but based on your screenshots that doesn't seem to be an issue.
As a general rule, try to avoid setting fixed heights and widths for your widgets. Here is a great reference for dealing with different screen sizes:
http://developer.android.com/guide/practices/screens_support.html

So i basically want the app to look the same on every Android device.
No you don't. You think you do, but you really don't. That's like trying to fit a photograph in a 4x6, 5x7, and 8x10 frame -- something's gotta give. You have small phones, medium phones, large phones, 7" tablets, 10" tablets -- these are not the same experience and you simply have to allow some leniency to the design to make it work. If you just want a specific amount of space outside of the image, just give your ImageView a specific margin in DP units, e.g.:
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dip"
//...
/>
You should be striving to make the experience the same (although different layouts for tablets are highly recommended) but you can't expect it to look identical across all screen sizes and densities.

Photostream example: photos sized for larger screens

I'm using the Photostream example app to learn Android.
One thing I've noticed is that on my 800x480 4.0 phone the 6 photos in the grid fill the screen. However, on the 1024x768 pixel display of my 2.3 running touchpad they do not fill the screen, and are instead constrained to a tight grid towards the top-centre of the screen.
I want to adjust the app so it sizes itself appropriate to the screen size but I can't figure out why it's sizing the way it is.
Looking at the layouts in the res/ directory most of them specify fill_parent etc. The only explicit sizing I can see is the 150x128dip in grid_item_photo, but if I double this it seems to make no difference.
I tried changing the code in PhotostreamActivity.java to download SMALL instead of THUMBNAIL sized photos and it indeed seems to do that. However, it doesn't change the overall layout or sizing as they are cropped. This happens even with the above change.
I notice some sizing code in GridLayout.onMeasure() but this all seems to be driven by the existing size of the screen/widgets -- I don't see it enforcing an arbitrarily small size.
Another thing which occurred to me was that maybe it's to do with the resolution, but I don't see any hvga specific layouts or values in the res directory, just some overrides for landscape vs. portrait.
Why is the current code sizing things the way it does, and what is the best way to modify this so it works on physically larger, perhaps lower density screens?

I needed to add this to AndroidManifest.xml:
<supports-screens android:largeScreens="true" />
Apparently, it is not default on for all devices, unlike the other similar settings.