Android Apps support different screens (size, density)

How to build a user interface using Android layouts for all types of devices using the Android layout designed UI interface for different Android devices

Android provides a flexible framework for UI Design This allows your app to display different layouts for different device s (show different layouts for different devices), create custom UI widgets (custom UI component), and even control aspects of the system UI outside your app ' s window ( Control system UI).

Theme One: Support different screen sizes

There are several ways to support multiple screens:

1. Ensure the layout of the design can adapt to different sizes of the screen;

2. Can provide the appropriate UI layout according to the screen configuration;

3. Ensure that the correct layout is applied to the correct screen size;

4. Provide the correct bitmap thumbnail file;

Use "Wrap_content" and "Match_parent" in the layout file

To ensure this your layout is flexible and adapts to different screens sizes, you should use "Wrap_content" and "Match_pare NT "for the width and height of some view components.

Because "Wrap_content" will provide the smallest layout space based on the contents of the view, and "Match_parent" provides the same layout size based on the parent container.

Instead of hard-coded dimensions by using "Wrap_content" and "match_parent", only the space required by the control is used, respectively, or expanded to fill all valid spaces.

<linearlayout xmlns:android= "http://schemas.android.com/apk/res/android" android:orientation= "vertical" Android:layout_width= "Match_parent" android:layout_height= "match_parent" > <linearlayout android:layout_                  Width= "Match_parent" android:id= "@+id/linearlayout1" android:gravity= "center" android:layout_height= "50DP" > <imageview android:id= "@+id/imageview1" Android:la yout_height= "Wrap_content" android:layout_width= "wrap_content" android:src= "@drawable/ Logo "android:paddingright=" 30DP "android:layout_gravity=" left "Android              oid:layout_weight= "0"/> <view android:layout_height= "wrap_content" android:id= "@+id/view1" Android:layout_width= "Wrap_content" android:layout_weight= "1"/> <button android:id= "@ +id/categorybutton "Android:background= "@drawable/button_bg" android:layout_height= "Match_parent" Android:layout_weig ht= "0" android:layout_width= "120DP" style= "@style/categorybuttonstyle"/> </linearla yout> <fragment android:id= "@+id/headlines" android:layout_height= "Fill_parent" Androi D:name= "Com.example.android.newsreader.HeadlinesFragment" android:layout_width= "Match_parent"/></linea Rlayout>

The above. XML layout file adapts to different screen orientations, noting that the dimensions of the component are automatically adaptable and high.

Using the Relativelayout layout

You can use LinearLayout and wrap_content and match_parent combinations to build complex layouts, but LinearLayout does not allow precise control over the relationship of its sub-view The sub view can only be arranged in a linear layout in rows or columns, one after the other. If you want the child view to not simply row rows or columns, a better approach is to use relativelayout; it allows you to specify the position relationship between controls and controls in the layout.

<?xml version= "1.0" encoding= "Utf-8"? ><relativelayout xmlns:android= "http://schemas.android.com/apk/res/ Android "Android:layout_width=" Match_parent "android:layout_height=" Match_parent "> <textview Android : id= "@+id/label" android:layout_width= "match_parent" android:layout_height= "Wrap_content" Android:tex T= "Type here:"/> <edittext android:id= "@+id/entry" android:layout_width= "Match_parent" Andro        id:layout_height= "Wrap_content" android:layout_below= "@id/label"/> <button android:id= "@+id/ok" Android:layout_width= "Wrap_content" android:layout_height= "wrap_content" android:layout_below= "@id/entry    "Android:layout_alignparentright=" true "android:layout_marginleft=" 10DP "android:text=" OK "/> <button android:layout_width= "wrap_content" android:layout_height= "Wrap_content" android:layout_to leftof= "@id/ok" Android:layout_aligntop= "@id/ok" android:text= "Cancel"/></relativelayout> 

