Develop Reference

TextInputEditText, how can align hint to the top margin

I have some trouble with a TextInputEditText and his hint message if I use the last material library version com.google.android.material:material:1.2.0-alpha02 .. I set 5 lines scrollable textInputEditText and I want to show the hint message align to top margin of that text input. On layout editor appears in the correct position, but when I run the app the position is vertical centered. Why ?
Instead i'm not encounter this problem with com.google.android.material:material:1.1.0-beta02
This is my layout:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
android:id="#+id/sendMailContainer"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/popupTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:text="#string/sendBusinessCard"
android:textColor="#android:color/black"
android:textSize="22sp" />
<TextView
android:id="#+id/subTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/sendBusinessCard"
android:textColor="#android:color/black"
android:textSize="18sp"
android:layout_below="#+id/popupTitle"
android:layout_marginEnd="40dp"
android:layout_marginStart="40dp"
android:layout_marginTop="20dp"/>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/noteMessageContainer"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/subTitle"
android:layout_marginEnd="40dp"
android:layout_marginStart="40dp"
android:layout_marginTop="10dp">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/noteMessage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/emailText"
android:inputType="text|textMultiLine|textCapSentences"
android:textColor="#android:color/black"
android:textColorHint="#color/gray9B"
android:textSize="16sp"
android:isScrollContainer="true"
android:scrollbars="vertical"
android:textIsSelectable="true"
android:minLines="5"
android:maxLines="5"
android:gravity="top"/>
</com.google.android.material.textfield.TextInputLayout>
<Button
android:id="#+id/notePopupLeftButton"
android:layout_width="180dp"
android:layout_height="35dp"
android:layout_alignParentStart="true"
android:layout_below="#+id/noteMessageContainer"
android:layout_marginBottom="20dp"
android:layout_marginStart="20dp"
android:layout_marginTop="40dp"
android:background="#FF515151"
android:text="#string/Cancel"
android:textAllCaps="true"
android:textColor="#android:color/white"
android:textSize="16sp"
android:textStyle="bold" />
<Button
android:id="#+id/notePopupRightButton"
android:layout_width="180dp"
android:layout_height="35dp"
android:layout_alignParentEnd="true"
android:layout_below="#+id/noteMessageContainer"
android:layout_marginBottom="20dp"
android:layout_marginEnd="20dp"
android:layout_marginTop="40dp"
android:background="#FF515151"
android:text="#string/Send"
android:textAllCaps="true"
android:textColor="#android:color/white"
android:textSize="16sp"
android:textStyle="bold" />
</RelativeLayout>
</ScrollView>
And this is two screenshot, one of the layout editor with hint in correct position and other is an app screenshot:
enter code here

You can use
android:gravity="top|start"
property in your EditText of the address block and it shall act as the container's underlying controlling property and take the hint to top left corner.

Add android:gravity="top|start" to the EditText in the layout XML file.

Add this code in your EditText / TextInputEditText:
android:gravity="top|start"

I faced the same problem.
I tried to remove the inputType attribute
and the height of edit text becomes now dependent on the lines attribute.
Then my problem is solved

ImageButon inside text input edit text without losing floating labels

I have some edit text with floating labels like the first one in the image
<android.support.design.widget.TextInputLayout
android:id="#+id/tlIdMode"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/signup_edittext_margin_top"
android:hint="#string/signup_id_mode">
<com.vipera.onepay.ui.component.custom.CustomTextInputEditText
android:id="#+id/etIdMode"
android:layout_width="match_parent"
android:layout_height="#dimen/edit_text_height"
android:inputType="text"
android:text="#string/signup_nif"
android:textColor="#color/dark_gray"
android:textSize="#dimen/edit_text_size" />
</android.support.design.widget.TextInputLayout>
and I want to have an ImageButton on the right side of the edit text like the second one but I am losing the hint and the floating label...
<android.support.design.widget.TextInputLayout
android:id="#+id/tlIdNumber"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/signup_edittext_margin_top"
android:hint="#string/signup_id_number">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<com.vipera.onepay.ui.component.custom.CustomTextInputEditText
android:id="#+id/etIdNumber"
android:layout_width="match_parent"
android:layout_height="#dimen/edit_text_height"
android:inputType="text"
android:textColor="#color/dark_gray"
android:textSize="#dimen/edit_text_size" />
<ImageButton
android:id="#+id/imgClearUser"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/etIdNumber"
android:layout_alignRight="#+id/etIdNumber"
android:layout_alignTop="#+id/etIdNumber"
android:background="#android:color/transparent"
android:padding="5dp"
android:src="#drawable/ic_clear_28dp" />
</RelativeLayout>
</android.support.design.widget.TextInputLayout>
I want to have both, imageButton and floating label. Thanks for any help!!

