A different beautiful Floating Edit Text

Overview

MaterialTextField

Android Arsenal

A different beautiful Floating Edit Text

Android app on Google Play

screen

screen

Android app on Google Play

Usage

Surround your EditText by a MaterialTextField

<com.github.florent37.materialtextfield.MaterialTextField
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        app:mtf_labelColor="#666"
        app:mtf_image="@drawable/ic_mail_grey600_24dp"
        >

        <EditText
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:hint="Password"
             android:textColor="#333"
             android:textSize="15sp" />

</com.github.florent37.materialtextfield.MaterialTextField>

Don't forget to precise a drawable to mtf_image

app:mtf_image="@drawable/ic_mail_grey600_24dp"

Available attributes

<com.github.florent37.materialtextfield.MaterialTextField
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    
    app:mtf_cardCollapsedHeight="4dp"
    app:mtf_image="@drawable/ic_mail_grey600_24dp"
    app:mtf_animationDuration="1000"
    app:mtf_labelColor="@android:color/holo_red_dark"
    app:mtf_openKeyboardOnFocus="true">

Download

Buy Me a Coffee at ko-fi.com

In your module Download

implementation 'com.github.florent37:materialtextfield:1.0.7'

Log

1.0.6

  • support focusability
  • added app:mtf_hasFocus="false"

1.0.3

  • removed some dependencies
  • fix for 4.4

1.0.2

  • backport fix for Pre-Lollipop
  • added mtf_cardCollapsedHeight attribute

Credits

Author: Florent Champigny

Fiches Plateau Moto : https://www.fiches-plateau-moto.fr/

Android app on Google Play Follow me on Google+ Follow me on Twitter Follow me on LinkedIn

Designer: Srikant Shetty

Originally designed on MaterialUp : http://www.materialup.com/posts/new-material-text-fields-application

Follow me on Dribble

License

