如何消除Neumorphism布局中相邻按钮间的间隙？

问题分析 #

你遇到的间隙主要来自两个核心点：

• 两个控件都设置了1dp的neumorph_strokeWidth，相邻时中间的stroke会叠加成2dp的黑色线条，视觉上呈现为间隙
• 布局里误用了ConstraintLayout的约束属性（app:layout_constraintXXX），这些属性在LinearLayout中完全无效，可能干扰布局计算逻辑

快速修复方案 #

1. 清理无效属性

先把两个Neumorph控件里的app:layout_constraintStart_toStartOf和app:layout_constraintTop_toTopOf属性删掉，这些属性仅在ConstraintLayout容器中生效，LinearLayout里留着毫无意义。

2. 抵消Stroke重叠

给右侧的cancel_timer控件添加负margin，让两个控件的stroke完全重叠，消除中间的视觉间隙：

<soup.neumorphism.NeumorphImageView
    android:id="@+id/cancel_timer"
    android:layout_width="@dimen/_60sdp"
    android:layout_height="@dimen/_60sdp"
    android:layout_marginLeft="-1dp" <!-- 新增该行抵消stroke宽度 -->
    android:clickable="true"
    android:padding="@dimen/_18sdp"
    android:src="@drawable/timer_off_icon"
    app:neumorph_shadowColorDark="@color/dark_shadow_dark"
    app:neumorph_shadowColorLight="@color/light_shadow_dark"
    app:neumorph_shapeAppearance="@style/NeumorphismTimerOffShape"
    app:neumorph_shapeType="flat"
    app:neumorph_strokeColor="@color/black"
    app:neumorph_strokeWidth="1dp" />

3. 优化形状贴合度（可选）

如果负margin的方式仍有细微视觉差异，可以修改形状样式，让两个控件的相邻边变为直角，确保边缘完全贴合：

<style name="NeumorphismTimerShape">
    <item name="neumorph_cornerSizeBottomLeft">@dimen/_115sdp</item>
    <item name="neumorph_cornerSizeTopLeft">@dimen/_115sdp</item>
    <item name="neumorph_cornerSizeBottomRight">0dp</item> <!-- 相邻边设为直角 -->
    <item name="neumorph_cornerSizeTopRight">0dp</item> <!-- 相邻边设为直角 -->
</style>

<style name="NeumorphismTimerOffShape">
    <item name="neumorph_cornerSizeBottomRight">@dimen/_115sdp</item>
    <item name="neumorph_cornerSizeTopRight">@dimen/_115sdp</item>
    <item name="neumorph_cornerSizeBottomLeft">0dp</item> <!-- 相邻边设为直角 -->
    <item name="neumorph_cornerSizeTopLeft">0dp</item> <!-- 相邻边设为直角 -->
</style>

替代方案：用单个拟态容器包裹 #

如果想彻底避免间隙问题，推荐用一个NeumorphCardView作为父容器，内部嵌套LinearLayout放置两个按钮，这样整体是一个统一的拟态组件，自然不会出现间隙：

<soup.neumorphism.NeumorphCardView
    android:layout_width="wrap_content"
    android:layout_height="@dimen/_60sdp"
    android:layout_marginTop="8dp"
    app:neumorph_shadowColorDark="@color/dark_shadow_dark"
    app:neumorph_shadowColorLight="@color/light_shadow_dark"
    app:neumorph_shapeType="flat"
    app:neumorph_strokeColor="@color/black"
    app:neumorph_strokeWidth="1dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <!-- 左侧计时按钮区域 -->
        <FrameLayout
            android:id="@+id/start_timer"
            android:layout_width="@dimen/_100sdp"
            android:layout_height="match_parent"
            android:clickable="true"
            android:padding="@dimen/_18sdp">

            <ImageView
                android:layout_gravity="center"
                android:id="@+id/start_timer_icon"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/timer_icon" />

            <TextView
                android:id="@+id/timer_countdown_text"
                android:layout_width="wrap_content"
                android:layout_height="34dp"
                android:layout_gravity="center"
                android:text="@string/_00_00_00"
                android:textColor="@color/leaveGreen"
                android:textSize="18sp"
                android:textStyle="bold"
                android:visibility="invisible" />

        </FrameLayout>

        <!-- 右侧取消按钮区域 -->
        <ImageView
            android:id="@+id/cancel_timer"
            android:layout_width="@dimen/_60sdp"
            android:layout_height="match_parent"
            android:clickable="true"
            android:padding="@dimen/_18sdp"
            android:src="@drawable/timer_off_icon" />

    </LinearLayout>

</soup.neumorphism.NeumorphCardView>

这种方式还能让拟态阴影和边框保持完全统一，视觉协调性更好。

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