Android Design Library Part 1. Design with EditText

Part 1. Design with EditText

Hello Friends, As you know the material design concept changing the traditional apps into new fancy apps. We here are going experience the very latest design library which announced in Google I/O 2015, which will help your apps to get that Lollypop's design features to lower versions also.

Let's Start

Create a new project in Android Studio. Go with default configurations to create project. Edit your build.gradle and  just add following dependency to your existing dependencies. 

 compile 'com.android.support:design:22.2.0'

Edit Layout file

In activity_main.xml file,

If Relative Layout is parent layout then add  following code in it.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<RelativeLayout> <android.support.design.widget.TextInputLayout android:id="@+id/editTextUsername" android:layout_width="match_parent" android:layout_height="wrap_content"> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Username " android:textSize="22sp" /> </android.support.design.widget.TextInputLayout> <android.support.design.widget.TextInputLayout android:id="@+id/editTextPassword" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@+id/editTextUsername"> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Password" android:inputType="textPassword" android:textSize="22sp" /> </android.support.design.widget.TextInputLayout> </RelativeLayout>

Edit Activity
In MainActivity, get the instances of TextInputLayout for both usrname and password by,

1 2	final TextInputLayout editTextUsername= (TextInputLayout)findViewById(R.id.editTextUsername); final TextInputLayout editTextPassword= (TextInputLayout)findViewById(R.id.editTextPassword);

TextInputLayout
Layout which wraps an EditText (or descendant) to show a floating label when the hint is hidden due to the user inputting text.
Useful to show  errors via setErrorEnabled(boolean) and setError(CharSequence).
We can also give hint to EditText using setHint(CharSequence hint).
Applying setError() method on EditText,

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

//Getting EditText From TextInputLayout EditText tempEditTextPassword = editTextPassword.getEditText(); tempEditTextPassword.addTextChangedListener(new TextWatcher() { @Override public void beforeTextChanged(CharSequence s, int start, int count, int after) {} @Override public void onTextChanged(CharSequence s, int start, int before, int count) { if (s.length() <= 6) { editTextPassword.setError("Password must contain at least 6 chars."); } else   editTextPassword.setError(null); } @Override public void afterTextChanged(Editable s) {} });

Note: For  implementation you also need to include appcompat dependency.
Eclipse users needs to import the design library project and add lib project to their build path.Thank you.