Guide for Supporting Multiple
Resolutions Mar 28, 2016

About This Document

This document contains information on how to support devices of different resolutions in one app. In order to understand this document, you need to know Android application development related to Layout and Resource.

Display Policy for Samsung Devices

The Aspect ratio policy for smartphones and tablets applies.

  • Smartphone: QHD (2560x1440), HD (1280x720)

  • Tablet: WQXGA (2560x1600), WXGA (1280x800)

Smartphone (16:9) / Tablet (16:10)

Development Guidelines for Multiple Resolutions

In order to support multiple resolutions in one app, you must create a variable layout for the app or web.

  • Instead of creating a fixed layout, create one that can fit any resolution.

  • Create a variable layout so that content can fit in any screen size.

How to Design a Flexible Screen

When creating a layout, use match_parent or weight, instead of fixed dp values, so that resolution is less affected.

  • Do not use fixed values for width or height of the layout. Instead, use match_parent as the values of layout_width and layout_height in the layout file so that the layout is displayed appropriately.

    • wrap_content: The screen is filled as much as there is content.
    • match_parent: The entire screen is filled.
<LinearLayout
	android:layout_width="math_parent"
	android:layout_height="match_parent"
	android:orientation="vertical">
	...
</LinearLayout>
[Sample Code 1] Example of creating a layout with match_parent
  • If it is difficult to create a layout like the above, use layout_weight to create a screen using a ratio value, not a fixed value. When you do so, specify layout_width or layout_height (whichever you want to use a ratio) as 0, and add layout_weight to specify the ratio.

<LinearLayout
	android:layout_width="math_parent"
	android:layout_height="0dp"
	android:layout_weight="1"
	android:orientation="vertical">
	...
</LinearLayout>
[Sample Code 2] Example of creating a layout with weight

How to Support Multiple Resolutions in a Single Screen Layout

To support multiple resolutions, you may use multiple layout files, but using a single layout file makes file maintenance and management easier. When you need to modify part of the layout for different resolutions, it is good to use dimens.xml, which makes it easy to modify.

Save the below name/value in this file. You can refer to it in source code and other layout XML files.

<resources>
	<dimen name="textview_height"> 25dp</dimen >
	<dimen name="textview_width">150dp</dimen >
	<dimen name="font_size">16sp</dimen>
</resources>

As below, you can use the name/value defined as dimen above in the application's source code.

Resources res = getResources();
float fontSize = res.getDimension(R.dimen.font_size);

As below, you can use the name/value defined as dimen, in the Layout XML file as well.

<TextView
	android:layout_height="@dimen/textview_height"
	android:layout_width="@dimen/textview_width"
	android:textSize="@dimen/font_size"/>
[Sample Code 3] Example of creating a layout with dimension

How to Support Multiple Resolutions in Codes

You can use the DisplayMetrics class to get lots of information about the display within your code, and create a dynamic screen to support many different resolutions.

// Utilize the display information (density, resolution, etc.) that uses the 
DisplayMetrics class in WindowManager.
DisplayMetrics metrics = new DisplayMetrics();
((Activity) mContext).getWindowManager().getDefaultDisplay().getMetrics(metrics);

//Calculate the width of display in pixels.
int DisplayWidth = metrics.widthPixels;

// Calculate the height of display in pixels.
int DisplayHeight = metrics.heightPixels;
[Sample Code 4] Example of calculating screen size within codes, using the DisplayMetrics class

How to Output Images for Different Resolutions

When displaying an image, if you specify ScaleType (place the image in a specific area, place it in the center, etc.), instead of fixing image size or position, you can support many different types of devices.

Options for ImageView.ScaleType
  • MATRIX: Use the received matrix to draw an image.

  • CENTER: Display an image in the center of the display area, without scaling it.

  • CENTER_CROP: Fill the entire display area, maintaining the image ratio, and crop out the rest.

  • FIT_CENTER: Scale the image so that it will not be cropped, and maximize either the width or height.

  • FIT_XY: Fill the entire screen without maintaining the image ratio.

