marqueeto
EditTexts with floating labels and marquee ellipsize.
Download via Gradle
Just add the following line to the dependencies section of your build.gradle
:
compile 'com.github.guilhermesgb:marqueeto:1.1.14'
LabelledMarqueeEditText
This widget is an enhanced EditText
(already with TextInputLayout
support) which provides two modes:
- read mode: displays a nice marquee effect if the text is longer than what can fit within the widget's bounds
![marqueeto read mode](https://github.com/guilhermesgb/marqueeto/blob/master/read mode.png) ![marqueeto read mode](https://github.com/guilhermesgb/marqueeto/blob/master/read mode with marquee.png) * read mode with a marquee effect, when necessary
- write mode: just like the normal
EditText
withTextInputLayout
support (a.k.a. with a floating label)
![marqueeto transition](https://github.com/guilhermesgb/marqueeto/blob/master/transition from read to write mode.png) ![marqueeto write mode](https://github.com/guilhermesgb/marqueeto/blob/master/write mode.png) * widget transitioning into write mode
Visually, you can tell the current mode the widget is at by the presence or absence of the bottom bar, and also from the size of the accompanying icon, which is a bit larger while in write mode.
Niceties
LabelledMarqueeEditText
works consistently from API 14 onwards (14, 16, 17 and 22 have been tested);- Has the same Material look 'n feel throughout all supported API levels (even the selector drawables!);
- Even though support for the official Material icons is default, thanks to the awesome Iconify library, pretty much any icon can be supported, even your own! If this interests you, refer to their project to find out how;
- Your project won't have to have the Support Libraries (AppCompat, Design, etc.) as a dependency for this widget to work (so you can use this "enhanced
TextInputLayout
+EditText
combination in places where they wouldn't work without these dependencies, e.g. a project without these support libs and simply good and old activities extendingActivity
).
How to use in your projects
To use LabelledMarqueeEditText
in your layouts, all you need to do is declare usage of this widget:
<com.github.guilhermesgb.marqueeto.LabelledMarqueeEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text"
android:hint="Address"
labelled_marquee:mode="edit"/>
LabelledMarqueeEditText
's recommended width is either match_parent
or a fixed value. If it is set to wrap_content
, then the actual width of the widget will vary depending on the underlying text - that probably won't be a pleasant experience for the end user, so you might want to avoid it.
You can use the following attributes:
android:text
via XML orsetText()
programatically,android:hint
via XML orsetHint()
programatically,marqueeto:error
via XML orsetError()
programatically,marqueeto:errorEnabled
via XML orsetErrorEnabled()
programatically,android:inputType
via XML orsetInputType()
programatically,
just as you would normally; Additionally you can use:
marqueeto:iconKey
via XML orsetIconKey()
programatically to set the Iconify Material icon key to be used in the widget, e.g.md-account-balance
;marqueeto:iconGravity
(new!) via XML only to set the icon gravity - either left or right is allowed;marqueeto:mode
via XML orsetMode()
programatically to set the preferred mode (a.k.a the initial state of the widget upon creation), e.g.edit
ormarquee
. Important: if the widget has no text, it will always be inedit
mode no matter what - even ifmarqueeto:mode="marquee"
.
Customize
LabelledMarqueeEditText
can be highly customized! Below are all the attributes that can be changed either via XML or programatically:
-
android:textColor
via XML orsetTextColor()
programatically to set the text color in the widget; -
marqueeto:labelledMarqueeEditTextStyle
via XML orsetCustomStyle()
programatically to change other more interesting appearance aspects of the widget, such as the icon, label and highlighted colors. A custom style defining the following attributes must be provided:<item name="baseColor"/>
to set the base color to be applied to the widget's overall appearance. If undefined, it will be equal to the Android default theme'scolorPrimary
;<item name="highlightColor"/>
to set the color to be applied to the widget while it is highlighted. If undefined, it will be equal to the Android default theme'scolorAccent
;<item name="iconColor"/>
to set the icon's color while the widget is not highlighted. If undefined, it will be equal tobaseColor
. Once the widget is highlighted, the icon's color will always be equal tohighlightColor
;<item name="errorColor"/>
to set the error color in the widget. If undefined, it will be equal tohighlightColor
.
Examples
Declaring a LabelledMarqueeEditText for inputting phone numbers (using the Iconify Material icon md-local-phone
):
<com.github.guilhermesgb.marqueeto.LabelledMarqueeEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="phone"
android:hint="Phone Number"
labelled_marquee:iconKey="md-local-phone"
labelled_marquee:mode="edit"
android:textColor="@android:color/white"
labelled_marquee:errorColor="@android:color/holo_purple"
labelled_marquee:labelledMarqueeEditTextStyle="@style/MyCustomStyle"
tools:ignore="HardcodedText"/>
Note that it is using a custom style referenced through @style/MyCustomStyle
for customizing the widget, so below is an example of such style:
<style name="MyCustomStyle">
<item name="baseColor">@android:color/holo_red_light</item>
<item name="highlightColor">@android:color/holo_red_dark</item>
</style>
Special Thanks
- Design Support Library by Google
- Iconify by Joan Zapata
- RippleEffect by Robin Chutaux
License
Copyright 2015 Guilherme Baptista
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.
It uses The Android Open Source Project's Support Libraries by Google,
and Iconify by Joan Zapata, both licensed under Apache 2.0 as well,
and RippleView by Robin Chutaux, licensed under MIT,
which is compatible with this library's license.
https://opensource.org/licenses/MIT