Professional Documents
Culture Documents
529 (https://github.com/HITGIF/TextFieldBoxes/stargazers?utm_source=android-
arsenal.com&utm_medium=referral&utm_campaign=6158) 27
(https://github.com/HITGIF/TextFieldBoxes/watchers?utm_source=android-
arsenal.com&utm_medium=referral&utm_campaign=6158) 87
(https://github.com/HITGIF/TextFieldBoxes/network?utm_source=android-
arsenal.com&utm_medium=referral&utm_campaign=6158) 15
(https://github.com/HITGIF/TextFieldBoxes/issues?utm_source=android-
arsenal.com&utm_medium=referral&utm_campaign=6158)
(https://facebook.com/sharer.php?
General u=https://android-
Category
arsenal.com/details/1/6158)
Free (/free)
Tag
(https://twitter.com/intent/twe
arsenal.com/details/1/6158&text=The%20An
Text Views (/tag/101)
%20Text%20Views%20-%20TextFieldBoxes
License
Apache License, Version 2.0 (http://opensource.org/licenses/Apache-2.0?utm_source=android-arsenal.co
(http://news.ycombinator.com/submitlink
m&utm_medium=referral&utm_campaign=6158)
arsenal.com/details/1/6158&t=The%20Andro
Min SDK
15 (Android 4.0.3–4.0.4 Ice Cream Sandwich) (/api?level=15)
Registered
%20Text%20Views%20-%
Sep 5, 2017
Favorites
(https://plus.google.com/share?
16 url=https://android-
Link arsenal.com/details/1/6158)
https://github.com/HITGIF/TextFieldBoxes/ (https://github.com/HITGIF/TextFieldBoxes/?utm_source=andr
(https://reddit.com/subm
oid-arsenal.com&utm_medium=referral&utm_campaign=6158)
arsenal.com/details/1/6158&title=The%20An
See also
BetterLinkMovementMethod (/details/1/4455)
%20Text%20Views%20
QuickReaderView (/details/1/2475)
Outline Textview (/details/1/6867)
CharCountTextView (/details/1/5350)
AnimatedText (/details/1/7079)
Additional
Language
Java
Version
1.4.4 (Jun 8, 2018) (https://github.com/HITGIF/TextFieldBoxes/releases/tag/1.4.4?utm_source=android-ar
senal.com&utm_medium=referral&utm_campaign=6158)
Created
Aug 24, 2017
Updated
Aug 20, 2018
Owner
CarbonylGroup (HITGIF) (/user/HITGIF)
Contributors
6 (https://github.com/HITGIF/TextFieldBoxes/graphs/contributors?utm_source=android-arsenal.com&utm
_medium=referral&utm_campaign=6158)
Activity
Badge
Generate
Download
Source code
APK file
Blurb
TextFieldBoxes
A new Material Design text field that comes in a box, based on Google Material Design guidelines
(https://material.io/guidelines/components/text-fields.html#text-fields-text-field-boxes).
🇨🇳 中文看这里 (https://github.com/HITGIF/TextFieldBoxes/blob/master/README_CN.md?
utm_source=android-arsenal.com&utm_medium=referral&utm_campaign=6158)
(https://ko-fi.com/A3343PAW?utm_source=android-
arsenal.com&utm_medium=referral&utm_campaign=6158)
UPDATE NOTICE
1.4.4 Release
Layout updated to support bigger clear icon and end icons (#72).
1.4.3 Release
Requirements
Installation
In order to use it, you need to include it in your project.
Gradle:
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
dependencies {
compile 'com.github.HITGIF:TextFieldBoxes:1.4.4'
}
Maven:
<repositories>
<repository>
<id>jitpack.io</id>
<url>https://jitpack.io</url>
</repository>
</repositories>
<dependency>
<groupId>com.github.HITGIF</groupId>
<artifactId>TextFieldBoxes</artifactId>
<version>1.4.4</version>
</dependency>
SBT:
Leiningen:
Table of Contents
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
1. Basic
...
<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>
...
2. Enable / Disable
NOTE: setting helper or error text to anything not 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.
<studio.carbonylgroup.textfieldboxes.TextFieldBoxes
...
app:helperText="Helper is here"
>
Param giveFocus determines whether the field will gain focus when set error on. If true , the field
gains focus immediately.
NOTE: Error will be removed when the text changes (input or delete).
setError("Error message");
Use app:suffix in xml or setSuffix(String suffix) in Java to set the unselectable suffix text at
the end of the field.
<studio.carbonylgroup.textfieldboxes.ExtendedEditText
...
app:prefix="$ "
>
<studio.carbonylgroup.textfieldboxes.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.
Use app:minCharacters in xml or setMinCharacters(int minCharacters) in java code to set the min
characters count. Use removeMinCharacters() in java code to remove the limit.
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 limit.
<studio.carbonylgroup.textfieldboxes.TextFieldBoxes
...
app:maxCharacters="10"
app:minCharacters="5"
>
<studio.carbonylgroup.textfieldboxes.TextFieldBoxes
...
app:maxCharacters="5"
>
6. Icon Signifier
Use app:iconSignifier in xml or setIconSignifier(Int resourceID) to set the icon that is shown
in front of the TextFieldBoxes if you want there to be one.
<studio.carbonylgroup.textfieldboxes.TextFieldBoxes
...
app:iconSignifier="@drawable/ic_vpn_key_black_24dp"
>
7. End Icon
Use app:endIcon in xml or setEndIcon(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.
<studio.carbonylgroup.textfieldboxes.TextFieldBoxes
...
app:endIcon="@drawable/ic_mic_black_24dp"
>
To make it useful (trigger voice input, dropdown event), you would like to use
getEndIconImageButton() in Java code to set, for example, what will happen when it's clicked (with
.setOnClickListener() ), or anything else you want.
8. Clear Button
If true , a clear button will be shown at the end when there are characters (ANY character)
entered in the field.
<studio.carbonylgroup.textfieldboxes.TextFieldBoxes
...
app:hasClearButton="true"
>
9. Custom Colors
Primary Color will be used for the color of the underline, the floating label text and the icon signifier
when HAVING focus. You can use app:primaryColor in xml or setPrimaryColor(int colorRes) in
Java. Current theme Primary Color by default.
Secondary Color will be used for the color of the underline, the floating label text and the icon
signifier when NOT HAVING focus. You can use app:secondaryColor in xml or
setSecondaryColor(int colorRes) in Java. Current theme textColorTertiary 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.
<studio.carbonylgroup.textfieldboxes.TextFieldBoxes
...
app:primaryColor="#1B5E20"
app:errorColor="#ddaa00"
app:helperTextColor="#795548"
app:panelBackgroundColor="#ffe8e8"
>
Ripple Color will be used for the ripple effect when the view is clicked. You can customize it in your
styles.xml by adding the following:
<style name="TextFieldBoxes">
<item name="android:colorControlHighlight" tools:targetApi="lollipop">YOUR_COLOR</item>
</style>
<studio.carbonylgroup.textfieldboxes.TextFieldBoxes
...
android:theme="@style/TextFieldBoxes"
>
You can make the layout compact by using a dense verticle spacing to improve user experience in
some cases.
Use app:useDenseSpacing in xml or setUseDenseSpacing(boolean useDenseSpacing) to set whether
the field uses a dense spacing between its elements.
<studio.carbonylgroup.textfieldboxes.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).
<studio.carbonylgroup.textfieldboxes.TextFieldBoxes
...
app:alwaysShowHint="true"
>
e.g.
TextFieldBoxes 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.
Setting app:manualValidateError to true will make the field validate error only when validate()
is called.
<studio.carbonylgroup.textfieldboxes.TextFieldBoxes
...
app:manualValidateError="true"
>
final TextFieldBoxes textFieldBoxes = findViewById(R.id.text_field_boxes);
// The error state will only be updated when this is called
textFieldBoxes.validate()
All Attributes
ExtendedEditText
Texts
Attribute Description
Colors
TextFieldBoxes
Texts
Attribute Description
Colors
app:primaryC The color for the underline, the floating label text and the i Current theme colo
olor con signifier when HAVING FOCUS rPrimary
Attribute Description Default
app:secondar The color for the underline, the floating label text and the i Current theme text
yColor con signifier when NOT HAVING FOCUS ColorTertiary
Icons
app:iconSignif
The resource ID of the icon before the TextFieldBoxes 0
ier
app:isResponsi whether the icon signifier will change its color when gaining or losi
True
veIconColor ng focus as the label and the bottomLine do
Characters counter
Others
app:hasClearButton Whether to show the clear button at the end of the EditText False
License
Copyright 2017 Carbonylgroup Studio
http://www.apache.org/licenses/LICENSE-2.0