ImageView mImageView = (ImageView)findViewById(R.id.imageView);
mImageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
[Sample Code 5] Example of specifying ScaleType in codes
<ImageView 
	android:id="@+id/image" 
	android:layout_width="match_parent" 
	android:layout_height="match_parent" 
	android:scaleType=“centerCrop" 
	android:src="@drawable/icon" />
[Sample Code 6] Example of specifying ScaleType in Layout XML file

Multi-Resolution Definition for Android Market

To register a multi-resolution app in Android Market, you must describe the values to support multiple resolutions in the AndroidManifest.xml file. Each value can be defined for the screen range that your app supports. Please note that certain devices might not be shown in Android Market, depending on the values.

  1. 1.

    Enter true/false in the screen size to be supported by your app. Depending on the settings, the devices shown in Android Market will be affected as well.

  2. 2.

    If you set the acceptance of random screen density to "true", the UI will be optimized according to the density of the screen.

  3. 3.

    This is used to create an app for a specific screen. This is not recommended if you want to support multiple solutions, because the values affect the devices shown in Android Market.

<?xml version="1.0" encoding="utf-8"?>
	<manifest xmlns:android=http://schemas.android.com/apk/res/android>
		<supports-screens android:resizeable="true"
				  android:smallScreens="true"
				  android:normalScreens="true"
				  android:largeScreens="true"
				  android:xlargeScreens="true"
				  android:anyDensity="true"/>
	  </manifest>
[Sample Code 7] Example of setting suport screens

How to Manage Resources for Supporting Multiple Resolutions

To support multiple resolutions in one app, you can define layout and resource folders for each resolution.

Supporting multiple resolutions with Layout resources

By defining the Layout folder under the Res folder, as below, you can define the layout for multiple or specific resolutions. Below are the rules for creating the Layout folder. You can define each value for the screen range that your app supports. Please note that certain devices might not be shown in Android Market, depending on the values.

layout – Screen width value (dp) – resolution – OS version

If you need to apply a different layout to specific screen size as shown in the screenshot on the right, create a folder with width and resolution, following the rules mentioned above. Then simply insert the XML file in the folder.If you need a different layout for an OS version, define the target version like the "v19" folder at the bottom. For multi-resolution to which the above rules do not apply, refer to the "layout-resolution" folder. For layouts that do not affect resolution, refer to the "layout" folder.

layout – Screen width value (dp) – resolution – OS version
Supporting multiple resolutions with Drawable resources

By defining the Drawable folder under the Res folder, as below, you can define image resources for multiple or specific resolutions. Below are the rules for creating a folder.

drawable – Screen width value (dp) – resolution – OS version

If you need to apply a different image resource to a specific screen size as shown in the screenshot on the right, create a folder with width and resolution, following the rules mentioned above. Then simply insert the image in the folder.
If you need a different image resource for an OS version, define the target version like the "v19" folder at the bottom. For multi-resolution to which the above rules do not apply, refer to the "drawable-resolution" folder. For images that do not affect resolution, refer to the "drawable" folder.

drawable – Screen width value (dp) – resolution – OS version
Configuration Qualifier

Below are the current qualifiers for device screen characteristics. They are used to select the right resource for the current screen for the Android platform.

Configuration Qualifier
Screen Characteristic Qualifier Description
Size small, normal, large, xlarge Screen size type
Density ldpi, mdpi, hdpi, xhdpi, nodpi, tvdpi Density type
Orientation land, port Landscape or portrait mode

Under the project res folder, you can divide resources for each screen characteristic with the combination of - .

e.g.) res/layout-small/my_layout.xml //layout for small screens
         res/drawable-land-mdpi// mdpi drawable for mdpi landscape screens
         res/drawable-port-mdpi// mdpi drawable for mdpi portrait screens
         res/drawable-xhdpi// xhdpi drawable for xhdpi screens

Even if resources for each screen characteristic do not match exactly, the Android platform will find and apply the optimal replacement resource.

e.g.) If a big-screen device does not have layout-large/my_layout.xml but has,
         layout/my_layout.xml or layout-small/my_layout.xml, use the layout.

Please note that replacement resources only refer to the res folder of a smaller screen. If a small-screen device has a layout only in res/layout-large, it will not be referred to, and an error will occur.

