Understanding a support multiply screens

Question

I know that there is a lot of gigabytes of information about my problem, I've almost read all of it - official documentation on developer.android.com, posts on XDA-Developers and here, and many other BUT STILL have problem with it and I hope you can explain it to me. So I've an app with dashboard icons on a main-screen, and I need to make that this screen will be looked the same on all existing screens, here is a portrait and land standarts:

To make it I've added to my project a next folders:

And all sizes such as images size, text size and margins I've setted in dimens.xml for each screen resolution, and I was thinking that's enough to see the same picture on different devices. But I was wrong, and in the same resolution but different screen size it's looks different. Here is a 3.2" and 5.1" screens with mdpi:

I didn't get should I add a folders like "values-mdpi-sw320dp" and so on or there is something another way I should know to see same picture on all screens? Is it a right way to set an all sizes in dimens? Please explain it to me. REGARDS.

Answer 1

You don't need to specify all these different sizes to achieve a screen as simple as that one. Simply play a bit around with layouts. For example let's take your first screen. You could use a TableLayout or even a vertical LinearLayout with N LinearLayout inside. At this point simply use weights! Example: want a grid of two rows and three square images for each row:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <ImageView
        android:layout_width="0px"
        android:layout_height="wrap_content"
        android:layout_weight=".33" />

    <ImageView
        android:layout_width="0px"
        android:layout_height="wrap_content"
        android:layout_weight=".33" />

    <ImageView
        android:layout_width="0px"
        android:layout_height="wrap_content"
        android:layout_weight=".33" />
</LinearLayout>

    <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <ImageView
        android:layout_width="0px"
        android:layout_height="wrap_content"
        android:layout_weight=".33" />

    <ImageView
        android:layout_width="0px"
        android:layout_height="wrap_content"
        android:layout_weight=".33" />

    <ImageView
        android:layout_width="0px"
        android:layout_height="wrap_content"
        android:layout_weight=".33" />
</LinearLayout>

Now unfortunately that's still not enough for you. Another thing you might want to accomplish is to still have your images have a square ratio. To achieve that simply extend image view like this:

public class SquaredImageView extends ImageView {

public SquaredImageView(Context context, AttributeSet attrs) {
    super(context, attrs);
}

@Override 
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){
             int width = MeasureSpec.getSize(widthMeasureSpec);
             int height = width;
             setMeasuredDimension(width, height);

}

}

Now simply provide images in the right densities and everything will look exactly as you want

Answer 2

I think this topic is a lot of trouble too. As you said you should use the values-sw320dp-hdpi, values-sw320dp-xhdpi, values-sw320dp-xxhdpi and so on in your application.

I recently did the same on an application I was working on and I found out that the Galaxy S2 read the values-sw320dp-hdpi, the Galaxy S4 took the values-sw320dp-xxhdpi and the Galaxy Note took values-sw320dp-xhdpi. So yes, declaring these things is a necessity.

You could refer to this as a quick read if you want to. And this application is really helpful as it reveals most of the devices well kept secrets.

Answer 3

1. The smallest-width qualifier is available only on Android 3.2 and above, if your 5.1" screen is running os version earlier than 3.2, it will not match the right layout.

2. if both the android version is >= 3.2, the layout_sw600dp or layout_sw720dp 's layout file is not "truly" optimized for it. From the screen shot you provided, the layout's size of some ui element is not optimized right.

Answer 4

First thing first, it doesn't matter your screen size in inch at all. You have to figure out your screen density e.g. 240+dpi for my Sony Xperia Z. Afterwards, you can match them to the closet bucket defined by Android e.g. 240dpi - hdpi.

In your case, the bucket is mdpi. Only 1 set of drawable in drawable-mdpi will apply to both of your devices.

What you are seeing is the correct behaviour. You might want to re-layout your stuffs to fit the bigger screen e.g. having 5 rows instead of 3. Alternatively, you can draw bigger frames (160dp for each icon instead of 100dp; you need to use DisplayMetrics and do some calculation) AND use higher-resolution images to fit those frames (these images need to be in the SAME folder drawable-mdpi though!)

Answer 5

If weighting will be not enough for you, consider to set dimensions dynamically in code. You can get current screen diagonal by this:

    Display display = ((WindowManager) c.getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay();
    DisplayMetrics displayMetrics = new DisplayMetrics();
    display.getMetrics(displayMetrics);
    screenRect = new Rect(0, 0, width, height);
    screenDiagonal = Math.sqrt(width * width + height * height) / displayMetrics.densityDpi;

Then you can dynamically create LayoutParams for your views and apply sizes according to this value. I know it's a bit hacky and approach with weights is more native, but this might work for you.

Answer 6

Create layout folders in your res/ and name them as layout, layout-large. Now they should work for different screen sizes