Develop Reference

How do I align drawable left horizontally in a perfect line with hint and stick them both closer to the bottom in a TextInputEditText?

I need to set drawableLeft aligned horizontally with the hint and moved them both closer to the bottom of the TextInputEditText. I have tried a lot of attributes but to no avail! Could I be missing something here?
Drawable seems to be where I want it but I need the hint to come below to align with drawable.
<?xml version="1.0" encoding="UTF-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="16dp">
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/tv_login_dialog_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello!"
android:textAlignment="center"
android:textColor="#color/teal_700"
android:textSize="32sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/til_email_user_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
app:boxBackgroundColor="#android:color/transparent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_login_dialog_title">
>
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/ti_et_email_user_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/ic_baseline_email_24"
android:gravity="bottom"
android:hint="#string/field_hint_email"
android:inputType="textEmailAddress" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/til_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
app:boxBackgroundColor="#android:color/transparent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/til_email_user_id">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/ti_et_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/ic_baseline_lock_24"
android:gravity="bottom"
android:hint="#string/field_hint_password" />
</com.google.android.material.textfield.TextInputLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Just Remove
android:drawableLeft="Drawable"
from TextInputEditText and add
app:startIconDrawable="Drawable"
into the TextInputLayout
or you can replace your TextInputLayout from below code
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/til_email_user_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/share_card"
android:background="#android:color/transparent"
app:boxBackgroundColor="#android:color/transparent"
app:startIconDrawable="#drawable/icn_sort_by"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_login_dialog_title">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/ti_et_email_user_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textEmailAddress" />
</com.google.android.material.textfield.TextInputLayout>

Make your drawable height and weight 24dp. Then add these to your TextInputEditText. This is not an official answer btw. I do it like this every time.
android:paddingVertical="10dp"
android:drawablePadding="10dp"
android:gravity="center_vertical"

Add hint text at the below of the input field

At the moment, I have the simplest one-page application with one data entry field. I looked at a lot of examples, but I could not find the answer to my question: how do I add hint text at the bottom of the input field?
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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="match_parent"
tools:context=".MainActivity">
<EditText
android:id="#+id/editTextUserId"
android:layout_width="347dp"
android:layout_height="60dp"
android:layout_marginBottom="20dp"
android:ems="10"
android:hint="User"
android:inputType="textPersonName"
android:text="#string/user_id"
android:textSize="16sp"
app:layout_constraintBottom_toTopOf="#+id/imageButton"
app:layout_constraintEnd_toEndOf="#+id/editTextDeviveId"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/editTextSessionId"
app:layout_constraintTop_toBottomOf="#+id/editTextDeviveId"
/>
</androidx.constraintlayout.widget.ConstraintLayout>

<com.google.android.material.textfield.TextInputLayout
android:id="#+id/til_customer_no"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="3dp"
app:helperTextEnabled="true"
app:helperText="User">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/editTextUserId"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Customer No"
android:inputType="text" />
</com.google.android.material.textfield.TextInputLayout>

Add a Textview and Constrain it below your Edittext
<androidx.constraintlayout.widget.ConstraintLayout 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="match_parent"
tools:context=".MainActivity">
<EditText
android:id="#+id/editTextUserId"
android:layout_width="347dp"
android:layout_height="60dp"
android:layout_marginBottom="20dp"
android:ems="10"
android:hint="User"
android:inputType="textPersonName"
android:text="#string/user_id"
android:textSize="16sp"
app:layout_constraintBottom_toTopOf="#+id/imageButton"
app:layout_constraintEnd_toEndOf="#+id/editTextDeviveId"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/editTextSessionId"
app:layout_constraintTop_toBottomOf="#+id/editTextDeviveId"
/>
<TextView
android:id="#+id/hint"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:text="user"
android:textColor="#android:color/holo_red_dark"
android:textSize="14sp"
app:layout_constraintStart_toStartOf="#+id/editTextUserId"
app:layout_constraintTop_toBottomOf="#+id/editTextUserId" />
</androidx.constraintlayout.widget.ConstraintLayout>
Then if you want to show/hide it base on user interaction you can do something
like this in your activity
editTextUserId.setOnFocusChangeListener((view, b) -> {
if(b){hint.setVisibility(View.VISIBLE);}
else {hint.setVisibility(View.INVISIBLE);}
});

