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 ui design varies for the same dimensions but the screen sizes are different which devices are having hardware menu button

If device has hardware menu button then the layout design is corrupted.I'm having a layout which is fit for xxxhdpi devices.It was looking good in nexus6 but when I'm checking it in samsung galaxy note 4 which is also xxxhdpi device the screen design was corrupted.I observed that the samsung devices having hardware menu button where as nexus6 having the hardware menu button on the screen.So the height of the layout is vary.Can you please let me know how to handle this situation.

this is resolution and density problem. I had the same problem and I solved it by adjusting the text-size and padding according to my device with button on screen and things automatically got fixed on the other device with same screen-size.
First create layout file for 360 dip(layout-sw360 dip) and then adjust layout for your nexus 6.This problem will be resolved.

Designing for s3 and nexus 4

S3 is having resolution 720x1280. I have design for XHDPI (720x1280) and it looks fine in s3 also. but it cuts in nexus 4 (768x1280). same height with respect to s3. but still it goes in scroll.
It might be that nexus 4 is having bottom navigation bar. but what should be the solid solution to make compatible for both the resolution.
should I make the screen height by excluding the bottom navigation height?

The solid solution to make your app compatible for both (or any) resolution is to not make fixed size UI elements. Your controls should have size of wrap_content or match_parent. The content(i.e. bitmap) should be small enough to fit on the smallest supported screen. You should also provide separate layouts/resources for different screen sizes.

Same configuration/different size yet screen does not scale from Samsung 10" to Nexus 7

I developed my app on a Samsung GT-P7510 (10.1" WXGA 1280x800 pixels). When I download to the Nexus 7 (7" 1280x800 pixels) the buttons that I use appear to be about the same physical size. The Nexus buttons are about 95% of the Samsung buttons. The rest of the screen seems to work OK- the text is in the right location and is proportionately smaller because that is defined in terms of screen height.
All my button sizes are defined using "dp" settings in the XML layout files. I would have expected that with the same pixel ratio the buttons would scale. I am obviously misunderstanding this. What setting would I use to get the buttons to scale?

Why do you think Android should scale your app without anything that you tell it to do?
"dp" simply makes things look the same across devices with different densities (higher density makes use of more pixels) . It won't make things larger or smaller, and it's a good thing since you don't want text to be either huge or too small to be able to read.
For text, BTW, it's usually better to use "sp" so that the user might be able to change its size (because people might have eyes problems to read small letters).
If you wish to scale things, you can either create your own mechanism (like this one) or use openGL .

Android: how to draw an ImageView with the same size regardless of device?

I want to put a toolbar in my application. The toolbar will use ImageViews as application buttons. I would like the ImageViews to be the exact same size regardless device; by "same size" I mean that, when rendered to the screen, if I measure them with a ruler, the dimensions will be the same. I would like this size to be ~10mm (the width of my index finger).
I have been completely unsuccessful in accomplishing this.
I am testing on a MDPI, large screen Acer Iconia Tab and a HDPI medium screen Samsung Galaxy Tab. If I set layout_width="50dip" and layout_height="50dip", the buttons render as ~10mm on the Samsung, and ~8mm on the Acer. If I set the buttons as layout_width="12mm" and layout_height="12mm", they render as 12mm on the Acer and ~9mm on the Galaxy (confusing that 50dip renders bigger on the Galaxy than the Acer, but 12 mm renders smaller on the Galaxy than on the Acer).
If I place a 32pix x 32pix icon in my drawable-mdpi folder (and no equivalent in the drawable-hdpi folder), and set layout_width="wrap_content" and layout_height="wrap_content"; the results are similar to if set to 50dip, the Samsung is about 10mm, the Acer about 8mm. If I add a 48pix x 48pix icon to my drawable-hdpi folder, there is no change; presumably because the Acer still uses the mdpi icon and the Samsung uses the bigger one, but scales it down by 50% because it knows its hdpi (if am confident that this surprising scaling occurs because if I move the 48pix icon to the mdpi folder, and have nothing in the hdpi folder, the icon shows very large on the Samsung).
I am confused and could really use advice. How do I make my button fingertip sized regardless of dpi and screen size?

Ok, I finally figured out what is going on:
The problem is that a image button who's width is specified as 10mm,
shows as about 7mm on my Galaxy tab, and about 9mm on my Iconia Tab.
There are 2 reasons for this rather significant difference:
The Iconia Tab reports its xdpi as ~160, when its actual xdpi
is ~150.
Honeycomb uses a new drawable for its button background, with
significantly smaller margin than the drawable in Froyo.
Issue 1 accounts for about .6mm of the difference, Issue 2 accounts
for the remainder. Issue 2 can be solved by choosing one of the two
backgrounds, packaging it with the application, and specifying it as
the background for the ImageButton. Issue 1 cannot be resolved, but the difference it creates is relatively minor once issue 2 is dealt
with.

You have two basic approaches:
Use supplied resource indentifiers - hdpi/ldpi/etc - and just rely on the OS.
Use xdpi/ydpi in DisplayMetrics class. They are supposed to return the exact physical pixels per inch and scale the image manually with a corresponding scale factor. This, of course, will slow down performance. What is more - I am not sure whether these readings will be correct.

Did you try stuff in the no-dpi resource identifier. Honestly I'm not sure what you would get out of this but it's worth a shot.