如何使用 shape material 组件制作完整的圆形编辑文本？

Question

我需要像下图一样制作完整的圆形编辑文本。我正在使用 Material 组件。在 material 组件中，我们有可以修改的形状吧？所以我尝试使用 style 来修改形状，我假设我可以使用 style

修改 edittext 形状

使用这样的风格？

<style name="roundedEditText" parent="ShapeAppearance.MaterialComponents.SmallComponent">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">32dp</item>
    </style>

然后像这样将样式应用到我的编辑文本

 <EditText
            android:id="@+id/editText_search_toolbar"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginStart="8dp"
            android:layout_marginEnd="4dp"
            android:background="@color/grey_light_top"
            android:ems="10"
            android:hint="Ketik nama ustadz, lokasi, atau acara"
            android:imeOptions="actionSearch"
            android:inputType="textPersonName"
            android:maxLines="1"
            android:paddingStart="16dp"
            android:textSize="12sp"
            style="@style/roundedEditText"
            app:layout_constraintBottom_toBottomOf="@+id/base_searchView_toolbar_keyword_search_result"
            app:layout_constraintEnd_toEndOf="@+id/base_searchView_toolbar_keyword_search_result"
            app:layout_constraintStart_toEndOf="@+id/imageView_back_icon"
            app:layout_constraintTop_toTopOf="@+id/base_searchView_toolbar_keyword_search_result" />

但它对我的编辑文本没有影响，它仍然是一个像这样的矩形

如果不使用形状，我可以在 Material 组件中使用其他方式设置它吗？

Answer 1

如果你想使用 TextInputLayout 只需使用 app:shapeAppearanceOverlay 属性：

   <com.google.android.material.textfield.TextInputLayout
        app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MyApp.TextInputLayout.Rounded"
        ....

        app:hintEnabled="false"
        app:endIconDrawable="@drawable/..."
        app:endIconMode="custom"
        android:clipToPadding="true"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        ...>

与：

<style name="ShapeAppearanceOverlay.MyApp.TextInputLayout.Rounded" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
  </style>

如果你想使用简单的 ExitText 你可以使用 MaterialShapeDrawable to draw custom shapes.
Check this answer.

如何使用 shape material 组件制作完整的圆形编辑文本？

how to make full rounded edittext using shape material component?

android

android-edittext

android-textinputlayout

material-components

material-components-android