Text Field box creation as per Material Design docs

Question

I have been trying to create a text field box as mentioned in the Material Design guidelines. I couldn't figure out how to achieve this. This is what I want to achieve.

TextField Box Material Design Screenshot

I am also attaching the link which has the material design guidelines if the image is not clear enough. I just need to create a text field box, but I couldn't figure it out. Here is the link to Material design guidelines page

https://material.io/guidelines/components/text-fields.html#text-fields-text-field-boxes

Also attaching my xml code for the text field which I want to create.

<android.support.design.widget.TextInputLayout
                    android:id="@+id/firstNameTextInputLayout"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="20dp">

                        <android.support.design.widget.TextInputEditText
                            android:id="@+id/firstNameTextInputEditText"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:hint="@string/firstName"
                            android:inputType="textPersonName"
                            tools:ignore="MissingPrefix" />

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

Thanks in advance. Kindly help.

Answer 1

You're welcome to use my library here on Github:

https://github.com/HITGIF/TextFieldBoxes

Note that it requires Android 4.0.3 IceCreamSandwich (API lv 15) or greater.

First add the dependency in your project:

For Gradle:

allprojects {
    repositories {
      ...
      maven { url 'https://jitpack.io' }
    }
}

dependencies {
    compile 'com.github.HITGIF:TextFieldBoxes:1.3.9'
}

For other build tools & instructions, see the Github repo: README.md

Then add these to your layout:

...
<studio.carbonylgroup.textfieldboxes.TextFieldBoxes
    android:id="@+id/text_field_boxes"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:labelText="Label">

    <studio.carbonylgroup.textfieldboxes.ExtendedEditText
        android:id="@+id/extended_edit_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</studio.carbonylgroup.textfieldboxes.TextFieldBoxes>
...

For more information and usage, see the Github repo above.

Answer 2

I don't know if it can help but I currently use a drawable like this one (I nammed it test.xml) =>

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#767676" />
            <padding
                android:bottom="2dp" />
            <corners android:radius="4dp"/>
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#ffffff" />
            <corners android:topLeftRadius="4dp"
                android:topRightRadius="4dp"/>
        </shape>
    </item>
</layer-list>

then I attach this drawable to my textView or my TextInputLayout with the background attribute like this :

<android.support.design.widget.TextInputLayout
            android:id="@+id/firstNameTextInputLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:background="@drawable/test">

            <android.support.design.widget.TextInputEditText
                android:id="@+id/firstNameTextInputEditText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/firstName"
                android:inputType="textPersonName"
                tools:ignore="MissingPrefix" />

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