Android TabLayout背景drawable手机渲染正常平板端显示异常

该drawable在平板端渲染异常，核心是硬编码的固定dp尺寸没有做平板适配：手机和平板的TabLayout整体尺寸、宽高比差异极大，写死的50dp左右边距、10dp上下边距、30dp圆角在平板上会出现比例失调，常见表现为背景被过度挤压、圆角与控件高度不匹配导致裁切、边距过大导致背景显示范围异常。如果该xml资源被错误放到了带密度后缀的drawable目录（比如drawable-xxhdpi），低密度平板读取资源失败也会触发渲染问题。

• 方案1：做尺寸多端适配
  把drawable里写死的dp值全部抽离到dimens资源文件，针对不同尺寸设备配置对应比例的数值：
  1. 在默认的values/dimens.xml中配置手机端使用的尺寸：

  <resources>
      <dimen name="tab_bg_left_right_margin">50dp</dimen>
      <dimen name="tab_bg_top_bottom_margin">10dp</dimen>
      <dimen name="tab_bg_corner">30dp</dimen>
  </resources>
  

  2. 新建平板对应的资源目录，比如适配7寸平板的values-sw600dp/dimens.xml、适配10寸及以上平板的values-sw720dp/dimens.xml，按照平板端TabLayout的实际大小调整对应dimen值，保证视觉比例和手机端一致即可。
  3. 修改原drawable代码，替换硬编码值为dimen引用：

  <?xml version="1.0" encoding="utf-8"?>
  <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
      <item
          android:bottom="@dimen/tab_bg_top_bottom_margin"
          android:left="@dimen/tab_bg_left_right_margin"
          android:right="@dimen/tab_bg_left_right_margin"
          android:top="@dimen/tab_bg_top_bottom_margin">
          <shape android:shape="rectangle">
              <solid android:color="#E3EBF2" />
              <corners android:radius="@dimen/tab_bg_corner" />
          </shape>
      </item>
  </layer-list>
  

• 方案2：直接使用TabLayout原生属性实现效果，规避自定义drawable适配问题
  如果项目引入了Material组件库，不需要自定义layer-list做背景，直接通过TabLayout自带属性就能实现同款圆角背景，组件会自动根据自身尺寸适配不同设备，不会出现渲染异常：

  <com.google.android.material.tabs.TabLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      app:tabBackground="#E3EBF2"
      app:tabCornerRadius="30dp"
      app:tabHorizontalPadding="50dp"
      app:tabVerticalPadding="10dp"
      app:tabIndicatorHeight="0dp"
      />
  

• 方案3：排查资源放置目录问题
  确认该xml格式的drawable资源存放在不带任何密度、尺寸后缀的默认drawable目录下，不要放到drawable-xhdpi这类密度专属目录，避免低密度平板无法正确解析资源。

内容的提问来源于stack exchange，提问作者laggyPC