Although the size of the system screen has changed, the spatial relationship between its sub-view has been specified by Relativelayout.layoutparams.

Using Dimension Qualification

The qualifier here mainly refers to the layout file, which is stored in a folder such as large, SW600DP and so on when writing the layout file, which tells the system to select the corresponding layouts according to the screen. such as the Layout-large folder in the example below.

We know how to write flexible layouts or relative layouts that can be stretched or filled to accommodate different screens, but they do not provide the best user experience for every different screen size. Therefore, your app should not just implement flexible layouts, but also provide several different layouts for different screen configurations.

The qualifiers, which allows the runtime to automatically select the appropriate resource BAS Ed on the current device's configuration (such as a different layout design for different screen sizes). This can be done by configuring the qualifies, which allows you to choose the right layout resource at run time based on the configuration of your current device (e.g. different screen sizes) to design a different layout.

For example, many applications have a "two panes" mode for large screens (the app may implement a list item in one pane, the other is the content of the list), the tablet and the TV are large enough to fit on one screen, but the phone screen can only be displayed separately.

Res/layout/main.xml for Single-pane (default) layout

<linearlayout xmlns:android= "http://schemas.android.com/apk/res/android"    android:orientation= "vertical"    android:layout_width= "match_parent"    android:layout_height= "match_parent" >    <fragment android: Id= "@+id/headlines"              android:layout_height= "fill_parent"              android:name= " Com.example.android.newsreader.HeadlinesFragment "              android:layout_width=" Match_parent "/></ Linearlayout>

Res/layout-large/main.xml for Two-pane layout

<linearlayout xmlns:android= "http://schemas.android.com/apk/res/android"    android:layout_width= "Fill_ Parent "    android:layout_height=" fill_parent "    android:orientation=" Horizontal ">    <fragment Android:id= "@+id/headlines"              android:layout_height= "fill_parent"              android:name= " Com.example.android.newsreader.HeadlinesFragment "              android:layout_width=" 400DP "              android:layout_ marginright= "10DP"/>    <fragment android:id= "@+id/article" android:layout_height= "Fill_parent"              android:name= "com.example.android.newsreader.ArticleFragment"              android:layout_width= "fill_parent"/ ></LinearLayout>

Note the directory name "large" qualifier for the second layout file, which selects the layout file on a large-sized device screen (such as a 7-inch tablet or other large-screen device), while other smaller devices choose another layout without qualifiers (i.e. the first layout file).

Use minimum width limit

Before Android 3.2, the developer had another difficulty, which was the "large" screen size of the Android device, including the Dell Streak (device name), the Old Galaxy Tab and the general 7-inch tablet, There are many applications that want to define different layouts for these different devices, such as 5 and 7-inch devices, but these devices are defined in order to large the size screen. It's also because of this, so Android starts using the minimum width qualifier at 3.2. The minimum width qualifier allows you to specify different layouts based on the minimum width of the device (DP units). For example, the traditional 7-inch tablet has a minimum width of 600DP, and if you want your UI to display two panes on such a screen (not a pane that appears on a small screen), you can use the same two layout files mentioned in the previous section. The difference is that using sw600 to specify a layout of two squares is used on devices with a minimum width of 600DP.

Modify the above big screen file name to: Res/layout-sw600dp/main.xml

This means that when the minimum width of your device is equal to 600DP or larger, the system chooses the layout of the Layout-sw600dp/main.xml (two panes), while the smaller screen selects the layout of the Layout/main.xml (single pane). However, on devices prior to 3.2, this is not a good choice. Because SW600DP has not appeared as a qualifier before 3.2, you still need to use the large qualifier. So, you should still have a layout file named Res/layout-large/main.xml, just like Res/layout-sw600dp/main.xml.

Using layout aliases

The Smallest-width qualifier is available only on Android 3.2 and above.

To match different size screens, the general practice is as follows:

Res/layout/main.xml--Single-pane layout

