Android : Multiple Screen Support for All Devices

Question

I'm working on my android project and didn't know that there was something called multiple screen support. I thought developing one kind of resolution would be the same on others. But i was wrong. Currently I've designed my app to work with resolution 1080*1920. But i want it to support all screen resolutions at least the below mentioned.

480*800, 1080*1920 (supports), 720*1280,
480*854, 480*960, 320*480, 1440*2560

So what can be done in this regard. I don't know what code to post here. Please guide me through this. Thank You

credits.xml

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

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#f6f6f6">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="The Team"
        android:id="@+id/textView3"
        android:textSize="40sp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:textColor="#ff4a3b" />

    <ImageView
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:layout_marginTop="8dp"
        android:layout_marginRight="20dp"
        android:id="@+id/imageView2"
        android:src="@mipmap/ic_launcher"
        android:layout_below="@+id/textView3"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="32dp"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="PRAVEEN"
        android:id="@+id/textView4"
        android:textSize="15sp"
        android:textColor="#010101"
        android:layout_below="@+id/imageView2"
        android:layout_alignRight="@+id/imageView2"
        android:layout_alignEnd="@+id/imageView2"
        android:typeface="monospace" />

    <ImageView
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:layout_marginTop="8dp"
        android:layout_marginLeft="30dp"
        android:id="@+id/imageView"
        android:src="@mipmap/ic_launcher"
        android:layout_below="@+id/textView3"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="74dp"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="AKASH"
        android:id="@+id/textView5"
        android:textSize="15sp"
        android:textColor="#010101"
        android:typeface="monospace"
        android:layout_below="@+id/imageView"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />


    <ImageView
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:layout_marginTop="165dp"
        android:layout_marginRight="20dp"
        android:id="@+id/imageView3"
        android:src="@mipmap/ic_launcher"
        android:layout_below="@+id/textView3"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="32dp"
        android:layout_marginTop="157dp"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="PRANOTI"
        android:id="@+id/textView6"
        android:textSize="15sp"
        android:textColor="#010101"
        android:layout_below="@+id/imageView2"
        android:layout_alignRight="@+id/imageView2"
        android:layout_alignEnd="@+id/imageView2"
        android:typeface="monospace" />

    <ImageView
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:layout_marginTop="165dp"
        android:layout_marginLeft="30dp"
        android:id="@+id/imageView6"
        android:src="@mipmap/ic_launcher"
        android:layout_below="@+id/textView3"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="72dp"
        android:layout_marginTop="157dp"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="SONAL"
        android:id="@+id/textView8"
        android:textSize="15sp"
        android:textColor="#010101"
        android:typeface="monospace"
        android:layout_below="@+id/imageView"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="361dp"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="GUIDE"
        android:id="@+id/textView67"
        android:textSize="30sp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:textColor="#ff4a3b" />

    <ImageView
        android:layout_width="130dp"
        android:layout_height="130dp"
        android:id="@+id/imageView69"
        android:src="@mipmap/ic_launcher"
        android:layout_below="@+id/textView67"
        android:layout_centerHorizontal="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"

        android:text="Prof. M.G.Huddar"
        android:id="@+id/textView89"
        android:textSize="15sp"
        android:textColor="#010101"
        android:typeface="monospace"
        android:layout_below="@+id/imageView69"
        android:layout_toLeftOf="@+id/textView6"
        android:layout_toStartOf="@+id/textView6" />

</RelativeLayout>

    </ScrollView>

Answer 1

Supporting multiple devices is a headache. It used to be using hdpi, mdpi, xhdip, xxhdip to specify different device sizes. Now, it's using sw320dp, sw360dp, sw600dp, etc. Where sw stands for smallest width, dp stands for Density-independent Pixels. So,

If you create a layout file activity_main.xml in the res/layout-sw360dp folder, it will be used for devices with screen width >= 360dp. Now, if you create another file with the same name activity_main.xml but in a folder res/layout-sw600dp, then this file will be used for devices with screen width >= 600dp.

This applies for drawable, dimen and value files as well.

res/drawable-sw360dp for devices with screen width >= 360dp

res/drawable-sw600dp for devices with screen width >= 600dp

res/drawable-sw720dp for devices with screen width >= 720dp

etc.

You get the idea...

I wrote a post about this not while ago about this. Official Doc. Device Size Metrics

Answer 2

You need to create 5 folder.

Drawable-mdpi

Drawable-hdpi

Drawable-xhdpi

Drawable-xxhdpi

Drawable-xxxhdpi

or you can also use default folders

mipmap-mdpi

mipmap-hdpi

mipmap-xhdpi

mipmap-xxhdpi

mipmap-xxxhdpi

In these all folder you need to keep your images with ratio 1:1.5:2:3:4 .

all similar image have same name.

Now Other things done automatically, When someone use a Device with 360*480(hdpi). then it automatically fetch image from hdpi folder.

An Example for images.

If we take a image for

mdpi with 100dp*100dp.

then for hdpi :- 150dp*150dp

xhdpi:200dp*200dp

xxhdpi: 300dp*300dp

xxxhdpi: 400dp*400dp

Answer 3

Android devices have multiple densities classified as ldpi (low), mdpi (medium), hdpi(high) and xhdpi(extra-high). Generally, the bigger the resolution of a device is, the higher it's density gets. So low-resolution devices have a ldpi, medium-res devices have mdpi and so on. To implement this, go to your resources folder and create some new folders called drawable-ldpi, drawable-mdpi, drawable-hdpi, drawable-xhdpi and place your images inside them. The images in the drawable-ldpi should have lower resolutions, and will be automatically used on devices that have low resolution (there's no need for you to programatically implement this). The images inside drawable-mdpi should have a bigger resolution than the ldpi ones, and so on. Like this you can make sure every device gets it's right image. You can place an image in all of these folders without renaming it. For example you can place a file called image.png in all of those folders, and when accessing it through R.id.image, the system will automatically choose in which folder it'll look for it. Hope this helps!