Custom Edit Text With Borders

I am trying to put borders on edit text and put a label on it. I have made the border like this :

To create a material text field, add a TextInputLayout to your XML layout and a TextInputEditText as a direct child.

<com.google.android.material.textfield.TextInputLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"><com.google.android.material.textfield.TextInputEditTextandroid:layout_width="match_parent"android:layout_height="wrap_content"android:hint="@string/hint_text"/></com.google.android.material.textfield.TextInputLayout>

Note: You can also use an EditText for your input text component. However, using TextInputEditText allows TextInputLayout greater control over the visual aspects of the input text - it allows TextInputLayout to display hint in the text field when in “extract mode” (such as landscape mode).

- for styling it:

Filled Box (Default)

style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"

Outline Box

style="@style/Widget.MaterialComponents.TextInputLayout.OutlineBox"

For more, check this link:

https://material.io/develop/android/components/text-input-layout/

I hope this will help.

Solution 2:

Try this:

<?xml version="1.0" encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="60dp"android:layout_marginLeft="20dp"android:layout_marginRight="20dp"><EditTextandroid:layout_width="match_parent"android:layout_height="match_parent"android:layout_marginTop="15dp"android:background="@drawable/boarder"android:paddingLeft="5dp"android:text="input" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginLeft="10dp"android:layout_marginTop="7dp"android:background="#ffffff"android:text="Label" /></RelativeLayout>

boarder.xml :

<?xml version="1.0" encoding="UTF-8"?><shapexmlns:android="http://schemas.android.com/apk/res/android"><strokeandroid:width="2dp"android:color="#03A6F0" /><cornersandroid:radius="12dp" />

Solution 3:

I know, its a bit late, but you might want to take a look at this and this.

Solution 4:

You can try below code in your xml

<?xml version="1.0" encoding="utf-8"?><RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="#CDCDCE"android:orientation="vertical"android:padding="10dp"><EditTextandroid:id="@+id/si_btnSignIn"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="center"android:layout_marginBottom="10dp"android:layout_marginTop="10dp"android:background="@drawable/button_round_corner"android:padding="20dp"android:text="Inp"android:textColor="@color/white"/><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginLeft="10dp"android:background="#CDCDCE"android:gravity="center"android:paddingLeft="5dp"android:paddingRight="5dp"android:text="Label"android:textColor="#741c7a"/></RelativeLayout>

below is drawable code button_round_corner

<?xml version="1.0" encoding="utf-8"?><shapexmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle"><strokeandroid:color="#741c7a"android:width="1dp"/><cornersandroid:radius="5dp"/></shape>