Screen Adaptation Plan

Background

Due to the severe fragmentation of Android devices, the same layout displays differently on various phones. To ensure the driver app's UI remains consistent across all devices and enhance user experience, screen adaptation for the app is necessary.

Scheme Research

1. Comparison of Screen Adaptation Schemes

SW Qualifier Scheme Developers create a series of values-sw<N>dp folders (containing dimens.xml files) based on the smallest width of mainstream screens. When running the project on a device, the system matches the appropriate values-sw<N>dp folder according to the current device's smallest width. If the exact match is not found, the system will look for the nearest smaller or equal values-sw<N>dp folder.

Advantages:

• Very stable with a minimal chance of unexpected issues
• No performance loss
• Adaptation range is controllable without affecting third-party libraries
• Low learning curve with the help of plugins

Disadvantages:

• High intrusiveness with extensive use of dimens
• Increases package size with multiple dimens resource files
• High maintenance cost

Reference: Upgrade your screen adaptation method! - SmallestWidth Qualifier Adaptation Scheme

Today's Headlines Scheme In this scheme, all units in the layout file are converted to px. The commonly used dp unit is converted to px based on the formula dp = px / density. By dynamically modifying the density value according to different devices, the scaling ratio of the UI is consistent across devices.

Known Formula: Screen total width in px / density = screen total width in dp

Derived Formula: density = current device screen total width (in px) / design width (in dp)

Advantages:

1. Low intrusiveness
2. Low integration cost
3. No impact on package size
4. No performance loss
5. Third-party library controls are also adaptable

Disadvantages:

1. Stability is not as good as the SW scheme

Scheme Comparison

Conclusion

Considering our project emphasizes intrusiveness, package size, and usage cost, we will adopt the Today's Headlines screen adaptation scheme. The library offers solutions for differences in design drafts of third-party controls, and our specific app project has successfully implemented this scheme with stable performance.

AndroidAutoSize Library

Introduction A screen adaptation scheme based on the Today's Headlines scheme.

GitHub: JessYanCoding/AndroidAutoSize: A low-cost Android screen adaptation solution (Today's Headlines screen adaptation ultimate version).

Main Features:

1. Provides main and secondary units
2. Supports custom activity and fragment adaptation
3. Supports third-party library page adaptation

Project Adaptation Work

1. Introduce AutoSize Library:

dependencies { implementation 'com.github.JessYanCoding:AndroidAutoSize:v1.2.1' }        

<manifest> 
  <application> 
    <meta-data android:name="design_width_in_dp" android:value="375">
    <meta-data android:name="design_height_in_dp" android:value="775"/>          </application> 
</manifest>        

2. Third-Party Custom View Adaptation:

1. TwinklingRefreshLayout (Order list page): No adaptation needed
2. ChipsLayoutManager (Upload goods on the order page): No adaptation needed
3. System Snackbar (Top order fee): No adaptation needed
4. NewbieGuide (Modify phone number, route recommendation on the order page): No adaptation needed, but some devices do not fully occupy the original layout
5. FlycoTabLayout (Message center page): No adaptation needed
6. PageIndicatorView (Image preview): No adaptation needed
7. SlideLayout (IM conversation list): No adaptation needed
8. ShimmerFrameLayout (Multi-factor labels): No adaptation needed
9. FlowLayout (Confirm carriage type communication page): No adaptation needed

3. Horizontal Screen Adaptation: No horizontal screen pages currently

4. Dialog and Toast Adaptation: No adaptation issues found

5. Immersive Status Bar Adaptation: No adaptation needed

6. Low-End Device Adaptation:

class AutoSizeTask(val application: Application) : Task(application, "AutoSizeTask", true) {
    override fun run(context: Context?) {
        if (BuildConfig.DEBUG || ConfigUtil.getValue(MDAPConfigConstant.FLAG_AUTO_SIZE, Boolean::class.java, false)) {
            AutoSizeConfig.getInstance()
                .setDesignWidthInDp(375)
                .designHeightInDp = 778
            AutoSize.checkAndInit(application)
           LogWrapper.online().i(OnLineLogConstant.TAG_AUTO_SIZE, "Screen adaptation function initialized")
        }
    }
}        

7. RecyclerView Adaptation: Found that the item font size in some lists changes after returning from WebView. Solved by resetting density in onBindViewHolder.

// BaseRecyclerAdapter.java
@Override
public void onBindViewHolder(BaseRecyclerViewHolder holder, int position) {
    if (holder != null && holder.itemView.getContext() instanceof Activity) {
        AutoSize.autoConvertDensityOfGlobal((Activity) holder.itemView.getContext());
    }

    if (getItemViewType(position) != TYPE_HEADER && getItemViewType(position) != TYPE_FOOTER) {
        if (mHeaderView != null) {
            holder.setData(mDatas.get(position - 1));
        } else {
            holder.setData(mDatas.get(position));
        }
    }
}        

Reference Issue: Recyclerview item layout disorder · Issue #59 · JessYanCoding/AndroidAutoSize

8. Degradation Handling: Control whether to enable screen adaptation via Config parameter switch.

Other References:

• Upgrade your screen adaptation method! - Today's Headlines Adaptation Scheme - Juejin
• Today's Headlines Screen Adaptation Ultimate Version Released! - Juejin
• AndroidAutoSize/README-zh.md at master · JessYanCoding/AndroidAutoSize