Copyright 2015 florent37, Inc.

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.
Comments
  • Where is the cornerRadius on these textfields?

    Where is the cornerRadius on these textfields?

    I really want to have the implementation look like what you posted in the README, because this is ugly

    here's my XML for achieving the above

            <com.github.florent37.materialtextfield.MaterialTextField
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:mtf_cardCollapsedHeight="@dimen/material_textfield_collapsed_height"
                app:mtf_image="@drawable/ic_email_black_24dp"
                app:mtf_labelColor="@android:color/black"
                app:mtf_openKeyboardOnFocus="true">
    
                <com.andreabaccega.widget.FormEditText
                    android:id="@+id/emailET"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="@string/email_address_hint"
                    android:inputType="textEmailAddress"
                    android:singleLine="true"
                    android:textColor="@android:color/black"
                    android:textColorHint="@color/edittext_hint_color"
                    android:textCursorDrawable="@null"
                    validator:emptyErrorString="@string/field_empty_error_message"
                    validator:testErrorString="@string/error_email_address_not_valid"
                    validator:testType="email"/>
    
            </com.github.florent37.materialtextfield.MaterialTextField>
    
    opened by Odaym 4
  • Text going behind edittext on api 16

    Text going behind edittext on api 16

    https://owncloud.talview.com/index.php/s/VAhzFfrVPNOxeZA

    As you can see from the screenshot above, the hint text is going inside the minimized edittext for api 16, please tell me how to fix this

    opened by bhargavms 4
  • bug in Tablet, 7

    bug in Tablet, 7" and up

    hi, tnx for this library but i can't use this in tablet ! in under 7" devices its perfect but up 7" devices show big bug ! please show this image, Tablet 7". how to fix it bug? i really need this library .

    tnx

    opened by tellfa 4
  • doesn't work on ~10

    doesn't work on ~10" Sony Tablet S (Android 4.0.3)

    after updating to version 1.0.4 it doesn't work on ~10" Sony Tablet S (Android 4.0.3).

    screenshot_2016-05-17-11-54-28

    Expand doesn't work properly. please, fix these ASAP. Thanks

    bug 
    opened by kasim1011 2
  • EditText doesn't open with ImeOptions

    EditText doesn't open with ImeOptions

    I've 2 MaterialTextField, the first one has the following attribute: ime_options="actionNext". But when I click on the button "Next", after having filled my first EditText, the second MaterialTextField doesn't open automatically.

    opened by LionelCremer 2
  • Clearfocus from a MaterialTextField does not work

    Clearfocus from a MaterialTextField does not work

    i wanted to clearfocus from the MaterialTextField when the user shifts his focus to another MaterialTextField, instead both remain in focus. is there a way to do that dynamically in java code? @florent37

    opened by ishaan1995 1
  • Edited confusing usage example in README

    Edited confusing usage example in README

    The following attribute of an EditText does not have any visible effect when used within a MaterialTextField:

    android:textColorHint="#666"
    

    Viewers of the usage example may be confused as to why the attribute does not work upon use in applications. As such, I removed this line for clarity and added the following attribute to its parent view:

    app:mtf_labelColor="#666"
    

    It gives the intended effect of specifying the hint colour of an EditText as well as eliminating reader confusion.

    opened by SeunAdelekan 0
  • Fix broken headings in Markdown files

    Fix broken headings in Markdown files

    GitHub changed the way Markdown headings are parsed, so this change fixes it.

    See bryant1410/readmesfix for more information.

    Tackles bryant1410/readmesfix#1

    opened by bryant1410 0
  • General Updates

    General Updates

    Hello @florent37! Thanks for your amazing library!

    I have forked the project in order to make the following changes:

    • Update all dependencies in build.gradle files
    • Add a new property backgroundColor for card view, in order to make background customization more easier through xml layout
    • Fix an issue related to focus. In Android versions >= 4.4.4, I have removed the event requestChildFocus which was interferring with toggle method.
    • Fix an issue related to toggle method, when you write something in the EditText, and then you reduce it, the text that you have added to editText keeps in the border of the card. So, in order to stop doing this, and make the view even more prettier, I have added a Listener to the animation dispatched in expand/reduce methods, so the EditText can change it's level of visibility.
    • Other minor changes to sample app, to show how to use the new attribute backgroundColor

    Well! That's all! Thanks again!

    opened by JonatanSalas 0
  • mtf_cardCollapsedHeight

    mtf_cardCollapsedHeight

    it would better to change this: compile 'com.github.florent37:materialtextfield:1.0.1@aar' into this: compile 'com.github.florent37:materialtextfield:1.0.2@aar' it makes more sense... thanks...

    opened by MohsenShafiee 0
  • deface app icon

    deface app icon

    first of all,thanks for this library but when i added 'com.github.florent37:materialtextfield:1.0.7' and run app in huawei p10 lite (android8),app icon has crashed.

    opened by hrabiian2 0
  • BUG: get focus when a layout is placed below

    BUG: get focus when a layout is placed below

    Hi,

    I'd like to report a bug when the MaterialTextField is placed above a RecyclerView or Gridview. On the display of the activity, the keyboard is opened automatically, without editText getting the focus. That's a very weird behaviour.

    But only with a layout below. It doesn't occur with a simple TextView or button below your MaterialEditText.

    This is my current XML:

            <com.github.florent37.materialtextfield.MaterialTextField
                android:id="@+id/materialTxtField"
                android:layout_width="291dp"
                android:layout_height="wrap_content"
    
                android:layout_gravity="bottom|center_vertical|center_horizontal"
                android:layout_weight="1"
                app:mtf_animationDuration="250"
                app:mtf_cardCollapsedHeight="4dp"
                app:mtf_image="@drawable/gold_star_icon"
                app:mtf_labelColor="@color/colorPrimaryLight"
                app:mtf_openKeyboardOnFocus="true">
    
                <EditText
                    android:id="@+id/editTxtPlayerName"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="@string/player_name"
                    android:inputType="none" />
    
            </com.github.florent37.materialtextfield.MaterialTextField>
    
            <ImageButton
                android:id="@+id/btnRetrieveTime"
                android:layout_width="77dp"
                android:layout_height="55dp"
                android:layout_gravity="bottom"
                android:layout_marginStart="5dp"
                android:layout_weight="1"
                android:adjustViewBounds="true"
                android:background="@drawable/roundedcorner"
                android:contentDescription="@string/btnGetTime"
                android:padding="2dp"
                android:scaleType="fitCenter"
                android:src="@drawable/ic_chrono2" />
        </LinearLayout>
    
        <android.support.v7.widget.RecyclerView
            android:id="@+id/recyclerView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginBottom="10dp"
            android:layout_marginEnd="20dp"
            android:layout_marginStart="20dp"
            android:layout_marginTop="50dp"
            android:animationCache="false"
            android:layoutAnimation="@anim/layout_animation_fall_down"
            android:scrollbars="none" />
    

    Could you help me please ?

    opened by CyrilNb 1
  • Automatically Expand When activity Called? How to do?

    Automatically Expand When activity Called? How to do?

    I want it to open automatically when my activity calls, i am using it in update field so i want show the set text data, but it all time collapse mode, i want it in expand mode already. how to do? Thanks in Advance.

    opened by ashutosh-patil 0
Releases(1.0.6)
Owner
Florent CHAMPIGNY
Florent CHAMPIGNY
A editable text with a constant text/placeholder for Android.