TextInputLayout is overwriting TextInputEditText

This is the xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="match_parent"
android:orientation="vertical">
<Spinner
android:id="#+id/spinnerFreq"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/textInputLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/start_freq_text"
android:textColorHint="#android:color/black">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/editTextStartFreq"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/start_freq_edit_text"
android:textColor="#android:color/black" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/textInputLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/end_freq_text"
android:textColorHint="#android:color/black">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/editTextEndFreq"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/end_freq_edit_text"
android:textColor="#android:color/black" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/textInputLayout3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/length_seconds_text"
android:textColorHint="#android:color/black">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/editTextLength"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/length_seconds_edit_text"
android:textColor="#android:color/black" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/textInputLayout4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/min_freq_text"
android:textColorHint="#android:color/black">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/editTextMinFreq"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/min_freq_edit_text"
android:textColor="#android:color/black" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/textInputLayout5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/max_freq_text"
android:textColorHint="#android:color/black">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/editTextMaxFreq"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/max_freq_edit_text"
android:textColor="#android:color/black" />
</com.google.android.material.textfield.TextInputLayout>
</LinearLayout>
I tried using a ConstraintLayout before the LinearLayout and the top TextInputLayout was rendered correctly. The ones below it are exactly the same, so I am not sure why they aren't working.
It's an issue with the TextInputLayout hint not moving up until the TextInputLayout gets tapped. Is there a way to get it to stay up top?
Is there a attribute I need to set or a certain way I need to lay them out? The documentation on the Material io page doesn't have a layout example on the text field page. https://material.io/develop/android/components/text-fields

Remove the hint from TextInputEditText and use the app:placeholderText in the TextInputLayout:
<com.google.android.material.textfield.TextInputLayout
android:hint="Label"
app:placeholderText="Placeholder Text"
Note: it requires at least the version 1.2.0-alpha03.

adding two end icons to TextInputLayout in android

i'm trying to achieve something like this
I wanna create TextinputLayout with two end icons , but it doesn't work , the clear end icon show above the search icon ,here is my code :
<FrameLayout
app:layout_constraintTop_toTopOf="parent"
android:id="#+id/searchLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/margin_32dp"
android:gravity="center"
android:hint="#string/search_for_your_product"
app:boxBackgroundMode="none"
app:endIconMode="clear_text"
app:layout_constraintStart_toEndOf="#id/backIcon"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/search"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/sh_border_rounded"
android:inputType="text"
android:maxLength="10"
android:maxLines="1"
android:singleLine="true" />
</com.google.android.material.textfield.TextInputLayout>
<ImageView
android:layout_gravity="end|center_horizontal"
android:src="#drawable/ll_search"
android:layout_width="wrap_content"
android:paddingStart="#dimen/normal_margin"
android:paddingTop="#dimen/normal_margin"
android:paddingEnd="#dimen/normal_margin"
android:layout_height="match_parent"/>
</FrameLayout>

i Used a constraint layout as parent with the background ,
and set the icons at the end of the TextInput .
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/searchLayout"
android:layout_width="match_parent"
android:layout_marginStart="#dimen/margin_32dp"
android:background="#drawable/sh_border_rounded"
android:layout_height="wrap_content"
app:layout_constraintStart_toEndOf="#id/backIcon"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/search"
android:padding="#dimen/margin_8"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginEnd="#dimen/margin_64dp"
android:inputType="text"
android:maxLength="10"
android:background="#null"
android:maxLines="1"
android:singleLine="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/delete"
android:src="#drawable/ic_cancel"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_width="wrap_content"
android:paddingEnd="#dimen/margin_8"
android:layout_height="match_parent"
app:layout_constraintStart_toEndOf="#+id/search" />
<ImageView
android:src="#drawable/ic_search"
android:layout_width="wrap_content"
android:layout_height="match_parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#+id/delete" />
</androidx.constraintlayout.widget.ConstraintLayout>

TextInputLayout setCounterEnables doesn't work - Android

