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?

You could use custom background on your textinputedittext or layout. Just create custom rectangle shape with corners. If you need some code, I could write it — Atamyrat Babayev, Sep 11 '20 at 17:40
@JohnyDeph why should you use a custom background when the default component supports attributes to achieve rounded corners? — Gabriele Mariotti, Sep 11 '20 at 17:51

Gabriele Mariotti · Answer 1 · 2022-07-13T16:49:18.820

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.App.rounded" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">8dp</item>
  </style>

This is old but the style reference doesn't match the style declaration if I understand it correctly. And, also what's the alternative to removing the background color? — David, Jul 13 '22 at 16:44
@David thanks for the feedback. The style declaration is now correct. — Gabriele Mariotti, Jul 13 '22 at 16:54

score 0 · Answer 2 · answered Sep 11 '20 at 17:54

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:

TextInputLayout with rounded corners

2 Answers2