Friday 29 July 2016

Android Material Design:- Floating Labels Hint Text in EditText

Initially it acts as hint in EditText when the field is empty. When user start inputting the text, it starts animating by moving to floating label position.

Requirement:-Android Studio:-2.1.2
Note:- Right Click on app > Open Module Settings >Dependencies > click on "+" and add following
com.android.support:design:24.0.0


Step1:- Open your Android Studio.
Step2:-Click on File >New >New Project > EditTextFlotingHint
Step3:-Click on res>activity_main.xml and take 3 EditText 1 Button

Design will be like following....


Step4; open your activity_main.xml file and write following code....

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:layout_margin="16dp"
    android:gravity="center_vertical">
<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Email"
        android:singleLine="true" />


</android.support.design.widget.TextInputLayout>
    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Phone"
            android:inputType="number"
            android:singleLine="true" />
    </android.support.design.widget.TextInputLayout>

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Password"
        android:singleLine="true"
        android:inputType="textPassword"/>
</android.support.design.widget.TextInputLayout>
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="SignUp"/>
</LinearLayout>





Output :-

No comments:

Post a Comment