TextInputLayout with rounded corners

Question

How do I make rounded corners for a login form? This is my code:

<com.google.android.material.textfield.TextInputLayout
        android:id="@+id/editLoginWrapper"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/appTitle"
        android:layout_marginBottom="8dp"
        android:layout_marginTop="18dp">

        <com.google.android.material.textfield.TextInputEditText    
      android:id="@+id/editLogin"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#FFFFFF"
            android:backgroundTint="#FFFFFF"
            android:hint="@string/login_hint"
            android:inputType="text"
            android:textColor="#000000"
            android:padding="7dp"
android:textColorLink="#FFFFFF" />

Tried to add:

style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        app:endIconMode="password_toggle"
        app:boxCornerRadiusBottomEnd="8dp"
        app:boxCornerRadiusTopEnd="8dp"
        app:boxCornerRadiusBottomStart="8dp"
        app:boxCornerRadiusTopStart="8dp"

As described here but it does not make any difference - corners not becoming rounded. What's wrong?

Answer 1

Remove the android:background="#FFFFFF" and android:backgroundTint="#FFFFFF" in the TextInputEditText .

Use:

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/editLoginWrapper"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/appTitle"
    android:layout_marginBottom="8dp"
    android:hint="Login"
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
    app:endIconMode="password_toggle"
    app:boxCornerRadiusBottomEnd="8dp"
    app:boxCornerRadiusTopEnd="8dp"
    app:boxCornerRadiusBottomStart="8dp"
    app:boxCornerRadiusTopStart="8dp"
    android:layout_marginTop="18dp">

<com.google.android.material.textfield.TextInputEditText
    android:id="@+id/editLogin"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:inputType="text"
    android:textColor="#000000"
    android:padding="7dp"
    android:textColorLink="#FFFFFF" />

</com.google.android.material.textfield.TextInputLayout>

Instead of declaring all the corners you can also use the shapeAppearanceOverlay attribute:

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

with:

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

Answer 2

I made a sample Activity xml for your case. This is working fine for me. Let me know if this the thing you were looking for or not.

activity_main.xml

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/editLoginWrapper"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
    app:boxCornerRadiusBottomEnd="8dp"
    app:boxCornerRadiusTopEnd="8dp"
    app:boxCornerRadiusBottomStart="8dp"
    app:boxCornerRadiusTopStart="8dp">

<com.google.android.material.textfield.TextInputEditText
    android:id="@+id/editLogin"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Name"
    android:background="#FFFFFF"
    android:backgroundTint="#FFFFFF"
    android:inputType="text"
    android:textColor="#000000"
    android:padding="7dp"
    android:textColorLink="#FFFFFF" />
</com.google.android.material.textfield.TextInputLayout>

This is how it looks like: