/ Android

MaterialEditText Example without library

MaterialDesign, it is a quite popular design laguage google has defined. And most developers trying to make use of new awesome widgets for their app without strain.

In this blog, we are going to see how to implement MaterialEdittext without using any thrid party library. Most of developers are using MaterailEdittext library. Now it is time get rid of it third party libraries. Google has released android support design library which is compatible from Jellybean with CustomLayouts like TextInputLayout, CollapsableToolbar, FloatingButton etc,.

TextInputLayout

How to implement

  1. In your project add the dependency compile 'com.android.support:design:22.2.1' in build.gradle. Now you are ready to go.

  2. Add TextInputLayout in your layout. Add Edittext inside TextInputLayout.

  3. Set hint for your EditText. In this example, I used "Enter Name".


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" android:paddingLeft="@dimen/abc_action_button_min_width_overflow_material"  android:paddingRight="@dimen/abc_action_button_min_width_overflow_material" android:paddingTop="@dimen/abc_action_button_min_width_overflow_material"
android:orientation="vertical" android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">
    
    <android.support.design.widget.TextInputLayout
        android:id="@+id/textLayout"
        android:text="@string/hello_world"
        android:layout_width="match_parent"
      android:layout_height="wrap_content"
 android:layout_marginTop="@dimen/abc_action_button_min_width_overflow_material">
        <EditText
            android:id="@+id/textEdit"
            android:layout_width="match_parent"
            android:hint="Enter Name"
            android:layout_height="wrap_content" />
 </android.support.design.widget.TextInputLayout>

        <EditText
            android:id="@+id/textEditCompany"
            android:layout_width="match_parent"
            android:hint="Enter Company"
            android:layout_height="wrap_content"        android:layout_marginTop="@dimen/abc_action_button_min_width_overflow_material"/>


    <Button
        android:id="@+id/validateButton" android:layout_marginTop="@dimen/abc_action_button_min_width_overflow_material"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@color/primary_text_color"
        android:text="Validate"/>

</LinearLayout>

As you can see difference in xml, Enter Name EditText wrapped with TextInputLayout to have floating label effect. Other Enter Company EditText is normal one.

source code

In your on create method, make use of TextInputLayout


@Override
protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        final TextInputLayout tLayout = (TextInputLayout) findViewById(R.id.textLayout);
        final EditText editText  = (EditText) findViewById(R.id.textEdit);
        
        Button validateButton = (Button) findViewById(R.id.validateButton);
        validateButton.setOnClickListener(new 	 
        View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String emailStr = 
                editText.getText().toString();
                if(TextUtils.isEmpty(emailStr)){
                    tLayout.setError("Enter valid 
                    email");
                }

            }
        });
    }

Demo

Check the demo screen

Thanks. Happy coding :-)

MaterialEditText Example without library
Share this