Res/layout-large--Multi-pane layout

RES/LAYOUT-SW600DP--Multi-pane layout

To facilitate file maintenance, you can use file aliases (equivalent to using a file selector)

For example, define two files first, as follows:

Res/layout/main.xml, Single-pane layout

Res/layout/main_twopanes.xml, Two-pane layout

As above, is the file under the same folder in two.

In order to use the file selector, you can define the following files: Res/values-large/layout.xml

<resources>    <item name= "main" type= "layout" > @layout/main_twopanes</item></resources>

Add the following files at the same time: Res/values-sw600dp/layout.xml

<resources>    <item name= "main" type= "layout" > @layout/main_twopanes</item></resources>

The above main_twopanes is the same file, but only the main_twopanes is set to the alias Main, respectively, in the large and SW600DP selectors, They can be adapted to any version of Android tablet and TV (before 3.2 The tablet and TV can match large directly, while 3.2 or more systems match SW600DP)

The system will choose different layout files according to different system properties, if you choose Values-large Resource Container, select Main_twopanes.xml in layout/, and if you select VALUES-SW600DP resource container, the main in layout/will also be selected. _twopanes.xml. But all layout files use the Main.xml name.

Use direction limits

The behavior of a pest layout in different screen sizes and orientations is as follows:

Small screen, portrait-I   pane, with logosmall-screen, landscape  -A-pane, with Logo7 "tablet , Portrait---      pane, with Action bar7 tablet, landscape-I     dual pane, wide, with action Bar10 tabl ET, Portrait---     dual pane, narrow, with action bar10 "tablet, landscape    --dual pane, wide, with action Ba RTV, Landscape--            dual pane, wide, with action Bar

Based on the above behavior, four different layouts are summed up:

Res/layout/onepane.xml

<linearlayout xmlns:android= "http://schemas.android.com/apk/res/android"    android:orientation= "vertical"    android:layout_width= "match_parent"    android:layout_height= "match_parent" >    <fragment android: Id= "@+id/headlines"              android:layout_height= "fill_parent"              android:name= " Com.example.android.newsreader.HeadlinesFragment "              android:layout_width=" Match_parent "/></ Linearlayout>

Res/layout/onepane_with_bar.xml

<linearlayout xmlns:android= "http://schemas.android.com/apk/res/android" android:orientation= "vertical" Android:layout_width= "Match_parent" android:layout_height= "match_parent" > <linearlayout android:layout_                  Width= "Match_parent" android:id= "@+id/linearlayout1" android:gravity= "center" android:layout_height= "50DP" > <imageview android:id= "@+id/imageview1" Android:la yout_height= "Wrap_content" android:layout_width= "wrap_content" android:src= "@drawable/ Logo "android:paddingright=" 30DP "android:layout_gravity=" left "Android              oid:layout_weight= "0"/> <view android:layout_height= "wrap_content" android:id= "@+id/view1" Android:layout_width= "Wrap_content" android:layout_weight= "1"/> <button android:id= "@ +id/categorybutton "Android:background= "@drawable/button_bg" android:layout_height= "Match_parent" Android:layout_weig ht= "0" android:layout_width= "120DP" style= "@style/categorybuttonstyle"/> </linearla yout> <fragment android:id= "@+id/headlines" android:layout_height= "Fill_parent" Androi D:name= "Com.example.android.newsreader.HeadlinesFragment" android:layout_width= "Match_parent"/></linea Rlayout>

Res/layout/twopanes.xml

<linearlayout xmlns:android= "http://schemas.android.com/apk/res/android"    android:layout_width= "Fill_ Parent "    android:layout_height=" fill_parent "    android:orientation=" Horizontal ">    <fragment Android:id= "@+id/headlines"              android:layout_height= "fill_parent"              android:name= " Com.example.android.newsreader.HeadlinesFragment "              android:layout_width=" 400DP "              android:layout_ marginright= "10DP"/>    <fragment android:id= "@+id/article" android:layout_height= "Fill_parent"              android:name= "com.example.android.newsreader.ArticleFragment"              android:layout_width= "fill_parent"/ ></LinearLayout>

