Repository files navigation

A new Material Design text field that comes in a box, based on [Google Material Design guidelines]

Library available on JitPack.io

Version 16.4.19 is deprecated use latest version v5.0.19

Latest version of this library is migrated to androidx

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

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

dependencies {    implementation'com.github.TutorialsAndroid:MTextField:v5.0.19'}

1. Basic
2. Enable / Disable
3. Helper Text & Error Text
4. Prefix & Suffix
5. Max & Min Characters
6. Icon Signifier
7. End Icon
8. Clear Button
9. Custom Colors
10. Dense Spacing
11. Always Show Hint
12. Text Change Watcher
13. Dark Theme
14. Manual Validate Error

Addcom.developer.mtextfield.TextFieldBoxes that contains acom.developer.mtextfield.ExtendedEditText to your layout:

...<com.developer.mtextfield.TextFieldBoxesandroid:id="@+id/text_field_boxes"android:layout_width="match_parent"android:layout_height="wrap_content"app:labelText="Label">    <com.developer.mtextfield.ExtendedEditTextandroid:id="@+id/extended_edit_text"android:layout_width="wrap_content"android:layout_height="wrap_content"/></com.developer.mtextfield.TextFieldBoxes>...

app:enabled in xml orsetEnabled(boolean enabled) in Java.

<com.developer.mtextfield.TextFieldBoxes    ...app:enabled="false"    >

NOTE: setting helper or error text to anythingnot empty will make the bottom view (which contains the helper label) visible and increase the height of the TextFieldBoxes. So if you want to always keep the bottom view visible (height increased), set the helper text to" " when there should be nothing.

helper text:app:helperText in xml orsetHelperText(String helperText) in Java.

<com.developer.mtextfield.TextFieldBoxes    ...app:helperText="Helper is here"    >

error text:setError(String errorText, boolean giveFocus) in Java.

ParamgiveFocus determines whether the field will gain focus when set error on. Iftrue, the field gains focus immediately.

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

setError("Error message");

! NOTE: Prifix and Suffix attributes should be set toExtendedEditText.

Useapp:prefix in xml orsetPrefix(String prefix) in Java to set the unselectable prefix text at the start of the field.

Useapp:suffix in xml orsetSuffix(String suffix) in Java to set the unselectable suffix text at the end of the field.

<com.developer.mtextfield.ExtendedEditText    ...app:prefix="$"    >

<com.developer.mtextfield.ExtendedEditText    ...app:suffix="\@gmail.com"    >

NOTE: setting max or min character will make the bottom view (which contains the counter label) visible and increase the height of the TextFieldBoxes.

Useapp:maxCharacters in xml orsetMaxCharacters(int maxCharacters) in java code to set the max characters count. UseremoveMaxCharacters() in java code to remove the limit.

Useapp:minCharacters in xml orsetMinCharacters(int minCharacters) in java code to set the min characters count. UseremoveMinCharacters() in java code to remove the limit.

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

NOTE: Space and line feed will NOT count.

<com.developer.mtextfield.TextFieldBoxes    ...app:maxCharacters="10"app:minCharacters="5"    >

<com.developer.mtextfield.TextFieldBoxes    ...app:maxCharacters="5"    >

Useapp:iconSignifier in xml orsetIconSignifier(Int resourceID) to set the icon that is shown in front of the TextFieldBoxes if you want there to be one.

You can usesetIsResponsiveIconColor(boolean isrResponsiveIconColor) in Java code to set whether the icon will change its color when gaining or losing focus as the label text and the bottomLine do.NOTE that iftrue, the icon's color will always beHighlightColor (the same as the bottomLine) that will turn gray when losing focus. Iffalse, the icon will always be inprimaryColor.

<com.developer.mtextfield.TextFieldBoxes    ...app:iconSignifier="@drawable/ic_vpn_key_black_24dp"    >

Useapp:endIcon in xml orsetEndIcon(Int resourceID) to set the icon of the ImageButton that is shown at the end of the field if you want there to be one.

<com.developer.mtextfield.TextFieldBoxes    ...app:endIcon="@drawable/ic_mic_black_24dp"    >

