Android不同设备下如何让View周边留白比例保持一致？

问题场景 #

使用自定义Drawable的SeekBar在不同设备上周边留白比例不一致，平板留白占比小于手机，导致ConstraintLayout布局适配失效。相关代码如下：

主布局XML #

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <SeekBar
        android:id="@+id/seekBar_Sweetness"
        style="@style/Widget.AppCompat.SeekBar.Discrete"
        android:layout_width="@dimen/_120sdp"
        android:layout_height="@dimen/_18sdp"
        android:elevation="2dp"
        android:max="1000"
        android:maxHeight="4dip"
        android:minHeight="4dip"
        android:progress="150"
        android:progressDrawable="@drawable/seek_bar_ruler_rate"
        android:thumb="@drawable/seek_bar_slider_beer"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

自定义progressDrawable（seek_bar_ruler_rate.xml） #

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <size
                android:width="10dp"
                android:height="2dp" />
            <solid android:color="#efc013" />
            <corners android:radius="0dp" />
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape android:shape="rectangle">
                <size
                    android:width="10dp"
                    android:height="2dp" />
                <solid android:color="#efc013" />
                <corners android:radius="0dp" />
            </shape>
        </clip>
    </item>
</layer-list>

自定义thumb（seek_bar_slider_beer.xml） #

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid android:color="#FFFFFF" />
    <stroke
        android:width="@dimen/_2sdp"
        android:color="#211a05" />
    <size
        android:width="@dimen/_6sdp"
        android:height="@dimen/_13sdp" />
</shape>

解决方案 #

1. 清除系统样式自带内边距 #

Widget.AppCompat.SeekBar.Discrete自带默认内边距，直接在SeekBar标签中添加android:padding="0dp"即可清除：

<SeekBar
    ...
    android:padding="0dp"
    ... />

2. 修正progressDrawable的固定尺寸问题 #

移除shape中的固定宽度设置，让进度条自适应SeekBar的宽度，仅保留高度定义，避免因固定宽度导致的拉伸留白：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <size android:height="2dp" />
            <solid android:color="#efc013" />
            <corners android:radius="0dp" />
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape android:shape="rectangle">
                <size android:height="2dp" />
                <solid android:color="#efc013" />
                <corners android:radius="0dp" />
            </shape>
        </clip>
    </item>
</layer-list>

3. 对齐Thumb与SeekBar的高度适配 #

调整SeekBar的高度与Thumb高度匹配，同时设置android:thumbOffset="0dp"确保Thumb无偏移，避免上下留白：

<SeekBar
    ...
    android:layout_height="@dimen/_13sdp" <!-- 与Thumb高度一致 -->
    android:thumbOffset="0dp"
    ... />

若需保留原SeekBar高度，可通过android:paddingTop和android:paddingBottom设置固定比例的上下留白，确保多设备显示一致。

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