Develop Reference

Same DPI but different inch size

I know the Internet is overwhelmed with questions about DPI px inches and so on.
But after several hours of googling my situation doesnt seem to happen to anyone else!
I have 2 devices custom build with android studio which are both mdpi.
BUT one device is 3.65inch and the other device is an 10.1 inch.
I have created a folder with 2 images 250x125 with the dpi set to 160 dpi
If normally I would declare my 2 images in my XML with dp units instead of pixels...I would suppose on both screens the result should be the same right ?
Well it seems the images keep remaining the same size and don't look # how many inch the device is
So to set things clear:
What do I have to change at my resources or my code so that my layout scales identical for different Inch sizes ?
This is my GOOD layout for my mdpi 10.1 tablet :
This is my BAD layout for my mdpi 3.65 device
How can I make it so that even on the 3.65 inch screen the buttons will scale to the same PROPORTIONS as the 10.1. Not the inches...not the pixels...the proportions....
This is my XML File
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:gravity="center">
<Button
android:id="#+id/buttonEnglish"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/english"
android:layout_marginBottom="5sp"
android:layout_marginLeft="5sp"
android:layout_marginRight="2sp"
android:layout_marginTop="0sp" />
<Button
android:id="#+id/buttonNederlands"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/nederlands"
android:layout_marginBottom="5sp"
android:layout_marginLeft="20sp"
android:layout_marginRight="5sp"
android:layout_marginTop="0sp"
/>
</LinearLayout>
I'm desperate...
Thanx in advance

This might help explain the problem you are facing...
You have an image that is 250x125 - that is 250 pixels wide by 125 pixels in height.
You have specified 160 dpi - which means that 1 inch = 160 pixels.
So, both screens are doing what you ask and displaying the 250 pixels across 1.5625 inches. On the large screen it looks "proportionally" correct. On the 3.65" screen the button takes up more than half the screen - just like you asked it to.
If you want the smaller screen to look like the larger screen, then you have three options:
adjust the size of the image and provide 2 image assets (or more for a wider variety of screens). This is why you can have resource folders for mdpi, hdpi, xhdpi, etc. You adjust the pixels in the image to accommodate the screen size.
You use a "weighted" LinearLayout that adjusts the size of the space provided based on the available screen space. For this type of layout you should not worry about performance.
Do runtime scaling of the image based on screen size - use DisplayMetrics to get the size and density of the screen and adjust your image to fit the screen appropriately.
The last option is the most flexible in many ways, because if you end up with a screen that is either very large or very small, you can make adjustments to do things like move buttons or text to another place on the screen (above or below other content). But for your specific problem, any of them will suffice.

There is no need of Designing two xml layout.
You can use Dimension for margin and padding according to device.
You are giving static value for margin.
Use dimen.xml in value folder each device.
Following code in your layout.xml will work for you.
android:layout_marginLeft="#dimen/margin_button"
Value folder name for dimen.xml:
values-mdpi
values-hdpi
values-xhdpi
values-xxhdpi
values-sw600dp
create dimen.xml in each values folder.
and in dimen.xml you have to define value for margin in all values folder but value of that property is different according to device size like this:
values-mdpi
<dimen name="margin_button">20dp</dimen>
values-hdpi
<dimen name="margin_button">23dp</dimen>
like wise in all values folders.

Thanx everyone for the answers. Due to answer from #Iacs I discovered that I had to made changes to my folder structure.
I have completely overlooked the fact that in the /res folder there can be more directories then just the standard "layout" directory. You can create other directories with these names : layout-large, layout-xlarge, layout-small, and so on...
In these folders you can paste your layout.xml and adjust the values...
This is how things look now in my android studio
note the layout folder structure:
And now ofcourse my 2 devices with both the same DPI but different screen size are showing my buttons the way I want them to be showned!

How should layout and drawable folders be separated properly?