I have a layout with a TextInputLayouts elements and I want to enable counter of characters. The problem is it's not working and I can't see the counter when I run the app.
Here is my layout:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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="match_parent"
android:background="#color/colorBackground"
android:paddingLeft="#dimen/create_step_padding"
android:paddingRight="#dimen/create_step_padding"
android:paddingTop="#dimen/create_step_padding">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Shipper Text Area-->
<android.support.design.widget.TextInputLayout
android:id="#+id/shipper_layout"
android:layout_width="0dp"
android:layout_height="110dp"
android:background="#drawable/text_area_background"
android:paddingEnd="#dimen/text_input_layout_side_padding"
android:paddingStart="#dimen/text_input_layout_side_padding"
android:paddingTop="#dimen/text_input_layout_top_padding"
app:counterEnabled="true"
app:hintTextAppearance="#style/HintTextStyle"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.design.widget.TextInputEditText
android:id="#+id/shipper_field"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#null"
android:gravity="top|start"
android:hint="#string/shipper_field"
android:inputType="textMultiLine"
android:lines="5"
android:overScrollMode="always"
android:scrollbarStyle="insideInset"
android:scrollbars="vertical" />
</android.support.design.widget.TextInputLayout>
<!-- Consignee Text Area-->
<android.support.design.widget.TextInputLayout
android:id="#+id/consignee_layout"
android:layout_width="0dp"
android:layout_height="110dp"
android:layout_marginTop="16dp"
android:background="#drawable/text_area_background"
android:paddingLeft="#dimen/text_input_layout_side_padding"
android:paddingTop="#dimen/text_input_layout_top_padding"
app:counterEnabled="true"
app:hintTextAppearance="#style/HintTextStyle"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/shipper_layout">
<android.support.design.widget.TextInputEditText
android:id="#+id/consignee_field"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#null"
android:gravity="top|start"
android:hint="#string/consignee_field"
android:inputType="textMultiLine"
android:lines="5"
android:overScrollMode="always"
android:scrollbarStyle="insideInset"
android:scrollbars="vertical" />
</android.support.design.widget.TextInputLayout>
<!-- Airport of Departure -->
<!-- Airport of Destination -->
<com.silverfix.dgdeditor.utils.views.AirportAutoCompleteEditText
android:id="#+id/aodep_field"
android:layout_width="217dp"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:ems="10"
android:inputType="textPersonName"
android:text="Name"
app:layout_constraintBottom_toBottomOf="#+id/textView11"
app:layout_constraintHorizontal_bias="0.512"
app:layout_constraintLeft_toRightOf="#+id/textView11"
app:layout_constraintRight_toRightOf="parent" />
<com.silverfix.dgdeditor.utils.views.AirportAutoCompleteEditText
android:id="#+id/aodes_field"
android:layout_width="217dp"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="textPersonName"
android:text="Name"
app:layout_constraintBottom_toBottomOf="#+id/textView12"
app:layout_constraintLeft_toLeftOf="#+id/aodep_field" />
<TextView
android:id="#+id/textView11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:text="#string/aodep_field"
android:textAppearance="#style/DefaultTextStyle"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#+id/consignee_layout" />
<TextView
android:id="#+id/textView12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:text="#string/aodes_field"
android:textAppearance="#style/DefaultTextStyle"
app:layout_constraintLeft_toLeftOf="#+id/textView11"
app:layout_constraintTop_toBottomOf="#+id/textView11" />
</android.support.constraint.ConstraintLayout>
</ScrollView>
As you can see, I enabled app:counterEnabled in the TextInputLayouts.
Then I try to set the max chars inside my code.
Here is the code:
shipperTextArea = (TextInputLayout) rootView.findViewById(R.id.shipper_layout);
consigneeTextArea = (TextInputLayout) rootView.findViewById(R.id.consignee_layout);
shipperTextArea.setCounterMaxLength(60);
consigneeTextArea.setCounterMaxLength(60);

just set the counter in xml files, add this:
<android.support.design.widget.TextInputLayout
app:counterMaxLength="60"
app:counterEnabled="true"
i think that don't need to set in the java class.