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.

Gustav Wang · Accepted Answer · 2018-02-01T03:56:04.320

7

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.

edited Feb 01 '18 at 03:56

answered Aug 28 '17 at 07:24

Gustav Wang

86
1
4

You should actually post the core information the OP needs to get past their problem. It should be enough for anyone to implement without going offsite. Even if you link to a site dev like Microsoft or Google, you should still describe what the link is about. Links off-site may be removed at any time. – Ashley Pillay Aug 28 '17 at 07:39
@AshleyPillay Thanks for the suggestion! I've edited my answer and made it more specific :) – Gustav Wang Aug 28 '17 at 08:23
1

@GustavWang when I follow your instructions, Android Studio gives the following error: "Error:(14, 0) Could not find method compile() for arguments [com.github.HITGIF:TextFieldBoxes:1.3.8] on object of type org.gradle.api.internal.artifacts.dsl.dependencies.DefaultDependencyHandler." (Can you help me why this happens?) – Arda Çebi Jan 29 '18 at 17:16
1

@ArdaÇebi Oops, I've updated my library but haven't update this answer. Please refer to the readme [here](https://github.com/HITGIF/TextFieldBoxes/blob/master/README.md) for the newest instructions. :) – Gustav Wang Jan 29 '18 at 22:53
@GustavWang changing version name doesn't change anything. I've already done it using the instructions on the GitHub repo. Still not working. Because it's not related with the XML part. The error occurs when the dependency is added to the project. Any suggestions? – Arda Çebi Jan 30 '18 at 01:27
@ArdaÇebi Are you sure you've added the dependency at the correct place? You may refer [here](https://stackoverflow.com/a/33384263/7939451) – Gustav Wang Jan 30 '18 at 01:44
@GustavWang Yep, I'm editing the build.gradle app file. – Arda Çebi Jan 30 '18 at 10:04
@GustavWang let me send you a gist file to show you my build.gradle file so you can help me if I'm doing anything wrong, ok? – Arda Çebi Jan 30 '18 at 10:04
@ArdaÇebi Yes please. – Gustav Wang Jan 30 '18 at 10:18
@GustavWang Before sending it, I would like to ask to make sure I'm doing it right, should I edit the android/build.gradle file or the android/app/build.gradle for this? or both? – Arda Çebi Jan 30 '18 at 11:02
@GustavWang anyways, here is the one: https://gist.github.com/TurboProgramming/aad4415c761583f6882470c4c4498468 If it's the wrong one, please warn me after checking it. – Arda Çebi Jan 30 '18 at 11:16
@GustavWang I get this error with this file: "Error:(11, 0) Could not find method compile() for arguments [com.github.HITGIF:TextFieldBoxes:1.3.8] on object of type org.gradle.api.internal.artifacts.dsl.dependencies.DefaultDependencyHandler." – Arda Çebi Jan 30 '18 at 11:18
@ArdaÇebi Put the two parts of the dependency in both of the files **respectively**. Put the `maven {}` line in `repositories {}` in android/build.gradle. Put the `compile()` line in `dependencies {}` in android/app/build.gradle. – Gustav Wang Jan 30 '18 at 11:25
OK, @GustavWang it worked! Thank you so much for your help :) – Arda Çebi Jan 30 '18 at 11:38
@ArdaÇebi My pleasure :) – Gustav Wang Jan 30 '18 at 11:42

score 2 · Answer 2 · answered Jun 26 '17 at 02:33

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>

Thats works like charm! Thanks a lot!. Thats exactly what I was looking for! — Ramji Seetharaman, Jun 26 '17 at 03:13
@orlanth23, i think image with final result could be useful in your answer. Thanks for sharing — Maksim Turaev, Aug 11 '17 at 08:12
@orlanth23 is there any way to change the first shape color dynamicaly? for instance on focus or something? — jgasiorowski, Nov 08 '17 at 17:51

Text Field box creation as per Material Design docs

2 Answers2