Android design support library: text inputlayout floating label
-
Upload
francesco-azzola -
Category
Mobile
-
view
111 -
download
0
Transcript of Android design support library: text inputlayout floating label
Surviving w/ Android - Step by Step guide aboutAndroid and Internet of things
Develop Android App And Internet Of Things Projects With Step By Step Tutorial, Tips And In-DepthCode Description.
Topics covered
Android material design
Android design support
library
TextInputLayout with
EditText
Android Design Support Library: TextInputLayout -Floating LabelBy Francesco Azzola , November 16, 2015 0 Comments
Android design support library introduces a new component called
TextInputLayout to handle EditText and form.
Android design support library introduced someimportant new widget that help developer to createconsistent UI following material design guidelines.One of the new component shipped by Android designsupport library is TextInputLayout that is used toanimate EditText labels. To do the job, TextInputLayoutuses an EditText attribute, called hint .To show how touse TextInputLayout and EditText, we will create anandroid app like the one shown below:
!
"
Home About me Contact me Advertise
Using TextInputLayout, and wrapping EditText inside TextInputLayout, it is possible tocontrol this hint so that it disappears as soon as the user starts writing the text and "moves" tothe label position:
Another important feature is the error handling. With TextInputLayout it is possible toshow error messages near to the EditText.
How To Use TextInputLayout And EditText
As said before, TextInputLayout wraps the EditText so that it controls the EditTextbehaviour. Let us suppose we have three different EditText and three TextInputLayout.Focusing the attention to the first one of this EditText, this one has to be wrapped byTextInputLayout so that we can have the floating label.
123456789
1011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width android:layout_height="match_parent" android:paddingLeft= android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" app:layout_behavior="@string/appbar_scrolling_view_behavior" tools:showIn="@layout/activity_main" tools:context=".MainActivity" <android.support.design.widget.TextInputLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/til1" <EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/edtName" android:ems="10" android:hint="@string/hintName"/> </android.support.design.widget.TextInputLayout> <android.support.design.widget.TextInputLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/til2" android:layout_below="@id/til1" android:layout_marginTop="20dp"> <EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/edtSurname" android:ems="10" android:hint="@string/hintSurname"/> </android.support.design.widget.TextInputLayout> <android.support.design.widget.TextInputLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/til3" android:layout_below="@id/til2" android:layout_marginTop="20dp"> <EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/edtPhone" android:ems="10" android:hint="@string/hintPhone" android:inputType="phone"/> </android.support.design.widget.TextInputLayout> <Button android:layout_width="120dp" android:layout_height="wrap_content" android:id="@+id/btn" android:text="@string/btnConfirm" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:elevation="2dp" />
?
android:hint is the floating label that is managed the TextInputLayout. With this layoutand a simple activity, it is possible to obtain the app shown above.
Android Form ValidationAnother interesting use of the TextInputLayout is in the form validation. As told before,this component handles error messages so that they appear near the EditText.This feature is very useful when the app have to validate some data inserted by user. To showhow to use TextInputLayout to handle EditText error we can suppose to have a simple formwith a submit button as shown in the picture below.
When user pushes the button the app validate the result and if something goes wrong, the appshows the error message near the EditText that caused it.
To handle the errors, TextInputLayout provides two methods: setError that accepts astring that contains the message and setErrorEnabled that accepts a boolean to enableor disable the error functionality. The first method is used to show an erorr message, thesecond to remove the message.The Activity that handles the UI contains validation method, like the one shown below:
66 </RelativeLayout>
1234
edtName = (EditText) findViewById(R.id.edtName);edtSurname = (EditText) findViewById(R.id.edtSurname);edtPhone = (EditText) findViewById(R.id.edtPhone);nameLayout = (TextInputLayout) findViewById(R.id.til1);
?
In the validate method:
In this post, you have learnt how to create an Android app interface using material design andAndroid design support library: you saw how TextInputLayout animates EditText and handleserror using the combination of TextInputLayout and EditText.
Android app source code @github
56789
10111213141516
surnameLayout = (TextInputLayout) findViewById(R.id.til2);phoneLayout = (TextInputLayout) findViewById(R.id.til3); Button btn = (Button) findViewById(R.id.btn);btn.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { if ( validateData() ) { // } }});
123456789
101112131415161718192021222324252627282930313233343536
private boolean validateData() { boolean result = true; String name = edtName.getText().toString(); if (name == null || name.length() < 3) { // We set the error message nameLayout.setError(getString(R.string.invalidName)); result = false; } else // We remove error messages nameLayout.setErrorEnabled(false); String surname = edtSurname.getText().toString(); if (surname == null || surname.length() < 3) { // We set the error message surnameLayout.setError(getString(R.string.invalidSurname)); result = false; } else // We remove error messages surnameLayout.setErrorEnabled(false); String phone = edtPhone.getText().toString(); if (phone == null || phone.equals("")) { phoneLayout.setError(getString(R.string.invalidNumber)); result = false; } else if (phone.equals("0")) { phoneLayout.setError(getString(R.string.invalidNumberZero)); result = false; } return result; }
545
4
9
62
Google +
0
4
DZone
2
?
Thank you for printing our content.
221
1
Copyright © 2015 Surviving with android | All Rights Reserved. Design ByTemplateclueTemplateclue