Using the optimal resource and layout for each resolution

This is how the Android platform selects the optimal resource and layout.

dawable/
dawable-en/
dawable-fr-rCA/
dawable-en-port/v dawable-en-notouch-12key/
dawable-port-ldpi/
dawable-port-notouch-12key/

< Resource examples >

Locale = en-GB
Screen orientation = port
Screen pixel density = hdpi
Touchscreen type = notouch
Primary text input method = 12key

< device configuration examples >
Flowchart of how Android finds the best-matching resource. Figure2. Flowchart of how Android finds the best-matching resource.
  1. 1.

    Remove directories that conflict with the device configuration
    Because the locale is set to en-GB, drawable-fr-rCA/ will be removed.

  2. 2.

    Check qualifiers in the order of MCC, MNC, and Language.

  3. 3.

    Try matching.
    If qualifiers do not match, go back to Step 2 and check the next qualifier. When they match, follow Step 4.

  4. 4

    Check the directories and remove those that do not have qualifiers.
    drawable/, drawable-port-ldpi/, drawable-port-notouch-12key/

  5. 5

    Follow Step 2, 3, and 4 repeatedly until only one directory matches.
    drawable-en/, drawable-en-notouch-12key/will be removed.
    In the above example, drawable-en-port will be selected and used in the last step.

Reference for Developing Resolutions for Samsung Tablets

Below are the types of resolutions for Samsung tablets.

Below are the types of resolutions for Samsung tablets
MKT Name Size Resolution key
Galaxy Tab S 10.5 10.5” WQXGA (xhdpi) Recent/Home/Back (H/W key)
Galaxy Tab S 8.4 8.4” WQXGA (xhdpi) Recent/Home/Back (H/W key)
Galaxy Tab 4 8.0 8.0” WXGA (mdpi) Recent/Home/Back (H/W key)
Galaxy Note Pro 12.2 12.2” WQXGA (xhdpi) Recent/Home/Back (H/W key)
Galaxy Tab pro 8.4 8.4” WQXGA (xhdpi) Recent/Home/Back (H/W key)
Galaxy Note 10.1 2014 Edition 10.1” WQXGA (xhdpi) Menu/Home/Back (H/W key)
Galaxy Note 8.0 8.0” WXGA (tvdpi) Menu/Home/Back (H/W key)
Galaxy Tab 3 8.0 8.0” WXGA (tvdpi) Menu/Home/Back (H/W key)
Galaxy Note 10.1 2012 Edition 10.1” WXGA (mdpi) Navigation bar in Display (S/W key)
Galaxy Tab 8.9 LTE 8.9” WXGA (mdpi) Navigation bar in Display (S/W key)
Galaxy Tab 7.7 7.7” WXGA (mdpi) Navigation bar in Display (S/W key)

You must divide navigation keys into those created as S/W buttons on the screen and those as H/W buttons. Also, depending on the model, you need to create a layout for recent keys and menu keys separately.

How to use a new size qualifier

smallestWidth (sw) and available screen height (h) are used. If you use smallestWidth, you can provide each resolution. In order to categorize devices with the S/W navigation bar, you must use the available screen height. Because the height of 46dp (for the height of the navigation bar) exists, if you make the available screen height bigger than 46dp (e.g. 800-46=754), the resource folder might not be referred to. Please remember this. Below are examples of creating resource folders for Samsung tablets.

How to use a new size qualifier
Galaxy Note 10.1 2012 Edition drawable-sw800dp-mdpi S/W key
Galaxy Note 3 8.0
Galaxy Note 8.0
drawable-sw600dp-tvdpi H/W key
Galaxy Tab 4 8.0 drawable-sw800dp-h1255dp-port-mdpi
drawable-sw800dp-h775dp-land-mdpi
H/W key
Galaxy Note 10.1 2014 Edition
Galaxy Note Pro 12.2
drawable-sw800dp-xhdpi H/W key
How to categorize a Menu key

ViewConfiguration.get(context).hasPermanentMenuKey() is supported in the Android API 14 and later.

References

For more information, please refer to the below chapters.