Support different screen sizes
Different screen sizes are supported by the following methods:
- Make sure that your layout is resized appropriately according to the screen
- Provide appropriate UI layout based on screen configuration
- Ensure that the right layout is applied to the right screen
- Provide bitmaps that can be scaled normally
Specific adaptation scheme:
1. Use "wrap_content" and "match_parent"
To ensure that your layout is flexible enough to accommodate different screen sizes, you should use "wrap_content" and "match_parent" instead of hard coding for the width and height of some view components.
2. Use Relative Layout
_Relative Layout allows you to specify layout based on spatial relationships between components.
3. Use size qualifiers
_These two schemes can not provide the best user experience for each screen size. Therefore, your application should not only achieve flexible layout, but also provide a variety of alternative layouts for different screen configurations. Configuration qualifiers can be used to achieve this purpose, which allows running components to automatically select appropriate resources according to current device configurations, such as different layout designs for different screen sizes.
For example, many applications implement a "double pane" mode for large screens (applications can display a list of items in one pane and project content in another pane). Tablets and TV s are large enough to accommodate two panes on one screen at the same time, but mobile screens can only display them independently. Therefore, to implement these layouts, you can create the following files:
res/layout/main.xml, single pane (default) layout:

    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, double 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>

Notice the large qualifier in the name of the second layout directory. This layout will be selected for devices classified as large screens (e.g., tablets of 7 inches and larger sizes). For small devices, another layout (infinite determinant) will be selected.
4. Use the Minimum Width Qualifier
_Android introduced the "minimum width" qualifier in Android 3.2. Allows you to lock the target on a screen with a specific minimum width (dp).
For example, a typical 7-inch tablet has a minimum width of 600 dp, so if you want your UI to display two panes on these screens (but a single list on a smaller screen), you can also use the previous two layouts for single-pane and double-pane layouts, instead of using the large size qualifier, you can use sw 600dp as the minimum width. The 600 DP screen specifies a double pane layout:

• res/layout/main.xml, 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-sw600dp/main.xml, double 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>

This means that devices with a minimum width greater than or equal to 600dp will choose layout-sw600dp/main.xml (double pane) layout, while devices with smaller screens will choose layout/main.xml (single pane) layout.

However, this approach does not work well on devices less than version 3.2 because they cannot recognize sw600dp as a size qualifier, so you still need to use the large qualifier. Therefore, you should create a file named res/layout-large/main.xml that is exactly the same as res/layout-sw600dp/main.xml. The techniques described below can help you avoid duplicating layout files as a result.
5. Use layout aliases
_Minimum width qualifier is available only on Android 3.2 and later. Therefore, you should still use abstract size containers (small, normal, large and super large) compatible with earlier versions. For example, if you want your UI to display a single pane UI on your mobile phone, but a multi-pane UI on a 7-inch tablet, TV, and other large-screen devices, you need to provide the following files:

• res/layout/main.xml: Single pane layout
• res/layout-large: Multi-pane layout
• res/layout-sw600dp: Multi-pane layout

The latter two files are identical, because one will be matched by Android 3.2 devices, and the other will take care of the need for tablets and TV s using earlier versions of Android.

To avoid the same duplicate files (and consequent maintenance challenges) for tablets and TV s, you can use alias files. For example, you can define the following layout:

• res/layout/main.xml, single pane layout
• res/layout/main_twopanes.xml, double pane layout

And add the following two files:

• res/values-large/layout.xml:

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

• res/values-sw600dp/layout.xml:

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

The latter two files are identical in content, but they don't actually define the layout, they just set main as an alias for main_twopanes. Because these files have larges and sw600dp selectors, they are suitable for any Android version of tablets and televisions (tablets and televisions less than 3.2 will match large, and those higher than 3.2 will match sw600dp).
6. Use screen orientation qualifiers
_Some layouts perform well both horizontally and vertically, but most of them can be further optimized by adjusting. In the News Reader sample application, the following are the behaviors of the layout in various screen sizes and directions:

Small screen, vertical: single pane, with logo
Small screen, horizontal: single pane, with logo
7 inch tablet, vertical: single pane, with operation bar
7 inch tablet, horizontal: double pane, wide, with operation bar
10 inch tablet, vertical: double pane, narrow, with operation bar
10 inch tablet, horizontal: double pane, wide, with operation bar
TV, Horizontal: Double Pane, Wide, with Operating Bar
Therefore, each of the above layouts is defined in an XML file in the res/layout/directory. If each layout is then allocated to various screen configurations, the application matches them with each configuration using layout aliases:

• 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:layout_height="wrap_content"
                   android:layout_width="wrap_content"
                   android:src="@drawable/logo"
                   android:paddingRight="30dp"
                   android:layout_gravity="left"
                   android: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_weight="0"
                android:layout_width="120dp"
                style="@style/CategoryButtonStyle"/>
    </LinearLayout>

    <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/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>

So far all possible layouts have been defined, and now you need only use configuration qualifiers to map the correct layout to each configuration. Now you can use layout alias techniques to do this:

• 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_narrow</item>
    <bool name="has_two_panes">true</bool>
</resources>

7. Use 9-Palace Lattice Bitmap (.9.png)