how to make an outlined text field on android?

Question

I'm creating an app that should have a text field that looks like this:

I tried to do like that link and my app crash.

I'm trying to do it this way now, but I still haven't managed to get it out of the way I want.

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:inputType="textEmailAddress"
    app:boxBackgroundMode="outline">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/editEmail"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/email" />

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

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:boxBackgroundMode="outline">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/editNovoEmail"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/new_email"
        android:inputType="textEmailAddress" />

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

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:boxBackgroundMode="outline"
    app:passwordToggleEnabled="true">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/editSenha"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/password"
        android:inputType="textPassword" />

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

The current result is being this:

How to fix this?

UPDATE:

Its a bug on 'com.google.android.material:material:1.1.0'. Only works in version 1.0.0

https://github.com/material-components/material-components-android/issues/776

score 1 · Answer 1 · answered Jun 15 '20 at 16:40

1

Add style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox" in your TextInputLayout in place of app:boxBackgroundMode="outline".

Hope it works for you!

answered Jun 15 '20 at 16:40

Ronak Sethi

607
5
12

score 0 · Answer 2 · answered Jun 15 '20 at 16:59

Create a new xml file edit_text_border.xml in drawable folder,or name it whatever you want then add this code:

<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
    android:color="@color/transparent"/>

<corners
    android:bottomRightRadius="12dp"
    android:bottomLeftRadius="12dp"
    android:topLeftRadius="12dp"
    android:topRightRadius="12dp"/>
<stroke
    android:color="#ffffff"
    android:width="1dp"/>

and change this in the edittext

<EditText
android:id="@+id/edit_text"
android:background:"@drawable/edit_text_border"/>

how to make an outlined text field on android?

2 Answers2