Search code examples
androidxmlkotlinmaterial-design

Android TextInputLayout[hint inside the edit field not outside the border]


I'm trying to create TextInputLayout with hint inside the input field like this: enter image description here

This is my code, I tried with OutLinedBox and Filled, If I use Filled and set a background for the layout, the position of hint is incorrect

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/my_view_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/textValue"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="32dp"
        android:layout_marginRight="16dp"
        android:hint="label">

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

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

Solution

  • Edit Answer

    <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/text_input_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="24dp"
            android:layout_marginLeft="24dp"
            android:layout_marginRight="24dp"
            android:hint="Email"
            app:boxBackgroundColor="@android:color/transparent"
            app:boxStrokeWidth="0dp"
            app:boxStrokeWidthFocused="0dp">
            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/edit_text"
                android:background="@android:color/transparent"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
        </com.google.android.material.textfield.TextInputLayout>
    

    Selector

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_focused="true">
            <shape android:shape="rectangle">
                <solid android:color="@android:color/white"/>
                <stroke android:width="1dp" android:color="?attr/colorPrimary"/>
            </shape>
        </item>
        <item>
            <shape android:shape="rectangle">
                <solid android:color="@android:color/white"/>
                <stroke android:width="1dp" android:color="?attr/colorControlNormal"/>
            </shape>
        </item>
    </selector>
    

    Image

    Edit Answer 2:

    The problem can be solved by adding vertical padding.

    android:paddingVertical="yourDp"
    

    Please check for reference answer.