Android different screen size/dpi with less work

Question

Well, unfortunately i'm bumping on different screen sizes when my app is already finished and fully functional.

I found thousand answers about different devices/resolutions/dpi implementation and i tried to learn something from each one.

My goal is to NOT use different density folders but to resize/repositioning already existing pictures for each layout resolution/dpi. A little blur in pictures caused by resizing is at this time not important for me. My app is a school project and i need to start it within few days.

My idea is to create a giant set of layout folders like:

layout-normal-mdpi    
layout-normal-hdpi
layout-normal-xhdpi
layout-normal-xxhdpi
layout-normal-xxxhdpi
layout-large-mdpi
layout-large-hdpi
layout-large-xhdpi
layout-large-xxhdpi
layout-large-xxxhdpi
layout-xlarge-mdpi
layout-xlarge-hdpi
layout-xlarge-xhdpi
layout-xlarge-xxhdpi
layout-xlarge-xxxhdpi

Copy/Paste my activities there and to set each activity object with a desired DP value to make the app usable/viewable on most devices.

After this i will create as more as possible virtual devices to test and edit graphics correctly.

Well again, what i'm losing by this way (except for quality DPI resolution)?

Have you a better idea to make my app compatible with most devices?

My app is targeting Tablets in most part and i would like to make it compatible to phones over 4inch as well.

Last question:

using the density value like me:

layout-normal -hdpi

is a good pratice? will it be implemented in future android releases? Or is better to avoid usind DPI values like:

layout-normal

Thanks a lot for any help.

This is a screenshot of my virtual device created as Galaxy S7 Edge. It loads itself the layout-normal-xxxhdpi layout.

Answer 1

I suggest you not to create all this layout, but to create different dimens.xml files, in this way you have to create only one layout, with one size attribute for each view, that Android takes automatically based on device screen dimensions. Here is an example:

LAYOUT:

<ImageView
        android:id="@+id/image_cat"
        android:layout_width="@dimen/width_category_image_carousel"
        android:layout_height="0dp"
        android:layout_weight="2"
        android:foregroundGravity="center_horizontal|bottom" />

FILE DIMENS.XML for sw300dp (this indicate that smallest width, regardless orientation, must be 300dp)

<resources >
    <dimen name="width_category_image_carousel">220dp</dimen>
</resources>

You have to create more files dimens.xml inside values directory in resources directory, based on different size screens you want to support. You can find more information about how to define different dimens here: https://developer.android.com/guide/practices/screens_support.html#NewQualifiers

Answer 2

Well again, what i'm losing by this way (except for quality DPI resolution)?

The layout can be totally different. Some view can be out of screen. Some text may not be containing in their layouts. And of course ImageViewswill be stretched as hell.

Have you a better idea to make my app compatible with most devices?

Yes. You can build your layouts based on the attribute layout_weight.

https://developer.android.com/guide/topics/ui/layout/linear.html

This work for LinearLayout but also with RelativeLayout in a slighty different way. The goal of this attribute is to gave to each view inside a layout some percentage of the total size.

Exemple of use.

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

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="1" />

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="3"
        android:text="2" />

    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="3" />

    </LinearLayout>

This way you can build UI wich adapt themselve to each screen size and density.

But be carefull, there is warning about using this attribute. If you use nested layouts with layout_weight attributes, performance of rendering your views will decrease significantly .

Why are nested weights bad for performance? Alternatives?

Answer 3

Assuming it's the quality of the images you're concerned about because you resize them depending on space available I would do the following:

1. I would put these images in res/drawable-nodpi e.g. image1_360.png, image1_540.png, image1_720.png, image1_1080.png if you have an image that should fit the device width.

2. In res/values I would create a drawables.xml file with:

   <drawable name="image1">@drawable/image1_360</drawable>
   

In values-hdpi I would replace that image with

    <drawable name="image1">@drawable/image1_540</drawable>

and similarly for xhdpi and xxhdpi

3. In values-w600dp I would replace that image with

   <drawable name="image1">@drawable/image1_540</drawable>
   

and similarly for the higher density buckets

4. In values-w720dp I would replace that image with

   <drawable name="image1">@drawable/image1_720</drawable>
   

and for values-w720dp-hdpi with

    <drawable name="image1">@drawable/image1_1080</drawable>

5. In values-w1000dp I would replace that image with

   <drawable name="image1">@drawable/image1_1080</drawable>
   

This might vary depending on your actual needs but the idea is to use values folder for different screen sizes & density bucket combinations and reference the drawables using the drawable XML tag.