To make it useful (trigger voice input, dropdown event), you would like to usegetEndIconImageButton() in Java code to set, for example, what will happen when it's clicked (with.setOnClickListener()), or anything else you want.

finalTextFieldBoxestextFieldBoxes =findViewById(R.id.text_field_boxes);textFieldBoxes.getEndIconImageButton().setOnClickListener(newView.OnClickListener() {@OverridepublicvoidonClick(Viewview) {// What you want to do when it's clicked    }});

Useapp:hasClearButton in xml orsetHasClearButton(boolean hasClearButton) to set whether to show the clear button.

Iftrue, a clear button will be shown at the end when there are characters (ANY character) entered in the field.

<com.developer.mtextfield.TextFieldBoxes    ...app:hasClearButton="true"    >

Primary Color will be used for the color of the underline, the floating label text and the icon signifierwhen HAVING focus. You can useapp:primaryColor in xml orsetPrimaryColor(int colorRes) in Java. Current themePrimary Color by default.

Secondary Color will be used for the color of the underline, the floating label text and the icon signifierwhen NOT HAVING focus. You can useapp:secondaryColor in xml orsetSecondaryColor(int colorRes) in Java. Current themetextColorTertiary by default.

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

Helper Text Color will be used for the color of the helper text. You can useapp:textHelperColor in xml orsetHelperTextColor(int colorRes) in Java.54% black by default.

Panel Background Color will be used for the color of panel at the back. You can useapp:panelBackgroundColor in xml orsetPanelBackgroundColor(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.

<com.developer.mtextfield.TextFieldBoxes    ...app:primaryColor="#1B5E20"app:errorColor="#ddaa00"app:textHelperColor="#795548"app:panelBackgroundColor="#ffe8e8"    >

Ripple Color will be used for the ripple effect when the view is clicked. You can customize it in yourstyles.xml by adding the following:

<stylename="TextFieldBoxes">    <itemname="android:colorControlHighlight"tools:targetApi="lollipop">YOUR_COLOR</item></style>

then set this as the theme for your TextFieldBoxes:

<com.developer.mtextfield.TextFieldBoxes    ...android:theme="@style/TextFieldBoxes"    >

You can make the layout compact by using a dense verticle spacing to improve user experience in some cases.

Useapp:useDenseSpacing in xml orsetUseDenseSpacing(boolean useDenseSpacing) to set whether the field uses a dense spacing between its elements.

<com.developer.mtextfield.TextFieldBoxes    ...app:useDenseSpacing="true"    >

Sometimes you may want the label and the hint to show different messages, but need the hint to always be shown (instead being blocked by the label when losing focus).

Useapp:alwaysShowHint in xml orsetAlwaysShowHint(boolean alwaysShowHint) to set whether the label is fixed at top when there's a hint in the EditText.

<com.developer.mtextfield.TextFieldBoxes    ...app:alwaysShowHint="true"    >

It is strongly recommanded to usesetSimpleTextChangeWatcher() to listen the event of changing text instead ofaddTextChangedListener().

This has the following advantages:

1. You don't need to implementbeforeTextChanged() andonTextChanged() method when unnecessary.
2. Avoids potential unexpected behavior, by guaranteeing your code to run after the default processes (remove error, update counter text, etc.) are finished.
3. When the view is recycled, no manual remove call is needed.

e.g.

finalTextFieldBoxestextFieldBoxes =findViewById(R.id.text_field_boxes);textFieldBoxes.setSimpleTextChangeWatcher(newSimpleTextChangedWatcher() {@OverridepublicvoidonTextChanged(StringtheNewText,booleanisError) {// What you want to do when text changes    }});

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

By default, the error state of the field is validated each time the text changes and also at time of construction. This means a field with a minimum length requirement will start in the Error state.

Settingapp:manualValidateError totrue will make the field validate error only whenvalidate() is called.

<com.developer.mtextfield.TextFieldBoxes    ...app:manualValidateError="true"    >

finalTextFieldBoxestextFieldBoxes =findViewById(R.id.text_field_boxes);// The error state will only be updated when this is calledtextFieldBoxes.validate()

​

Copyright 2019 MTextFieldLicensed 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, softwaredistributed 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 andlimitations under the License.