TextFieldBoxes

Mark Wang
Mark Wang
Aug 27, 2017 · 5 min read

v1.0.0

A new Material Design text field that comes in a box.

View on Github:

Requirements

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

Installation

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.0.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.0.0</version>
</dependency>
resolvers += "jitpack" at "https://jitpack.io"libraryDependencies += "com.github.HITGIF" % "TextFieldBoxes" % "1.0.0"
:repositories [["jitpack" "https://jitpack.io"]]:dependencies [[com.github.hitgif/textfieldboxes "1.0.0"]]

Usage

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: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, and app:minCharacters in xml or setMinCharacters(int _minCharacters) in java code to set the min characters count. The bottom line will turn red when exceeding max or min characters limit. 0, as default, means no max or min characters.

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

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.

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

If you want to customize the EditText in the TextFieldBoxes (which is a inherited FrameLayout that contains a EditTextfor 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");
}
});

All Attributes

app:text EditText text.

app:hint Hint text at the top.

app:helperText Helper text at the bottom.

app:helperTextColor Helper text color.

app:errorColor The color that is used to indicate error (e.g. exceeding max characters, setError()).

app:primaryColor The color for the underline and the hint text. Current theme Primary Color by default.

app:maxCharacters Max characters count limit. 0 means no limit. 0 by default.

app:minCharacters Min characters count limit. 0 means no limit. 0 by default.

app:enabled Whether the text field is enabled. True by default.

app:singleLine Whether the EditText is single-lined. False by default.

app:maxLines The number of maximum lines allowed in the text field. Integer.MAX_VALUE by default.

app:hasFocusWhether the EditText is having the focus. False by default.

TODO

  • Prefix & Suffix
  • Icon signifier
  • Dark theme​

License

Copyright 2017 Carbonylgroup StudioLicensed 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.0Unless 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.

)
Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade