Opaque background in floating hint in TextInputLayout

Question

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!

Answer 1

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