Use FrameLayout and keep these views separately to the child of the layout. Like
<FrameLayout
android:layout_marginTop="#dimen/dp20"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TextInputLayout
android:id="#+id/tlIdNumber"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="signup_id_number">
<EditText
android:id="#+id/etIdNumber"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingRight="40dp"
android:inputType="text"
android:textColor="#FF00FF"
android:textSize="16sp" />
</android.support.design.widget.TextInputLayout>
<ImageButton
android:id="#+id/imgClearUser"
android:layout_gravity="right|center_vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/etIdNumber"
android:layout_alignRight="#+id/etIdNumber"
android:layout_alignTop="#+id/etIdNumber"
android:background="#android:color/transparent"
android:padding="5dp"
android:src="#android:drawable/ic_menu_close_clear_cancel" />
</FrameLayout>
This will work. Here padding with EditText android:paddingRight="40dp" will handle the case where, while typing text will not go under close button. You can increase or decrease this value as per your UI requirement.
With proper alignment and view's attributes as per your question, answer would be
<FrameLayout
android:layout_marginTop="#dimen/signup_edittext_margin_top"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TextInputLayout
android:id="#+id/tlIdNumber"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/signup_id_number">
<com.vipera.onepay.ui.component.custom.CustomTextInputEditText
android:id="#+id/etIdNumber"
android:layout_width="match_parent"
android:layout_height="#dimen/edit_text_height"
android:inputType="text"
android:paddingRight="40dp"
android:textColor="#color/dark_gray"
android:textSize="#dimen/edit_text_size" />
</android.support.design.widget.TextInputLayout>
<ImageButton
android:id="#+id/imgClearUser"
android:layout_gravity="right|center_vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/etIdNumber"
android:layout_alignRight="#+id/etIdNumber"
android:layout_alignTop="#+id/etIdNumber"
android:background="#android:color/transparent"
android:padding="5dp"
android:src="#drawable/ic_clear_28dp" />
</FrameLayout>

EditText height changes according to the text size

If I change the textsize in editext, the height of edittext changes accordingly. I want the size of edittext to be same and I want a smaller sized hint or text to be in it. What should I do? Following is the code and I am also posting the screenshot of this layout :
<RelativeLayout
android:id="#+id/normal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#4594e4"
android:orientation="horizontal">
<ImageView
android:id="#+id/set"
android:layout_width="wrap_content"
android:layout_height="75dp"
android:layout_marginTop="05dp"
android:padding="5dp"
android:src="#drawable/bari" />
<EditText
android:id="#+id/etOrigin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="#dimen/_35sdp"
android:layout_marginTop="#dimen/_10sdp"
android:layout_toEndOf="#+id/set"
android:layout_toRightOf="#+id/set"
android:background="#5fa7f1"
android:inputType="textPersonName"
android:text="My Location"
android:textColor="#434343"
android:textIsSelectable="true" />
<EditText
android:id="#+id/etDestination"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/etOrigin"
android:layout_marginRight="#dimen/_35sdp"
android:layout_marginTop="#dimen/_5sdp"
android:layout_toEndOf="#+id/set"
android:layout_toRightOf="#+id/set"
android:background="#5fa7f1"
android:inputType="textPersonName"
android:onClick="wow"
android:text="Where to go ?"
android:textColor="#fff"
android:textColorHint="#fff" />
<ImageView
android:id="#+id/swipe"
android:layout_width="30dp"
android:layout_height="27dp"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:layout_marginRight="#dimen/_5sdp"
android:background="#drawable/flip" />
</RelativeLayout>
Screenshot of the layout before changing:
Screenshot of layout after changing textsize:

