Implementation Outlined text field Input with lable text in android application

Question

I want to implement this type of layout of input text with float lable but problem is when I run application it not look same and lable appear upper side of input text field.

But, this is my result

My code is:

roundview.xml.

  <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item>
            <shape android:shape="rectangle">
                <solid android:color="#ffffff"/>
                <corners android:radius="10dp" />

                <stroke
                    android:width="2dp"
                    android:color="#3bbdfa"
                    />
            </shape>
        </item>
    </selector>

<android.support.design.widget.TextInputLayout
    android:id="@+id/text"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:errorEnabled="true">

    <android.support.design.widget.TextInputEditText
        android:id="@+id/edittxt"
        android:layout_width="match_parent"
        android:layout_height="130dp"
        android:background="@drawable/roundview"
        android:fadeScrollbars="false"
        android:fadingEdge="vertical"
        android:foregroundGravity="fill_vertical"
        android:hint="name"
        android:isScrollContainer="false"
        android:requiresFadingEdge="vertical"
        android:singleLine="false"
        android:visibility="visible" />

</android.support.design.widget.TextInputLayout>

I follow https://material.io/design for text fields design but I got this problem.thanks

Please update if you were able to implement it – Abhinav Pawar Aug 22 '18 at 11:47 — Abhinav Pawar, Aug 22 '18 at 11:47

score 8 · Answer 1 · answered Oct 10 '18 at 11:21

8

It can be done by applying Widget.MaterialComponents.TextInputLayout.OutlinedBox style on a TextInputLayout.

<android.support.design.widget.TextInputLayout
        android:id="@+id/name_text_input"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:errorEnabled="true">
        <android.support.design.widget.TextInputEditText
            android:id="@+id/name_edit_text"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Name" />
    </android.support.design.widget.TextInputLayout>

You can check this answer which also has a link to an example.

answered Oct 10 '18 at 11:21

ashwin mahajan

1,654
5
27
50

for this you need to migrate to android X – Muhammad Hamza Shahid Dec 20 '18 at 09:54
I am not sure I did when I used that. – ashwin mahajan Dec 20 '18 at 10:06
This does not need AndroidX, it is simultaneously available in the `com.android.support:design:28.x.x` package for the legacy support libraries. – Bryan W Feb 05 '19 at 03:48

score 2 · Answer 2 · answered Jan 09 '19 at 10:32

Outline Box

Outline text fields have a stroked border and are less emphasized. To use an outline text field, apply the following style to your TextInputLayout:

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

Reference: TextInputLayout

score 0 · Answer 3 · answered May 23 '18 at 23:07

This cannot be achieved using android.support.design.widget.TextInputLayout. You will have to create a custom class which can draw this kind of border around your edit text keeping in mind the hint text, you can use a png as your background if your hint text is constant

score -1 · Answer 4 · answered Jul 21 '20 at 21:56

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
    android:layout_marginStart="20dp"
    android:layout_marginEnd="20dp"
    android:layout_marginTop="100dp" >

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/text"
        android:inputType="text"
        android:importantForAutofill="no"
        tools:ignore="LabelFor" />

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

score -1 · Answer 5 · edited Dec 10 '21 at 13:40

Have a look at TextField Widgets.

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/textField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/label">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
    />

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

Implementation Outlined text field Input with lable text in android application

5 Answers5