4

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.

enter image description here

But, this is my result

enter image description here

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

Improve this question
1
  • Please update if you were able to implement it Commented Aug 22, 2018 at 11:47

5 Answers 5

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

for this you need to migrate to android X
I am not sure I did when I used that.
This does not need AndroidX, it is simultaneously available in the com.android.support:design:28.x.x package for the legacy support libraries.
2

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

Improve this answer

Comments

0

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

Improve this answer

Comments

-1 
<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>
Improve this answer

Comments

-1

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>
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.