Try using android:minHeight and android:maxHeight attributes :
<EditText
android:id="#+id/etUserName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/hint_username"
android:imeOptions="actionNext"
android:inputType="textPersonName"
android:maxLines="1"
android:gravity="center_vertical"
android:minHeight="?actionBarSize"
android:maxHeight="?actionBarSize"
android:textColor="#color/textPrimary"
android:textSize="12sp"/>
<EditText
android:id="#+id/etUserEmail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/hint_username"
android:imeOptions="actionNext"
android:inputType="textEmailAddress"
android:maxLines="1"
android:gravity="center_vertical"
android:minHeight="?actionBarSize"
android:maxHeight="?actionBarSize"
android:textColor="#color/textPrimary"
android:textSize="14sp"/>

Use padding for this :-
<EditText
android:id="#+id/etOrigin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="12dp"
android:layout_marginRight="#dimen/_35sdp"
android:layout_marginTop="#dimen/_10sdp"
android:layout_toEndOf="#+id/set"
android:layout_toRightOf="#+id/set"
android:background="#5fa7f1"
android:inputType="textPersonName"
android:text="My Location"
android:textColor="#434343"
android:textIsSelectable="true" />

Give fix height to the layout android:layout_height="75dp"
<EditText
android:id="#+id/etOrigin"
android:layout_width="match_parent"
android:layout_height="75dp"
android:layout_marginRight="#dimen/_35sdp"
android:layout_marginTop="#dimen/_10sdp"
android:layout_toEndOf="#+id/set"
android:layout_toRightOf="#+id/set"
android:background="#5fa7f1"
android:inputType="textPersonName"
android:text="My Location"
android:textColor="#434343"
android:textIsSelectable="true"/>

Here, try this third party library.
Your TextView height would be fixed but your textView size will be adjusted
dependencies {
compile 'me.grantland:autofittextview:0.2.+'
}
Enable any View extending TextView in code:
AutofitHelper.create(textView);
Enable any View extending TextView in XML:
<me.grantland.widget.AutofitLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:singleLine="true"
/>
</me.grantland.widget.AutofitLayout>
Use the built in Widget in code or XML:
<RootElement
xmlns:autofit="http://schemas.android.com/apk/res-auto"
...
<me.grantland.widget.AutofitTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:singleLine="true"
android:maxLines="2"
android:textSize="40sp"
autofit:minTextSize="16sp"
/>
For more information, visit below link:
https://github.com/grantland/android-autofittextview

You can explicitly set the height and size of your EditText view as well as the text in it.
To set the heigh of the EditText simply use :
android:layout_height="<height_you_want>dp"
And to set height of the text in your EditText view :
android:textSize="<height_you_want>sp"
And you can simultaneously view the changes in the preview tab of AndroidStudio.

One Solution : include these two lines in your XML file
android:maxLines="1"
android:singleLine="true"

Using the EditText inside of a ConstraintLayout will fix this.
...
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="17">
<androidx.appcompat.widget.AppCompatEditText
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHeight_percent="1"
android:textSize="24sp"
android:text="foo"
/>
</androidx.constraintlayout.widget.ConstraintLayout>

Create Multi Line Edit Text and Scrolling the activity View

**I'm trying to create multi line edit text and typing on it , but when the pointer is down and down on screen .. I can't see my written text .. it's going behind the keyboard .. **
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_details"
android:layout_width="326dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/textView2"
android:layout_marginTop="18dp"
android:textColorHint="#6c6c6c"
app:hintTextAppearance="#style/HintXlarge"
android:layout_weight="0.97">
<EditText
android:id="#+id/input_details"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:hint="#string/hint_Details"
android:inputType="textMultiLine"
android:selectAllOnFocus="false"
android:textColor="#android:color/background_light"
android:textColorHint="#6c6c6c"
android:textIsSelectable="false"
android:textSize="30sp"
android:theme="#style/Widget.App.EditText"/>
</android.support.design.widget.TextInputLayout>

