I've learned a lot. It turns out that Android screen adaptation can be played like this

Why screen adaptation?

Fragmentation

• Brand model fragmentation
• Screen size fragmentation
• Operating system fragmentation

In order to ensure that users get a consistent user experience and that a certain element has the same display effect on Android phones of different sizes and resolutions, we need to perform screen adaptation.

Basic Concepts

Screen size

Screen size refers to the length of the screen diagonal, measured in inches, 1 inch = 2.54 cm

Screen resolution

The total number of pixels in the horizontal and vertical directions of the mobile phone. The unit is pixel. 1px = 1 pixel. For example, 1080x1920 means there are 1080 pixels in the width direction and 1920 pixels in the height direction.

Screen pixel density

The number of pixels per inch is measured in dpi, dots per inch. For simplicity, Android groups all screen densities into six general densities: low, medium, high, extra high, extra extra high, and extra extra extra high.

• ldpi(low)~120dpi
• mdpi(medium)~160dpi
• hdpi (high) ~ 240dpi
• xhdpi (ultra high) ~ 320dpi
• xxhdpi (super high) ~ 480dpi
• xxxhdpi (super super high) ~ 640dpi

dpi_example

Screen density independent pixel dp (dip)

Density Independent Pixels, that is, density-independent pixels.

• 160dpi, 1dp = 1px
• 240dpi, 1dp = 1.5px
• 320dpi, 1dp = 2px
• 480dpi, 1dp = 3px
• 640dpi, 1dp = 4px

• The effect of using px on low, medium and high screen densities

density-test-bad

• Effect of using dp on low, medium and high screen densities

dimen_example2

Independent scale pixel sp

Scale Independent Pixels, also known as sp or sip.

This unit is used to set the text size during Android development. It can be scaled according to the font size option. It is recommended to use 12sp, 14sp, 18sp, and 22sp as the font size. It is not recommended to use odd numbers and decimals, which can easily cause loss of precision. Fonts smaller than 12sp will be too small for users to see clearly.

Screen adaptation and picture adaptation

When designing icons, the five mainstream pixel densities (mdpi, hdpi, xhdpi, xxhdpi and xxxdpi) should be scaled in the ratio of 2:3:4:6:8. For example, a launcher image ic_launcher.png has the following sizes in each pixel density folder:

• ldpi(low)
• mdpi(medium)48*48
• HDPI (high) 72*72
• xhdpi (ultra high) 96*96
• xxhdpi (super high) 144*144
• xxxhdpi (super super high) 192*192

Problems

• Producing a set of images for each resolution adds a lot of work to the artist or designer
• The apk package of the Android project file becomes very large

Workaround

Android SDK loading picture process

• The Android SDK will automatically select the corresponding resource file for rendering and loading according to the screen density. For example, if the SDK detects that the resolution of your phone is xhdpi, it will first look for the corresponding image resource in the xhdpi folder;
• If there is no image resource in the xhdpi folder, it will search in a folder with a higher resolution, such as xxhdpi, until it finds an image resource with the same name and scales it down to an xhpi image;
• If the image is still not found when searching upwards, it will search in low-resolution folders, such as hdpi, until it finds an image resource with the same name and scales it up to an xhpi image.

According to the process of loading pictures, it can be concluded that theoretically it is enough to provide a set of pictures.

So which resolution specification should be provided?

In principle, the higher the better, combined with the current mainstream resolution screen

Automatically stretch images

ninepatch_raw

ninepatch_examples

Screen adaptation layout adaptation

Layout parameters

Use wrap_content, match_parent, layout_weight.

Use of weight

weight_examples

• When layout_width is 0dp, layout_weight is 1 and 2 respectively

 <LinearLayout
      android:layout_width= "match_parent"  
      android:layout_height= "wrap_content"  
      android:orientation= "horizontal" > 
 
 <Button
          android:layout_width= "0dp"  
          android:layout_height= "wrap_content"  
          android:layout_weight= "1"  
          android:text= "weight = 1" /> 
 
 <Button
          android:layout_width= "0dp"  
          android:layout_height= "wrap_content"  
          android:layout_weight= "2"  
          android:text= "weight = 2" />
 </LinearLayout>

When layout_width is match_parent, layout_weight is 1 and 2 respectively

 <LinearLayout
      android:layout_width= "match_parent"  
      android:layout_height= "wrap_content"  
      android:orientation= "horizontal" > 
 
 <Button
          android:layout_width= "match_parent"  
          android:layout_height= "wrap_content"  
          android:layout_weight= "1"  
          android:text= "weight = 1" /> 
 
 <Button
          android:layout_width= "match_parent"  
          android:layout_height= "wrap_content"  
          android:layout_weight= "2"  
          android:text= "weight = 2" />
 </LinearLayout>

Calculation of weight

Width = original width + weight ratio * remaining width

• When layout_width is 0dp, layout_weight is 1 and 2 respectively

First button: width = 0 + 1/3 * screen width = 1/3 screen width

Second button: width = 0 + 2/3 * screen width = 2/3 screen width

• When layout_width is match_parent, layout_weight is 1 and 2 respectively