ParkedTextView A EditText with a constant text in the end. How to use <com.goka.parkedtextview.ParkedTextView xmlns:app="http://schemas.android.co

goka 270 Nov 11, 2022
A TextView that simulates the effect from the app Secret where the characters fade in/out at different speeds.

SecretTextView A TextView that simulates the effect from the app Secret where the characters fade in/out at different speeds. How To Use Use it just l

Matt Kula 611 Nov 7, 2022
A TextView that automatically resizes text to fit perfectly within its bounds.

AutoFitTextView A TextView that automatically resizes text to fit perfectly within its bounds. Usage dependencies { compile 'me.grantland:autofitt

Grantland Chew 4.2k Jan 8, 2023
:page_facing_up: Android Text Full Jusiftication / Wrapping / Justify / Hyphenate - V2.0

LIBRARY IS NO LONGER MAINTAINED If you want to adopt + maintain this library, please drop me a message - [email protected] Android Full Justific

Mathew Kurian 1.9k Dec 29, 2022
A periodic text updating library

RotatingText Rotating text is an Android library that can be used to make text switching painless and beautiful, with the use of interpolators, typefa

Mobile Development Group 1.6k Dec 30, 2022
Floating hint from edit text - inspired by Matt D. Smith's design: http://dribbble.com/shots/1254439--GIF-Mobile-Form-Interaction?list=users

Float Labeled EditText Simple implementation of a Float Labeled EditText: An Android ViewGroup which uses a child EditText and puts the hint on top of

Wrapp Archive 1.1k Nov 14, 2022
Floating Action Menu for Android. Inspired by the Google Plus floating menu

android-floating-action-menu Floating Action Menu for Android. Inspired by the Google Plus floating menu. Demo Setup The simplest way to use this libr

Alessandro Crugnola 242 Nov 10, 2022
A library that gives full control over text related technologies such as bidirectional algorithm, open type shaping, text typesetting and text rendering

Tehreer-Android Tehreer is a library which gives full control over following text related technologies. Bidirectional Algorithm OpenType Shaping Engin

Tehreer 61 Dec 15, 2022
Speech-Text Converter is a simple task that enable the user to convert the speech to text or convert text to speech (by Mic)

Speech-Text Converter About Speech-Text Converter is a simple task that enable the user to convert the speech to text or convert text to speech (by Mi

Kareem Saeed 1 Oct 21, 2021
Android form edit text is an extension of EditText that brings data validation facilities to the edittext.

Android Form EditText Android form edit text is an extension of EditText that brings data validation facilities to the edittext. Example App I built a

Andrea 1.5k Dec 14, 2022
Chips EditText, Token EditText, Bubble EditText, Spannable EditText and etc.. There are many names of this control. Here I develop easy to understand , modify and integrate Chips Edit Text widget for Android

Chips EditText Library Chips EditText, Token EditText, Bubble EditText, Spannable EditText and etc.. There are many names of this control. Here I deve

kpbird 381 Nov 20, 2022
Android Custom View for prevent the view behind on-screen keyboard when edit text is focused

Group Focusable Prevent the view behind on-screen keyboard when edit text is focused in Android UI Download Gradle implementation 'com.akexorcist:grou

Akexorcist 8 Jun 22, 2022
An easy approach on how to create your country code picker for the edit text.

Country-Code-Picker Original Article on Dev.to Click below ?? App's Overview In this article, I am going to demonstrate how to create a simple country

Siddharth Singh 5 Mar 10, 2022
LocalizedEditText - Custom edit text that allow only one language

LocalizedEditText Custom edit text that allow only one language Supported languages : Arabic , English Default language : English Examples

Mostafa Gad 1 Nov 28, 2021
ComposeChips - A gmail like chip edit text for compose ui

ComposeChips A gmail like chip edit text for compose ui Installation implementat

null 2 Feb 5, 2022
Simple and lightweight UI library for user new experience, combining floating bottom navigation and bottom sheet behaviour. Simple and beautiful.

Simple and lightweight UI library for user new experience, combining floating bottom navigation and bottom sheet behaviour. Simple and beautiful.

Rizki Maulana 118 Dec 14, 2022
🗨️ Beautiful Dialog is a Simple and Beautiful custom dialog

Beautiful Dialog ??️ Beautiful Dialog is a Simple and Beautiful custom dialog. Screenshots Including in your project Gradle Add below codes to your ro

Geovani Amaral 21 Jan 6, 2023
A different beautiful ViewPager, with quick swipe controls

HollyViewPager Usage Add a HollyViewPager in your layout <com.github.florent37.hollyviewpager.HollyViewPager android:id="@+id/hollyViewPager"

Florent CHAMPIGNY 1.1k Dec 9, 2022