{"id":25,"date":"2016-06-22T07:42:04","date_gmt":"2016-06-22T07:42:04","guid":{"rendered":"http:\/\/abhiandroid.com\/materialdesign\/?page_id=25"},"modified":"2019-06-13T11:11:32","modified_gmt":"2019-06-13T11:11:32","slug":"textinputlayout-floating-labels-edittext","status":"publish","type":"page","link":"https:\/\/abhiandroid.com\/materialdesign\/textinputlayout-floating-labels-edittext","title":{"rendered":"TextInputLayout \/ Floating Labels In EditText\u00a0With Example In Android Studio"},"content":{"rendered":"

TextInputLayout is a new element introduced in Design Support library to display the floating label in\u00a0EditText<\/a>. To display floating label in EditText, TextInputLayout needs to wrapped the EditText. We can also display\u00a0the error message to EditText by using\u00a0setError() and setErrorEnabled() methods. It takes the value of hint assigned to EditText and displays it as floating label. Android Design Support Library introduced some important new widgets\u00a0that helps us to create consistent UI.<\/p>\n

\"Floating<\/p>\n

 <\/p>\n

Floating Labels:<\/strong><\/span> Floating labels first\u00a0introduced in Android design support library to display floating label over EditText<\/a>. Firstly it acts as hint in the EditText when the field is empty. After that when a user start inputting the text it starts animating by moving to floating label position.<\/p>\n

Special Note:<\/strong><\/span>\u00a0 In Android, one of the most basic UI element or widgets is an EditText. It is generally used to take the any kind of input from the user but what it lacks was a label attached to it. Therefore in most of the implementations hint was used as a label for the EditText. From the time material design was released, a new concept of floating labels\u00a0was introduced. In this concept initially showed a label as a hint and when a user enters a value in the EditText that hint moves on to the top of the EditText as a floating label.<\/p>\n

\n

Basic\u00a0TextInputLayout XML Code:<\/strong><\/h4>\n
<android.support.design.widget.TextInputLayout\r\nandroid:id=\"@+id\/simpleTextInputLayout\"\r\nandroid:layout_width=\"wrap_content\"\r\nandroid:layout_height=\"wrap_content\">\r\n\r\n<EditText\r\nandroid:id=\"@+id\/simpleEditText\"\r\nandroid:layout_width=\"wrap_content\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:hint=\"Enter Your Name\" \/>\r\n<\/android.support.design.widget.TextInputLayout>\r\n<\/pre>\n
\n
Important Methods Of TextInputLayout:<\/strong><\/h4>\n
Let\u2019s we discuss some important methods of TextInputLayout that may be called in order to manage the TextInputLayout.<\/p>\n
1. setError(CharSequenceerror):<\/strong> <\/span>This method is used to set an error message that will be displayed below our\u00a0EditText. In this method we set CharSequence value for error message.<\/p>\n
Below we set the error message that will be displayed below our EditText.<\/p>\n
TextInputLayout simpleTextInputLayout = (TextInputLayout) findViewById(R.id.simpleTextInputLayout); \/\/ get the reference of TextInputLayout\r\nsimpleTextInputLayout.setError(\"Please Check Field\"); \/\/ set the error message that will be displayed below our EditText\r\n<\/pre>\n
2. getError():<\/strong><\/span> This method is used for getting the error message that was set to be displayed using setError(CharSequence). It returns null if no error was set or error displaying is not enabled. This method returns CharSequence type value.<\/p>\n
Below we firstly set the error and then get the error message that was set to be displayed using setError(CharSequence) method.<\/p>\n
TextInputLayout simpleTextInputLayout = (TextInputLayout) findViewById(R.id.simpleTextInputLayout); \/\/ get the reference of TextInputLayout\r\nsimpleTextInputLayout.setError(\"Please Check Field\"); \/\/ set the error message that will be displayed below our EditText\r\nCharSequence errorMessage=simpleTextInputLayout.getError(); \/\/ get the error message that was set to be displayed using setError(CharSequence) method.\r\n<\/pre>\n
3. setErrorEnabled(boolean enabled):<\/strong><\/span> This method is used to set whether the error functionality is enabled or not in this layout. We set true for enabled and false for disabled error functionality.<\/p>\n
Below we set the true value that enabled the error functionality.<\/p>\n
TextInputLayout simpleTextInputLayout = (TextInputLayout) findViewById(R.id.simpleTextInputLayout); \/\/ get the reference of TextInputLayout\r\nsimpleTextInputLayout.setErrorEnabled(true); \/\/ set the true value that enabled the error functionality\r\n<\/pre>\n
4. isErrorEnabled():<\/strong><\/span> This method is used to check whether the error functionality is enabled or not in this layout. This method returns Boolean type value which we set using setErrorEnabled (boolean enabled) method.<\/p>\n
Below we firstly enabled the error functionality and then check whether the error functionality is enabled or not.<\/p>\n
TextInputLayout simpleTextInputLayout = (TextInputLayout) findViewById(R.id.simpleTextInputLayout); \/\/ get the reference of TextInputLayout\r\nsimpleTextInputLayout.setErrorEnabled(true); \/\/ set the true value that enabled the error functionality\r\nBoolean isEnabled = simpleTextInputLayout.isErrorEnabled(); \/\/ check whether the error functionality is enabled or not\r\n<\/pre>\n
5. setHint(CharSequence\u00a0hint):<\/strong> <\/span>This method is used to set the hint to be displayed in the floating label, if enabled. \u00a0In this method we set CharSequence value for displaying hint.<\/p>\n
Below we set the hint to be displayed in the floating label.<\/p>\n
TextInputLayout simpleTextInputLayout = (TextInputLayout) findViewById(R.id.simpleTextInputLayout); \/\/ get the reference of TextInputLayout\r\nsimpleTextInputLayout.setHint(\"Enter UserName\"); \/\/ set the hint to be displayed in the floating label.\r\n<\/pre>\n
6. getHint():<\/strong> <\/span>This method is used to get the hint which is displayed in the floating label, if enabled. This method returns CharSequence type value.<\/p>\n
Below we set the hint and then get the hint which is displayed in the floating label<\/p>\n
TextInputLayout simpleTextInputLayout = (TextInputLayout) findViewById(R.id.simpleTextInputLayout); \/\/ get the reference of TextInputLayout\r\nsimpleTextInputLayout.setHint(\"Enter UserName\"); \/\/ set the hint to be displayed in the floating label.\r\nCharSequence hintValue = simpleTextInputLayout.getHint(); \/\/ get the hint which is displayed in the floating label\r\n<\/pre>\n
7. setCounterMaxLength(int maxLength):<\/strong><\/span> This method is used to set the max length value to display at the character counter. In this method we pass int type value for setting max length value.<\/p>\n
Below we set the max length value to display at the character counter.<\/p>\n
TextInputLayout simpleTextInputLayout = (TextInputLayout) findViewById(R.id.simpleTextInputLayout); \/\/ get the reference of TextInputLayout\r\nsimpleTextInputLayout.setCounterMaxLength(10); \/\/ set 10 max length value to display at the character counter\r\n<\/pre>\n
8. getCounterMaxLength():<\/strong><\/span> This method is used for getting the max length shown at the character counter. This method returns int type value which we set through setCounterMaxLength(int maxLength) method.<\/p>\n
Below we firstly set the max length value and then get the max length value that shown at the character counter.<\/p>\n
TextInputLayout simpleTextInputLayout = (TextInputLayout) findViewById(R.id.simpleTextInputLayout); \/\/ get the reference of TextInputLayout\r\nsimpleTextInputLayout.setCounterMaxLength(10); \/\/ set 10 max length value to display at the character counter\r\nint maxLengthValue= simpleTextInputLayout.getCounterMaxLength(); \/\/ get the max length value that shown at the character counter.\r\n<\/pre>\n
9. setCounterEnabled(boolean enabled):<\/strong><\/span> This method is used to set whether the character counter functionality is enabled or not in this layout. . We set true for enabled and false for disabled the counter functionality.<\/p>\n
Below we set the true value that enabled the counter functionality in this layout.<\/p>\n
TextInputLayout simpleTextInputLayout = (TextInputLayout) findViewById(R.id.simpleTextInputLayout); \/\/ get the reference of TextInputLayout\r\nsimpleTextInputLayout.setCounterEnabled(true); \/\/ set the true value that enabled the counter functionality in this layout\r\n<\/pre>\n
10. setTypeface(Typeface\u00a0typeface):<\/strong><\/span> This method is used to set the typeface to use for both the expanded and floating hint.<\/p>\n
Below we set Sans – Serif typeface to use for the expanded and floating hint.<\/p>\n
TextInputLayout simpleTextInputLayout = (TextInputLayout) findViewById(R.id.simpleTextInputLayout); \/\/ get the reference of TextInputLayout\r\nsimpleTextInputLayout.setTypeface(Typeface.SANS_SERIF); \/\/ set Sans - Serif typeface to use for the expanded and floating hint.\r\n<\/pre>\n
11. getTypeface():<\/strong><\/span> This method is used for getting the typeface used for both the expanded and floating hint. This method returns Typeface type value which we set using setTypeface(Typeface\u00a0typeface) method.<\/p>\n
Below we firstly we set Sans – Serif typeface and then get the typeface used for both the expanded and floating hint.<\/p>\n
TextInputLayout simpleTextInputLayout = (TextInputLayout) findViewById(R.id.simpleTextInputLayout); \/\/ get the reference of TextInputLayout\r\nsimpleTextInputLayout.setTypeface(Typeface.SANS_SERIF); \/\/ set Sans - Serif typeface to use for the expanded and floating hint.\r\nTypeface typeface = simpleTextInputLayout.getTypeface(); \/\/ get the typeface used for both the expanded and floating hint.\r\n<\/pre>\n
\n
Attributes of TextInputLayouts:<\/strong><\/h4>\n
Now let\u2019s we discuss some common attributes of a TextInputLayout that helps us to configure it in our layout (xml).<\/p>\n
1. support.design:counterMaxLength:<\/strong><\/span> This attribute is used to set the max length to display in the character counter. In this attribute we set int type value for setting max length value. We can also do this programmatically using setCounterMaxLength(int maxLength) method.<\/p>\n
Below we set the max length value to display at the character counter.<\/p>\n
<android.support.design.widget.TextInputLayout\r\nandroid:id=\"@+id\/simpleTextInputLayout\"\r\nandroid:layout_width=\"match_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid.support.design:counterMaxLength=\"10\">\r\n\r\n<EditText\r\nandroid:id=\"@+id\/simpleEditText\"\r\nandroid:layout_width=\"match_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:hint=\"Enter Your Name\" \/>\r\n<\/android.support.design.widget.TextInputLayout>\r\n\r\n<!--\u00a0 \u00a0we set the max length value to display at the character counter -->\r\n<\/pre>\n
2. support.design:counterEnabled:<\/strong><\/span> This attribute is used to set whether the character counter functionality is enabled or not in this layout. We set true for enabled and false for disabled the counter functionality. We can also do this\u00a0 programmatically using setCounterEnabled(boolean enabled) method.<\/p>\n
Below we set the true value that enabled the counter functionality in this layout.<\/p>\n
<android.support.design.widget.TextInputLayout\r\nandroid:id=\"@+id\/simpleTextInputLayout\"\r\nandroid:layout_width=\"match_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid.support.design:counterEnabled=\"true\"\r\nandroid.support.design:counterMaxLength=\"10\">\r\n\r\n<EditText\r\nandroid:id=\"@+id\/simpleEditText\"\r\nandroid:layout_width=\"match_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:hint=\"Enter Your Name\" \/>\r\n<\/android.support.design.widget.TextInputLayout>\r\n<!-- set the true value that enabled the counter functionality in this layout-->\r\n<\/pre>\n
3. support.design:errorEnabled:<\/strong><\/span> This attribute is used to set whether the error functionality is enabled or not in this layout. We set true for enabled and false for disabled error functionality. We can also do this programmatically using setErrorEnabled(boolean enabled) method.<\/p>\n
Below we set the true value that enabled the error functionality.<\/p>\n
<android.support.design.widget.TextInputLayout\r\nandroid:id=\"@+id\/simpleTextInputLayout\"\r\nandroid:layout_width=\"match_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid.support.design:counterEnabled=\"true\"\r\nandroid.support.design:errorEnabled=\"true\">\r\n\r\n<EditText\r\nandroid:id=\"@+id\/simpleEditText\"\r\nandroid:layout_width=\"match_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:hint=\"Enter Your Name\" \/>\r\n<\/android.support.design.widget.TextInputLayout>\r\n<!-- set the true value that enabled the error functionality in this layout-->\r\n<\/pre>\n
4. android:hint:<\/strong><\/span> This attribute is used to set the hint to be displayed in the floating label. We can also set hint programmatically using setHint(CharSequence\u00a0hint) method.<\/p>\n
Below we set the hint to be displayed in the floating label.<\/p>\n
<android.support.design.widget.TextInputLayout\r\nandroid:id=\"@+id\/simpleTextInputLayout\"\r\nandroid:layout_width=\"match_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:hint=\"User Name\">\r\n\r\n<EditText\r\nandroid:id=\"@+id\/simpleEditText\"\r\nandroid:layout_width=\"match_parent\"\r\nandroid:layout_height=\"wrap_content\" \/>\r\n<\/android.support.design.widget.TextInputLayout>\r\n<!-- set the hint to be displayed in the floating label-->\r\n<\/pre>\n
\n
TextInputLayout\/ Floating Labels In EditText Example In Android Studio:<\/h4>\n
Below is the example to show the usage of TextInputLayout where we create a login form with floating labels, input validations and error messages enabled. In this we also display a Sign In Button<\/a> and perform click event on it so whenever a\u00a0 user click on Button we check the Fields and if a field is empty we display the error message otherwise we display \u201cThank You\u201d message by using a Toast.<\/p>\n
Download Code<\/a> ?<\/a><\/p>\n
\"Floating<\/p>\n
Step 1:<\/strong><\/span>\u00a0Create a new project and name it TextInputLayoutExample<\/p>\n
Step 2:<\/strong> <\/span>Open Gradle Scripts >\u00a0build.gradle<\/strong>\u00a0and add Design support library dependency.<\/p>\n
apply plugin: 'com.android.application'\r\n\r\nandroid {\r\ncompileSdkVersion 23\r\nbuildToolsVersion \"23.0.2\"\r\n\r\ndefaultConfig {\r\napplicationId \"example.abhiandroid.textinputlayoutexample\"\r\nminSdkVersion 15\r\ntargetSdkVersion 23\r\nversionCode 1\r\nversionName \"1.0\"\r\n}\r\nbuildTypes {\r\nrelease {\r\nminifyEnabled false\r\nproguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'\r\n}\r\n}\r\n}\r\n\r\ndependencies {\r\ncompile fileTree(dir: 'libs', include: ['*.jar'])\r\ncompile 'com.android.support:appcompat-v7:23.1.1'\r\ncompile 'com.android.support:design:23.1.0' \/\/ design support library\r\n\r\n}\r\n<\/pre>\n
Step 3:<\/strong><\/span> \u00a0Open res -> layout -> activity_main.xml (or) main.xml<\/strong> and add following code:<\/p>\n
<LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\nxmlns:android.support.design=\"http:\/\/schemas.android.com\/apk\/res-auto\"\r\nxmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\nandroid:layout_width=\"match_parent\"\r\nandroid:layout_height=\"match_parent\"\r\nandroid:orientation=\"vertical\"\r\nandroid:paddingBottom=\"@dimen\/activity_vertical_margin\"\r\nandroid:paddingLeft=\"@dimen\/activity_horizontal_margin\"\r\nandroid:paddingRight=\"@dimen\/activity_horizontal_margin\"\r\nandroid:paddingTop=\"@dimen\/activity_vertical_margin\"\r\ntools:context=\".MainActivity\">\r\n<!-- first TextInputLayout -->\r\n<android.support.design.widget.TextInputLayout\r\nandroid:id=\"@+id\/emailTextInputLayout\"\r\nandroid:layout_width=\"match_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:layout_marginTop=\"50dp\"\r\nandroid.support.design:counterMaxLength=\"3\">\r\n\r\n<EditText\r\nandroid:id=\"@+id\/emailEditText\"\r\nandroid:layout_width=\"match_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:hint=\"Email Id\" \/>\r\n<\/android.support.design.widget.TextInputLayout>\r\n<!-- first TextInputLayout -->\r\n\r\n<android.support.design.widget.TextInputLayout\r\nandroid:id=\"@+id\/passwordTextInputLayout\"\r\nandroid:layout_width=\"match_parent\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:hint=\"Password\">\r\n\r\n<EditText\r\nandroid:id=\"@+id\/passwordEditText\"\r\nandroid:layout_width=\"match_parent\"\r\nandroid:layout_height=\"wrap_content\" \/>\r\n<\/android.support.design.widget.TextInputLayout>\r\n<!-- sign In Button -->\r\n<Button\r\nandroid:id=\"@+id\/signInButton\"\r\nandroid:layout_width=\"200dp\"\r\nandroid:layout_height=\"wrap_content\"\r\nandroid:layout_gravity=\"center\"\r\nandroid:layout_marginTop=\"20dp\"\r\nandroid:background=\"#0f0\"\r\nandroid:text=\"Sign In\"\r\nandroid:textColor=\"#FFF\"\r\nandroid:textSize=\"20sp\"\r\nandroid:textStyle=\"bold\" \/>\r\n<\/LinearLayout>\r\n<\/pre>\n
Step 4:<\/strong><\/span>\u00a0Open src -> package -> MainActivity.java<\/strong><\/p>\n
In this step we open\u00a0MainActivity\u00a0and\u00a0add the code for initiate the views (TextInputLayout and other views). After that we perform click event on Button so whenever a\u00a0 user click on Button we check the Fields and if a field is empty we display the error message otherwise we display \u201cThank You\u201d message by using a Toast.<\/p>\n
package example.abhiandroid.textinputlayoutexample;\r\n\r\nimport android.graphics.Typeface;\r\nimport android.support.design.widget.TextInputLayout;\r\nimport android.support.v7.app.AppCompatActivity;\r\nimport android.os.Bundle;\r\nimport android.view.View;\r\nimport android.widget.EditText;\r\nimport android.widget.Button;\r\nimport android.widget.Toast;\r\n\r\npublic class MainActivity extends AppCompatActivity {\r\n\r\nTextInputLayout emailTextInputLayout, passwordTextInputLayout;\r\nEditText email, password;\r\nButton signIn;\r\n\r\n@Override\r\nprotected void onCreate(Bundle savedInstanceState) {\r\nsuper.onCreate(savedInstanceState);\r\nsetContentView(R.layout.activity_main);\r\n\/\/ get the reference of View's\r\nemailTextInputLayout = (TextInputLayout) findViewById(R.id.emailTextInputLayout);\r\npasswordTextInputLayout = (TextInputLayout) findViewById(R.id.passwordTextInputLayout);\r\nemail = (EditText) findViewById(R.id.emailEditText);\r\npassword = (EditText) findViewById(R.id.passwordEditText);\r\nsignIn = (Button) findViewById(R.id.signInButton);\r\n\/\/ perform click event on sign In Button\r\nsignIn.setOnClickListener(new View.OnClickListener() {\r\n@Override\r\npublic void onClick(View v) {\r\nif (validate(email, emailTextInputLayout) && validate(password, passwordTextInputLayout)) {\r\n\/\/\u00a0 display a Thank You message\r\nToast.makeText(getApplicationContext(), \"Thank You\", Toast.LENGTH_LONG).show();\r\n\r\n}\r\n}\r\n});\r\n}\r\n\r\n\/\/ validate fields\r\nprivate boolean validate(EditText editText, TextInputLayout textInputLayout) {\r\nif (editText.getText().toString().trim().length() > 0) {\r\nreturn true;\r\n}\r\neditText.requestFocus(); \/\/ set focus on fields\r\ntextInputLayout.setError(\"Please Fill This.!!!\"); \/\/ set error message\r\nreturn false;\r\n}\r\n}\r\n<\/pre>\n
Output:<\/strong><\/p>\n
Now run the app and you will see login form on the screen. Click on email & password and you will see label text is Floating which looks beautiful.<\/p>\n
\"Floating<\/p>\n","protected":false},"excerpt":{"rendered":"
TextInputLayout is a new element introduced in Design Support library to display the floating label in\u00a0EditText. To display floating label in EditText, TextInputLayout needs to wrapped the EditText. We can also display\u00a0the error message to EditText by using\u00a0setError() and setErrorEnabled() methods. It takes the value of hint assigned to EditText and displays it as floating … Continue reading TextInputLayout \/ Floating Labels In EditText\u00a0With Example In Android Studio<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"home.php","meta":{"footnotes":""},"class_list":["post-25","page","type-page","status-publish","hentry"],"psp_head":"TextInputLayout \/ Floating Labels In EditText\u00a0With Example In Android Studio \u2013 Android Material Design Tutorial<\/title>\r\n<meta name=\"description\" content=\"TextInputLayout is a new element introduced in Design Support library to display the floating label in EditText. Learn it with example in Android Studio.\" \/>\r\n<meta name=\"robots\" content=\"index,follow\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/abhiandroid.com\/materialdesign\/textinputlayout-floating-labels-edittext\" \/>\r\n","_links":{"self":[{"href":"https:\/\/abhiandroid.com\/materialdesign\/wp-json\/wp\/v2\/pages\/25","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/abhiandroid.com\/materialdesign\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/abhiandroid.com\/materialdesign\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/abhiandroid.com\/materialdesign\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/abhiandroid.com\/materialdesign\/wp-json\/wp\/v2\/comments?post=25"}],"version-history":[{"count":2,"href":"https:\/\/abhiandroid.com\/materialdesign\/wp-json\/wp\/v2\/pages\/25\/revisions"}],"predecessor-version":[{"id":744,"href":"https:\/\/abhiandroid.com\/materialdesign\/wp-json\/wp\/v2\/pages\/25\/revisions\/744"}],"wp:attachment":[{"href":"https:\/\/abhiandroid.com\/materialdesign\/wp-json\/wp\/v2\/media?parent=25"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}