First button: Width = screen width + 1/3 (screen width - 2 screen widths) = 2/3 screen width

Second button: Width = screen width + 2/3 (screen width - 2 screen width) = 1/3 screen width

Layout Usage

Use relative layout and disable absolute layout.

Qualifiers

Size Qualifiers

• On a smaller mobile screen, load the layout folder layout
• On tablet and TV screens (>7 inches), load the layout from the layout-large folder
• Before Android 3.2

Minimum Width Qualifier

• On a smaller mobile screen, load the layout folder layout
• For a standard 7-inch tablet (whose minimum width is 600 dp), load the layout in the layout-sw600dp folder
• In Android 3.2 and later versions

Layout Aliases

• Single panel (default) layout for mobile phones: res/layout/activity_main.xml
• Dual-panel layout for tablets > 7 inches (before Android 3.2): res/layout-large/activity_main.xml
• Adapt to the dual-panel layout of tablets with size > 7 inches (Android 3.2 and later): res/layout-sw600dp/activity_main.xml

The XML contents of the two files are exactly the same, which will lead to duplication of file names and a series of maintenance problems. When modifying one file, you may forget to modify the other. So in order to solve this duplication problem, we introduced layout aliases.

• Single panel (default) layout for mobile phones: res/layout/activity_main.xml
• Adapt to the dual-pane layout of tablets with size > 7 inches: res/layout/activity_twopanes.xml
• resalues/layout.xml

 <?xml version= "1.0" encoding= "utf-8" ?>
 <resources>
     <item name = "main" type= "layout" >@layout/activity_main</item>
 </resources>

• resalues-large/layout.xml

 <?xml version= "1.0" encoding= "utf-8" ?>
 <resources>
      <item name = "main" type= "layout" >@layout/activity_twopanes</item>
 </resources>

• resalues-sw600dp/layout.xml

 <?xml version= "1.0" encoding= "utf-8" ?>
 <resources>
      <item name = "main" type= "layout" >@layout/activity_twopanes</item>
 </resources>

• setContentView(R.layout.main);

Screen orientation qualifiers

• res/layout-land
• res/layout-port
• res/layout-sw600dp-land
• res/layout-sw600dp-port

Screen adaptation: dimen adaptation

• Nexus 4 (4.7 inches 768x1280: xhdpi)

Nexus S (4 inches 480x800: hdpi)

dimen_example2

Even if we use dp, it still cannot solve the problem of screen resolution adaptation. We can create different dimen values ​​for different screens.

• resalues/dimens.xml

 <resources>
 <dimen name = "button_length_1" >180dp</dimen>
 <dimen name = "button_length_2" >160dp</dimen>
 </resources>

• resalues-480x800/dimens.xml

 <resources>
      <dimen name = "button_length_1" >113dp</dimen>
      <dimen name = "button_length_2" >100dp</dimen>
 </resources>

Screen adaptation percentage layout

• Official Documentation
• Github Sample

 <?xml version= "1.0" encoding= "utf-8" ?>
  <android.support.percent.PercentRelativeLayout
      xmlns:android= "http://schemas.android.com/apk/res/android"  
      xmlns:app= "http://schemas.android.com/apk/res-auto"  
      android:layout_width= "match_parent"  
      android:layout_height= "wrap_content" > 
 
 <Button
          android:layout_width= "0dp"  
          android:layout_height= "wrap_content"  
 android:text= "30%"  
          app:layout_widthPercent= "30%" /> 
 
 <Button
          android:layout_width= "0dp"  
          android:layout_height= "wrap_content"  
          android:layout_alignParentRight= "true"  
 android:text= "20%"  
          app:layout_widthPercent= "20%" /> 
 
  </android.support.percent.PercentRelativeLayout>

Screen Adaptation - Adaptive User Interface

newsreader_land

newsreader_port

When NewsReader is in landscape mode, it has two panels, with HeadLinesFragment on the left and ArticleFragment on the right. Clicking on a news title switches the content of ArticleFragment. When NewsReader is in portrait mode, it has a single panel, with only HeadLinesFragment. Clicking on a news title switches to ArticleActivity to display the news content. Therefore, to achieve such landscape and portrait adaptation, it is not possible to achieve it only through layout. Different business logic processing also requires writing code to complete it. This is our adaptive user interface.

Using layout aliases

• resalues/layouts.xml

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

• resalues-sw600dp-land/layouts.xml

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

• resalues-sw600dp-port/layouts.xml

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

Determine whether it is a single-sided or double-sided panel

 View articleView = findViewById(R.id.article);
 mIsDualPane = articleView != null && articleView.getVisibility() == View .VISIBLE; //If ArticleFragment can be found, it is a dual panel

Different business logic of single and double panels

 public void onHeadlineSelected( int   index ) {
    mArtIndex = index ; if (mIsDualPane) { 
 
       // display it on the article fragment
        mArticleFragment.displayArticle(mCurrentCat.getArticle( index ));
 } else { 
 
       // use separate activity
        Intent i = new Intent(this, ArticleActivity.class);
        i.putExtra( "catIndex" , mCatIndex);
        i.putExtra( "artIndex" , index );
 startActivity(i);
 }
 }