Custom edit text with borders

Question

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

 <?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:width="1dp"
        android:color="#A0A0A0" />
</shape>

but I am not able to achieve my desired result.

I want something like below :

please help.

Solution 1

Try this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:layout_marginLeft="20dp"
    android:layout_marginRight="20dp">
    <EditText
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="15dp"
        android:background="@drawable/boarder"
        android:paddingLeft="5dp"
        android:text="input" />
    <TextView
        android: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"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

<stroke
    android:width="2dp"
    android:color="#03A6F0" />

<corners android:radius="12dp" />

Solution 2

Check this link for the guidelines on creating the new Material Design textfield you want.

https://material.io/design/components/text-fields.html#usage

- for how to use it:

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.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

  <com.google.android.material.textfield.TextInputEditText
      android: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 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"?>
<RelativeLayout xmlns: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">


    <EditText
        android: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"/>


    <TextView
        android: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"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
   android:shape="rectangle">

<stroke
    android:color="#741c7a"
    android:width="1dp"/>

<corners android:radius="5dp"/>

</shape>

View more solutions

Comments

[Talib]

what is button_round_corner ?

[Mobile Team ADR-Flutter]

It's Drawable which i made, I have edited my answer. Please check

[Algar]

This should be the accepted answer

[rmtheis]

OutlineBox should be OutlinedBox