floating labels for mandatory fields in login page

Question

I am creating login page with Mandatory fields like first name and mobile number,for that i also designed floating labels using XMl but floating labels are not applied for mandatory fields but applied to normal field where i put hint.Below is the code i used for floating labels.Can anyone help me to solve this

<android.support.design.widget.TextInputLayout
                android:id="@+id/input_layout_password"
                android:layout_width="match_parent"
                android:layout_below="@+id/input_layout_email"
                android:layout_height="wrap_content">

                <EditText
                    android:id="@+id/mobilenumber"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:inputType="textPassword"
                    android:textSize="15dp"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />
            </android.support.design.widget.TextInputLayout>

score 0 · Answer 1 · answered Oct 17 '17 at 04:30

You can refer this example :

The first, you have to add the code in gradle:

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:23.0.1'
    compile 'com.android.support:design:23.0.1'
}

and the layout

    <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
    </android.support.design.widget.AppBarLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="?attr/actionBarSize"
        android:orientation="vertical"
        android:paddingLeft="20dp"
        android:paddingRight="20dp"
        android:paddingTop="60dp">

        <android.support.design.widget.TextInputLayout
            android:id="@+id/input_layout_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <EditText
                android:id="@+id/input_name"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:singleLine="true"
                android:hint="@string/hint_name" />
        </android.support.design.widget.TextInputLayout>

        <android.support.design.widget.TextInputLayout
            android:id="@+id/input_layout_email"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <EditText
                android:id="@+id/input_email"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="textEmailAddress"
                android:hint="@string/hint_email" />
        </android.support.design.widget.TextInputLayout>

        <android.support.design.widget.TextInputLayout
            android:id="@+id/input_layout_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <EditText
                android:id="@+id/input_password"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="textPassword"
                android:hint="@string/hint_password" />
        </android.support.design.widget.TextInputLayout>

        <Button android:id="@+id/btn_signup"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="@string/btn_sign_up"
            android:background="@color/colorPrimary"
            android:layout_marginTop="40dp"
            android:textColor="@android:color/white"/>

    </LinearLayout>

</android.support.design.widget.CoordinatorLayout>

I hope it can help your problem!

You can refer more in : https://www.androidhive.info/2015/09/android-material-design-floating-labels-for-edittext/

score 0 · Answer 2 · answered Oct 17 '17 at 04:35

0

In your build.gradle add latest appcompat and design libraries.

dependencies 
{
compile 'com.android.support:appcompat-v7:X.X.X' // where X.X.X version
compile 'com.android.support:design:X.X.X' // where X.X.X version
}

Declare your EditText and wrap it with 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="@string/Title" />

</android.support.design.widget.TextInputLayout>

Note:

Both widgets TextInputLayout and EditText have android:hint attribute, you can use any of them. If your app supports landscape mode, replace EditText with TextInputEditText in order for the hint to display correctly.

answered Oct 17 '17 at 04:35

Zayid Mohammed

2,275
2
10
17

I use the same but in the edit text i want mandatory mark i.e red start but is that possible with hint. – Lakshmi Priya Vikram Oct 17 '17 at 04:50
i dont think so, what u can do is setError() if the edittext is empty – Zayid Mohammed Oct 17 '17 at 05:01
if u want to show a fixed red * , then the workaround is to wrap the TextInputLayout and TextView using FrameLayout. Align the TextView to bottom left and add leftPadding to EditText so that the text typed will come after the * – Zayid Mohammed Oct 17 '17 at 05:09

score 0 · Answer 3 · answered Oct 17 '17 at 05:09

use Set Error in the required field using java. set Error when Field is Empty

Custom setError is also possible EditText setError() with icon but without Popup message

or

Try this Make editext field to be required

Input field Validation

editText field is required before moving on to another Activity

floating labels for mandatory fields in login page

3 Answers3