Put the whole body inside ScrollView.
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scrollFView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
android:scrollbars="vertical">
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_details"
android:layout_width="326dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/textView2"
android:layout_marginTop="18dp"
android:textColorHint="#6c6c6c"
app:hintTextAppearance="#style/HintXlarge"
android:layout_weight="0.97">
<EditText
android:id="#+id/input_details"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:hint="#string/hint_Details"
android:inputType="textMultiLine"
android:selectAllOnFocus="false"
android:textColor="#android:color/background_light"
android:textColorHint="#6c6c6c"
android:textIsSelectable="false"
android:textSize="30sp"
android:theme="#style/Widget.App.EditText" />
</android.support.design.widget.TextInputLayout>
</ScrollView>

set the value of the scrollbars = vertical in the edit text body.
android:scrollbars="vertical"

Designing password text with show password button

I am trying to design EditText for password with show password imageView. However I cannot design it correctly beacuse I cannot see ImageView, since EditText's layout_width="fill_parent". When I change it to wrap_content, I can see my ImageView but then it looks very bad in UI. Is it possible to design it without giving fixed size?
Here is my code;
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:orientation="horizontal"
android:layout_marginBottom="8dp">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<EditText
android:id="#+id/registerPassword"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="#string/register_password"
android:inputType="textPassword" />
<ImageView
android:id="#+id/fragment_login_password_visibility"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#android:drawable/ic_partial_secure"
android:layout_gravity="center"
android:clickable="true"/>
</LinearLayout>
</android.support.design.widget.TextInputLayout>
EDIT:
android:layout_weight=1 solved issue. Now I can see ImageView left of EditText. However now, I TextInputLayout hint is not working.

You don't need use ImageView.
Support Library adds support for the password visibility toggle in recent update (revision 24.2.0 - August 2016).
try it:
setPasswordVisibilityToggleDrawable(int resId)
Set the icon to use for the password visibility toggle button.
https://developer.android.com/reference/android/support/design/widget/TextInputLayout.html

First set android:weightSum of LinearLayout to "1". Then, set android:layout_width and android:layout_weight of EditText to "0dp" and "1", respectively.

Did you try to use weight?
android:layout_weight="1"
and
android:layout_width="0dp" or android:layout_width="wrap_content"
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:orientation="horizontal"
android:layout_marginBottom="8dp">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<EditText
android:id="#+id/registerPassword"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="#string/register_password"
android:inputType="textPassword" />
<ImageView
android:id="#+id/fragment_login_password_visibility"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#android:drawable/ic_partial_secure"
android:layout_gravity="center"
android:clickable="true"/>
</LinearLayout>
</android.support.design.widget.TextInputLayout>

Try this :
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<EditText
android:id="#+id/editText"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="Password"
android:singleLine="true"
android:textSize="25sp"
android:paddingRight="60dp"
/>
<ImageButton
android:id="#+id/showpass"
android:layout_marginLeft="-60dp"
style="?android:buttonBarButtonStyle"
android:paddingBottom="5dp"
android:src="#drawable/pass_ic"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>

I recommend using a TextInputLayout with passwordToggleDrawable .
<android.support.design.widget.TextInputLayout
android:id="#+id/textInputPasswordLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:passwordToggleContentDescription="Show"
app:passwordToggleDrawable="#drawable/ic_password_visibility_selector"
app:passwordToggleEnabled="true">
<android.support.design.widget.TextInputEditText
android:id="#+id/textInputEditTextPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:fontFamily="sans-serif-light"
android:gravity="bottom"
android:hint="#string/enter_your_password"/>
</android.support.design.widget.TextInputLayout>
app:passwordToggleDrawable="#drawable/ic_password_visibility_selector" assign your drawable