A new Material Design text field that comes in a box, based on Google Material Design guidelines. 中文看这里

​

• Android 4.0.3 IceCreamSandwich (API lv 15) or greater
• Your favorite IDE

​

In order to use it, you need to include it in your project.

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

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

<repositories>
    <repository>
         <id>jitpack.io</id>
         <url>https://jitpack.io</url>
    </repository>
</repositories>

<dependency>
    <groupId>com.github.HITGIF</groupId>
    <artifactId>TextFieldBoxes</artifactId>
    <version>1.1.0</version>
</dependency>

resolvers += "jitpack" at "https://jitpack.io"

libraryDependencies += "com.github.HITGIF" % "TextFieldBoxes" % "1.1.0"

:repositories [["jitpack" "https://jitpack.io"]]

:dependencies [[com.github.hitgif/textfieldboxes "1.1.0"]]

​

Add studio.carbonylgroup.textfieldboxes.TextFieldBoxes to your layout:

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

app:enabled in xml or setEnabled(boolean _enabled) in Java.

app:enabled="false"

Use app:singleLine in xml or setSingleLine(boolean _singleLine) in Java to set whether the EditText is single-lined, that scrolls horizontally.

app:singleLine="true"

helper text: app:helperText in xml or setHelperText(String _helperText) in Java.

app:helperText="Helper is here"

error text: setError(String _errorText) in Java.

NOTE: Error will be removed when the text changes (input or delete).

setError("Error message");

Use app:prefix in xml or setPrefix(String _prefix) to set the unselectable prefix text at the start of the EditText.

Use app:suffix in xml or setSuffix(String _suffix) to set the unselectable suffix text at the end of the EditText.

app:prefix="$ "

app:suffix="\@gmail.com"

Use app:maxLines in xml or setMaxLines(Int _maxlines) to set the number of maximum lines allowed in the text field. Integer.MAX_VALUE by default.

app:maxLines="3"

Use app:maxCharacters in xml or setMaxCharacters(int _maxCharacters) in java code to set the max characters count.

Use app:minCharacters in xml or setMinCharacters(int _minCharacters) in java code to set the min characters count.

The color of the bottom line will turn to errorColor (red by default) when exceeding max or min characters limit. 0, as default, means no max or min characters.

NOTE: Space and line feed will NOT count.

app:maxCharacters="10"
app:minCharacters="5"

app:maxCharacters="5"

Use app:iconSignifier in xml or setIconSignifier(Int resourceID) to set the icon that is shown in front of the TextFieldBoxes.

app:iconSignifier="@drawable/ic_vpn_key_black_24dp"

Primary Color will be used for the color of the underline and the hint text. You can use app:primaryColor in xml or setPrimaryColor(int _colorRes) in Java. Current theme Primary Color by default.

Error Color will be used for the color that indicates error (e.g. exceeding max characters, setError()). You can use app:errorColor in xml or setErrorColor(int _colorRes) in Java. A400 red by default.

Helper Text Color will be used for the color of the helper text. You can use app:helperTextColor in xml or setHelperTextColor(int _colorRes) in Java. 54% black by default.

Panel Background Color will be used for the color of panel at the back. You can use app:panelBackgroundColor in xml or setPanelBackgroundColor(int _colorRes) in Java. 6% black by default. NOTE that the default color, as in the guideline, is the black (#000000) color with the transparency of 6%, so when you're customizing and want it to still be transparent you have to set a color with transparency.

app:primaryColor="#1B5E20"          <!--Green-->
app:errorColor="#ddaa00"            <!--Yellow-->
app:helperTextColor="#795548"       <!--Brown-->
app:panelBackgroundColor="#ffe8e8"  <!--Pink-->

If you want to customize the EditText in the TextFieldBoxes (which is a inherited FrameLayout that contains a EditText for input), use the getEditText() methond in Java and do whatever you like (e.g. setOnKeyListener(), addTextChangedListener())

final TextFieldBoxes textFieldBoxes = findViewById(R.id.text_field_boxes);
textFieldBoxes.getEditText().addTextChangedListener(new TextWatcher() {
    @Override
    public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

    }

    @Override
    public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {

    }

    @Override
    public void afterTextChanged(Editable editable) {
    if (editable.toString().equals("wrong"))
        textFieldBoxes.setError("It's wrong");
    }
});

TextFieldBoxes use the color attributes within the current theme and will automatically change its color to fit the dark theme without additional settings.

​

​

• Prefix & Suffix
• Icon signifier
• Dark theme

​

Copyright 2017 Carbonylgroup Studio

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.