I'm trying to make application run on each device and I come to a problem of making layouts and drawable folders. So, as I'm understanding ratio dpi is following - mdi:hdpi:xhdpi:xxhdpi - 1:1.5:2:3. DPI stands for dots per inch and this dots are actually presenting "DP" as density pixels which we put into XML attribute like: android:layout_width="150dp". (Please, correct me if I'm mistaking)
Problem occurs that some devices can have let's say 240x320 with xhdpi and there can be device 720x1280 also with xhdpi. Even if i would make separated pictures with already mentioned ratio, I would still need to make separated layouts in which:
layout-small would have something like this for ImageView:
<ImageView
android:id="#+id/slikaPitanja"
android:layout_width="150dp"
android:layout_height="100dp"
android:visibility="gone"
android:layout_below="#+id/sadrzajTekstualnogPitanja"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:contentDescription="Country flag" />
and layout-large where I would have the same code for ImageView except I would have these lines:
android:layout_width="wrap_content"
android:layout_height="wrap_content"
(Actually I could have layouts separated with sw_ _ _dp format).
Is that right to do it like this? Am I missing point somewhere? Something tells me that it's never good to manually determine dps in width and height as I would for layout-small.

Try to NOT use static dpi for your layout, Instead use "wrap_content , fill-parent and gravity". this will make your layout to spread dynamically depending on the screen size

making fonts get larger on larger screens

I have searched Stackoverflow and google and what I find is answers for people who want fonts to remain the same size but I want them to get bigger when the screen gets bigger.
Specifically, I want very large fonts in my application. On my phone, they are 1/2 inch high - perfect. My problem is that on my 7 inch tablet they are also 1/2 inch high and I want them to scale up and be about 1 inch high. I have tried sp and dp modes and both just keep the fonts the same physical height, which is not what I want. I see there is something new for tablets with 3.2 and higher but I want to support devices from 2.3 and higher. I have seen complex code that says it auto scales fonts to fit the text in a width but that is not what I need. I want the fonts to be the equivalent of say 100sp on a phone and 200sp on the tablet. I have no graphics and simple relative layouts with very few elements on the screen. I just need to make a couple of the textsizes larger for large screens. I would think it would be simple but I can't find it.
Here is a typical text view entry
<TextView
android:id="#+id/textDistance"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/labelDistance"
android:layout_centerHorizontal="true"
android:text=""
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#ffffff"
android:textSize="100sp" />
Is there a relatively simple straight forward way to do this?

'dp' or 'dip' dimensions - specially made for been the same on different screens. So, there is not any special dimension for you task.
For implementing different text sizes you have to create several styles, and put them in folders values-xlarge, values-large, values-normal and values-small.
One style will looks like this:
<style name="BigTextStyle">
<item name="android:textSize">50dp</item> <!-- different values in different folders -->
</style>
And in your text view just provide style reference:
<TextView
style="#style/BigTextStyle"
...
/>

I went with the method Here: http://developer.android.com/guide/topics/resources/more-resources.html#Dimension and added one line to the dimens.xls files:
<resources>
<dimen name="padding_small">8dp</dimen>
<dimen name="padding_medium">16dp</dimen>
<dimen name="padding_large">16dp</dimen>
<dimen name="font_size">200sp</dimen>
The above is the file in views-large. In the views file I have 100sp instead of 200sp.
Now the font is large on my tablet. According to the documentation, this may be a problem with some of the new phones, the 5 inch ones and that is why there is some way to deal with this in the newer versions of Android but as I want this to work on older phones and 7 inch tablets, this will solve my problem. The solution above, which led me to this, would also work I am sure, I just went with this as it seemed simpler and was pretty well documented by Google.
In my layout file, I just changed the specific callout of font size to this:
<TextView
android:id="#+id/textDistance"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/labelDistance"
android:layout_centerHorizontal="true"
android:text=""
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#ffffff"
android:textSize="#dimen/font_size" />

Android: Handling screens that are the same dpi level but different

I have gone through all of the Android docs about handling multiple screen sizes but I still haven't been able to find an answer to this question or how to handle this.
If there are two phones that have the same dpi level (such as both being hdpi) I can provide one resource for them and set the layout parameters as such:
<ImageView
android:id="#+id/icon"
android:layout_width="94dp"
android:layout_height="94dp"
>
The "icon" in this instance is large enough so that it will scale down to fit that layout in all cases. In an ideal world, I would assume that the icon would appear the exact same size on all hdpi devices, however when I tested it out on a LG G2x and a HTC Sensation, the image is smaller on the Sensation. So is Android always just using a factor of 1.5x when calculating the size the hdpi image? Is there something I can do to guarantee the size will be the exact same on all hdpi devices? Thanks.

You can use this to help you out with the proyect
http://developer.android.com/training/multiscreen/screensizes.html

The answer was that the system does use a standard multiplier for each dpi level (1.5x for hdpi for example). In order to get around this I just used the .xdpi and .ydpi values of DisplayMetrics and do my calculations off of those real values.

Usually when ever we want to do like this we usually use wrap_content. so once try layout_width = "wrap_content",layout_height = "wrap_content". Such that ANdroid SDK will look.

Still having problems with GridViews

After two years of Android development I'm still not 100% sure about what resources I need to provide to make my GridView work on different size and resolution devices.
I'm still learning, for example I recently discovered that you don't have to supply every drawable in all screen sizes - if you put something in xhdpi then Android is clever enough to resize that on the fly most of the time - but there are a few few quirks. For example if I try using drawables which are only defined in the drawable-xhdpi bin on a mdpi device in a GridView, the drawable will visually resize correctly but the whitespace around it won't - that will still be the original size. Originally I got around this by forcably defining dimensions for all aspects of the GridView and the associated adapter view, but this had a load of code smell around it, so I resized the drawables manually, put them in their respective bins (drawable-mdpi, drawable-hdpi and drawable-xhdpi) and removed all the forcing of image sizes etc.
So I currently have:
<GridView
android:id="#id/home_image_grid"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:columnWidth="100dp"
android:gravity="center"
android:listSelector="#00000000"
android:numColumns="auto_fit"
android:stretchMode="columnWidth"
>
</GridView>
and the layout for each item is:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="0dip"
android:gravity="center"
android:orientation="vertical"
android:padding="0dip">
<ImageView
android:id="#id/home_button_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView
android:id="#id/home_button_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="#color/default_text_colour"
android:textSize="#dimen/home_button_text"
/>
</LinearLayout>
So far so good...
The app I'm currently working on I've almost finished and have been doing some testing on different devices - it looks good on normal screen size xhdpi, hdpi & mdpi devices. Then I extending my testing to other devices - I'm testing on an HTC Flyer which is large screen size, mdpi - and the gridview now looks rubbish - it's correctly picking up the mdpi images, which are tiny.
Doing some reading around I found the GridView tutorial GridView tutorial, which says to put all your drawables in the 'drawable' bin, so I followed this advice and again everything looked rubbish - on closer inspection (and having actually read through the example code) it seems that they are manually setting the size of each image in the GridView - which I'd been doing to start off with, and which means that I'm going to have to manually set the image sizes for every permutation of devices.
So..I'm left wondering if I've missed a trick here - should I take my first approach of sticking the images in my drawable folder and manually forcing the sizes for every purmutation? Should I draw a new set of images for all permutations of screen size and resolution?
How can I guarantee that whatever I do, it's going to look good on a device I've not tested it on?
Either way it feels like I'm doing something wrong - but I can't work out how to do this properly without loads of hassle. Can anyone help?

I'm not sure what you mean by "forcing the sizes for every permutation" but you could put the proper sized drawables in the following folders:
drawable-mdpi
drawable-large-mdpi
Each device would pick the right drawables from the corresponding folder and you could separate normal and large images for mdpi devices.
Wouldn't that fix your problem?
P.S: The drawable folder is meant for XML drawables only or photos which do not depend on the device's density, not images for the UI. Those will scale properly for each resolution and density.