I have to make a textinputlayout with the floating hint label, that needs to have a white background. Some what similar to this--
Design expected:
But all I have been able to do so far is this:
Actual Design using TextInputLayout:
Currently the hint label in TextInputLayout have a transparent background. Can anybody please help me and tell how to make this possible?
Here is my code (The texinput layout):
<android.support.design.widget.TextInputLayout
android:id="@+id/til_login_info"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/text_input_layout_background"
app:hintTextAppearance="@style/TextStyle.Small.Hint">
<EditText
android:id="@+id/login_info"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/transparent"
android:gravity="center_vertical"
android:hint="Email / Mobile"
android:inputType="text"
android:textSize="14sp" />
</android.support.design.widget.TextInputLayout>
And the background I am using
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:gravity="bottom"
android:top="5dp">
<shape android:shape="rectangle">
<stroke
android:width="1px"
android:color="@color/Grey300" />
<corners android:radius="100dp" />
<solid android:color="@color/transparent" />
</shape>
</item>
</layer-list>
Thanks in advance!
You should use Material Design style for Outline Box. Just simple put:
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
to your TextInputLayout
.
For rounded corners use:
boxCornerRadiusTopStart
boxCornerRadiusTopEnd
boxCornerRadiusBottomStart
boxCornerRadiusBottomEnd
See Text Field for Android in Material Design Guide