如何创建相邻的 Material 按钮，中间只有一个边框

Question

我想要两个Material Buttons directly next to each other with a 1dp-wide separator line between them, like this (imgur)。

我试过在按钮上设置自定义背景可绘制对象，但是 Material 按钮 no longer allow this。

我的下一次尝试是使用 Material 按钮的 stroke 属性，但我找不到将描边应用到单边的方法。

我也试过在按钮之间插入一个 1dp 宽的视图，这可能是一个解决方案，但我无法以编程方式设置该视图的高度和位置而不会变得太复杂。

这两个按钮当前位于 ConstraintLayout 中，但我也尝试将它们嵌套在 ConstraintLayout 内的 RelativeLayout 中。

这是在 RelativeLayout 中的尝试：

<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"
    android:animateLayoutChanges="true"
    android:id="@+id/registration_cl">

    <RelativeLayout
        android:id="@+id/signin_social_rl"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toTopOf="@id/signin_btn_back">

        <com.google.android.material.button.MaterialButton
            android:id="@+id/signin_btn_facebook"
            style="@style/Widget.MaterialComponents.Button.UnelevatedButton.Icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginBottom="8dp"
            android:backgroundTint="#525352"
            android:backgroundTintMode="screen"
            android:fontFamily="@font/proximanova"
            android:padding="15dp"
            android:text="Facebook"
            android:textAllCaps="false"
            android:textColor="@color/white_ffffff"
            android:textSize="18sp"
            app:icon="@drawable/ic_facebook_icon_fb_socialshare_"
            app:iconTint="@color/white_ffffff"
            tools:alpha="1" />

        <View
            android:id="@+id/signin_social_div"
            android:layout_width="1dp"
            android:layout_height="50dp"
            android:backgroundTint="@color/white_ffffff"
            android:background="@color/white_ffffff"
            android:layout_toEndOf="@id/signin_btn_facebook"/>

        <com.google.android.material.button.MaterialButton
            android:id="@+id/signin_btn_google"
            style="@style/Widget.MaterialComponents.Button.UnelevatedButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:layout_marginBottom="8dp"
            android:layout_toEndOf="@id/signin_social_div"
            android:backgroundTint="#525352"
            android:backgroundTintMode="screen"
            android:fontFamily="@font/proximanova"
            android:padding="15dp"
            android:text="Google"
            android:textAllCaps="false"
            android:textColor="@color/white_ffffff"
            android:textSize="18sp"
            app:iconSize="8dp"
            tools:alpha="1" />

    </RelativeLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

除了以编程方式调整按钮之间的视图大小和定位之外，我希望有一个更简单的解决方案来添加单侧边框。

Answer 1

这不是您要找的东西，但它非常简单。
你可以这样做：

<com.google.android.material.button.MaterialButton
    app:strokeWidth="0dp"
    app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.Button.Left"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="BUTTON 1"
    />

<View
    android:layout_width="1dp"
    android:layout_height="wrap_content"
    android:background="@android:color/transparent"/>

<com.google.android.material.button.MaterialButton
    app:strokeWidth="0dp"
    app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.Button.Right"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="BUTTON 2"
    />

您可以使用 strokeWidth=0dp 移除边框，您可以使用 shapeAppearanceOverlay 属性应用不同的圆角半径（需要 1.1.0 版本）。

  <style name="ShapeAppearanceOverlay.Button.Left" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSizeTopRight">0dp</item>
    <item name="cornerSizeTopLeft">16dp</item>
    <item name="cornerSizeBottomRight">0dp</item>
    <item name="cornerSizeBottomLeft">16dp</item>
  </style>

  <style name="ShapeAppearanceOverlay.Button.Right" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSizeTopRight">16dp</item>
    <item name="cornerSizeTopLeft">0dp</item>
    <item name="cornerSizeBottomRight">16dp</item>
    <item name="cornerSizeBottomLeft">0dp</item>
  </style>

最终结果：

Answer 2

您的视图不受限于 RelativeLayout 内，这就是 View 占据全高的原因。相反，使用 LinearLayout 来获得结果会容易得多。以下代码应该有所帮助：

<androidx.constraintlayout.widget.ConstraintLayout ...>

    <LinearLayout
        android:id="@+id/signin_social_rl"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toTopOf="@id/signin_btn_back">

        <com.google.android.material.button.MaterialButton
            android:id="@+id/signin_btn_facebook"
            style="@style/Widget.MaterialComponents.Button.UnelevatedButton.Icon"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            ... />

        <View
            android:id="@+id/signin_social_div"
            android:layout_width="1dp"
            android:layout_height="match_parent"
            ... />

        <com.google.android.material.button.MaterialButton
            android:id="@+id/signin_btn_google"
            style="@style/Widget.MaterialComponents.Button.UnelevatedButton"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            ... />

    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

使用 LinearLayout 而不是 RelativeLayour 也可以使渲染速度更快。希望对您有所帮助！

如何创建相邻的 Material 按钮，中间只有一个边框

How to create adjacent Material Buttons with single border in-between

java

android

android-button

material-design

material-components-android