Res/layout/twopanes_narrow.xml

<linearlayout xmlns:android= "http://schemas.android.com/apk/res/android"    android:layout_width= "Fill_ Parent "    android:layout_height=" fill_parent "    android:orientation=" Horizontal ">    <fragment Android:id= "@+id/headlines"              android:layout_height= "fill_parent"              android:name= " Com.example.android.newsreader.HeadlinesFragment "              android:layout_width=" 200DP "              android:layout_ marginright= "10DP"/>    <fragment android:id= "@+id/article" android:layout_height= "Fill_parent"              android:name= "com.example.android.newsreader.ArticleFragment"              android:layout_width= "fill_parent"/ ></LinearLayout>

The remaining problem is to use the Orientation qualifier to match the corresponding layout.

Res/values/layouts.xml

<resources>    <item name= "main_layout" type= "layout" > @layout/onepane_with_bar</item>    <bool name= "Has_two_panes" >false</bool></resources>

Res/values-sw600dp-land/layouts.xml

<resources>    <item name= "main_layout" type= "layout" > @layout/twopanes</item>    <bool Name= "Has_two_panes" >true</bool></resources>

Res/values-sw600dp-port/layouts.xml

<resources>    <item name= "main_layout" type= "layout" > @layout/onepane</item>    <bool Name = "Has_two_panes" >false</bool></resources>

Res/values-large-land/layouts.xml

<resources>    <item name= "main_layout" type= "layout" > @layout/twopanes</item>    <bool Name= "Has_two_panes" >true</bool></resources>

Res/values-large-port/layouts.xml

<resources>    <item name= "main_layout" type= "layout" > @layout/twopanes</item>    <bool Name= "Has_two_panes" >true</bool></resources>

In addition, Nine-patch pictures can be used for screens that support different sizes.

Theme Two: Support different screen densities

Use independent resolution

For devices of different screen densities, what we can do is provide different resources and use independent resolution to provide support.

There is a problem with using pixel units to define the layout size. Because different screens have different pixel densities, the same units of pixels will have different physical dimensions on different devices. "DP" represents a density independent pixel, which is equivalent to the physical size of a pixel in 160dpi; "SP" is also a basic unit, but it is mainly used in the text size (it is also a size independent pixel), so when defining the text size should use this unit of specification.

When we define the distance between two view, use the following practices:

<button android:layout_width= "wrap_content"     android:layout_height= "wrap_content"     android:text= "@ String/clickme "    android:layout_margintop=" 20DP "/>

When we define text size, use the following practices:

<textview android:layout_width= "match_parent"     android:layout_height= "wrap_content"     android:textSize= "20sp"/>

Available with optional pictures

Because Android can run on many different screen density devices, you should provide different bitmap resources for different device densities: small screen (Low), Medium (medium), High (higher), and superelevation (extra-high) density. This will help you to get very good graphics quality and performance in all screen densities.

To provide a better user experience, you should use the following specifications to scale the image size and provide the appropriate bitmap resources for different screen densities:

This means so if you generate a 200x200 image for xhdpi devices, you should generate the same resource in 150x150 for HD Pi, 100x100 for mdpi and finally a 75x75 an image for ldpi devices. This means that if you need a xhdpi image on a 200x200 device, then you need a 150x150 image for hdpi , 100x100 is used for MDPI and 75x75 user ldpi devices. Then put these picture resources in the res/corresponding directory, the system will automatically according to the current device screen density automatically select the appropriate resources to load.

Then, at any time during runtime, the system needs to use the @drawable/awesomeimage resource, which automatically selects the best resource based on the current screen resolution.

Topic Three:

Android Apps support different screens (size, density)