how to make full rounded edittext using shape material component?

Question

I need to make a full rounded edittext like the image below. I am using Material Component. In material component, we have shape that can be modified right ? so I try to use style to modify the shape, I assume I can modify the edittext shape using style

using style like this ?

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

and then apply that style to my edittext like this

 <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" />

but it doesn't make an effect to my edittext, it still a rectangle like this

if not using shape, can I set it using another way in Material Component ?

I think you are setting background in the EditText, might be it is overriding property, Check If it is possible to define background in the style itself. — akashzincle, Apr 12 '20 at 08:15

Gabriele Mariotti · Accepted Answer · 2020-04-12T09:59:06.823

If you want to use the TextInputLayout just use the app:shapeAppearanceOverlay attribute:

   <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"
        ...>

with:

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

If you want to use a simple ExitText you can use the MaterialShapeDrawable to draw custom shapes.
Check this answer.

how to make full rounded edittext using shape material component?

1 Answers1