Develop Reference

Animation in Android EditText Android

I am trying to create an animated TextInput layout for my login page but I cant't make it work.
below are the pictures of what I am trying to do:
image when you arrive on the login page:
when you start typing the email, the line length should decrease when email address is typed, the more you type the smaller the line became.
Here is the layout I have created but it's not working.
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/email_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:background="#color/transparent"
android:textAllCaps="true"
android:textColorHint="#color/gainsboro_00"
android:textColor="#color/gainsboro_00"
android:hint="#string/email">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/transparent">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/email_et"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:inputType="textEmailAddress"
android:textColor="#color/gainsboro_00"
android:background="#color/transparent"
android:minWidth="75dp"
android:textSize="14sp"
android:textAllCaps="true"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
<View
android:id="#+id/email_line"
android:layout_width="match_parent"
android:layout_height="10dp"
android:background="#drawable/checkered_gainsboro_background"
android:layout_marginEnd="45dp"
app:layout_constraintStart_toEndOf="#id/email_et"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.textfield.TextInputLayout>
Any idea how to achieve this? I think I am not far from the solution
Thanks

You don't need ConstraintLayout and View elements inside TextInputLayout.
Documentation is here: https://material.io/components/text-fields/android#using-text-fields

Material Design provides you instant EditText with Animation. You simply need to change the style of the TextInputLayout as shown below in the code.
Here is the code you can use as per your requirements.
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.FilledBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/enter_your_email_id"
app:endIconMode="clear_text"
android:id="#+id/edtEmailID"
android:background="#color/colorWhite"
android:layout_below="#id/welcomeText"
app:endIconTint="#000"
android:layout_marginTop="25dp"
app:errorEnabled="true"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
app:hintTextColor="#000">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/editEmailIn"
android:inputType="text"
android:background="#color/colorWhite"
android:textColor="#000" />
</com.google.android.material.textfield.TextInputLayout>
Refer to Documentation for better exposure

Trying to override xml file of stripe

I am trying to override xml of stripe to show Edittext inside framelayout horizontally
Here is my code :
<?xml version="1.0" encoding="utf-8"?>
<merge 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">
<com.stripe.android.view.CardBrandView
android:id="#+id/card_brand_view"
android:layout_width="#dimen/card_brand_view_width"
android:layout_height="#dimen/card_brand_view_height"
android:layout_marginTop="#dimen/stripe_card_icon_padding"
android:layout_marginBottom="#dimen/stripe_card_icon_padding"
android:layout_marginEnd="#dimen/stripe_card_icon_padding"
/>
<FrameLayout
android:id="#+id/container"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
android:layout_gravity="center_vertical"
>
<!-- The accessibilityTraversalBefore attribute is ignored in sdk < 22 -->
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/card_number_text_input_layout"
android:labelFor="#id/card_number_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:visibility="visible"
android:background="#android:color/transparent"
tools:ignore="UnusedAttribute"
android:accessibilityTraversalBefore="#+id/text_input_expiry_date"
android:nextFocusRight="#+id/text_input_expiry_date"
android:nextFocusForward="#+id/text_input_expiry_date"
android:nextFocusDown="#+id/text_input_expiry_date"
android:contentDescription="#string/acc_label_card_number"
android:accessibilityLiveRegion="polite"
app:hintEnabled="false"
style="#style/Stripe.CardInputWidget.TextInputLayout">
<com.stripe.android.view.CardNumberEditText
android:id="#+id/card_number_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:imeOptions="actionNext"
android:hint="#string/card_number_hint"
style="#style/Stripe.CardInputWidget.EditText"
/>
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/expiry_date_text_input_layout"
android:labelFor="#id/expiry_date_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/stripe_card_expiry_initial_margin"
android:layout_gravity="start"
android:visibility="visible"
android:background="#android:color/transparent"
tools:ignore="UnusedAttribute"
android:accessibilityTraversalBefore="#+id/text_input_cvc"
android:accessibilityTraversalAfter="#+id/text_input_card_number"
android:nextFocusRight="#+id/text_input_cvc"
android:nextFocusForward="#+id/text_input_cvc"
android:nextFocusDown="#+id/text_input_cvc"
android:nextFocusLeft="#id/text_input_card_number"
android:nextFocusUp="#id/text_input_card_number"
android:contentDescription="#string/acc_label_expiry_date"
android:accessibilityLiveRegion="polite"
app:hintEnabled="false"
style="#style/Stripe.CardInputWidget.TextInputLayout">
<com.stripe.android.view.ExpiryDateEditText
android:id="#+id/expiry_date_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:imeOptions="actionNext"
android:digits="#string/stripe_expiration_date_allowlist"
android:hint="#string/expiry_date_hint"
style="#style/Stripe.CardInputWidget.EditText"
/>
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/cvc_text_input_layout"
android:labelFor="#id/cvc_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/stripe_card_cvc_initial_margin"
android:layout_gravity="start"
android:background="#android:color/transparent"
tools:ignore="UnusedAttribute"
android:accessibilityTraversalAfter="#+id/text_input_expiry_date"
android:nextFocusLeft="#id/text_input_expiry_date"
android:nextFocusUp="#id/text_input_expiry_date"
android:contentDescription="#string/cvc_number_hint"
android:accessibilityLiveRegion="polite"
app:hintEnabled="false"
style="#style/Stripe.CardInputWidget.TextInputLayout">
<com.stripe.android.view.CvcEditText
android:id="#+id/cvc_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:imeOptions="actionDone"
style="#style/Stripe.CardInputWidget.EditText"
/>
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/postal_code_text_input_layout"
android:labelFor="#id/postal_code_edit_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
android:layout_marginStart="#dimen/stripe_card_cvc_initial_margin"
android:layout_gravity="start"
android:background="#android:color/transparent"
tools:ignore="UnusedAttribute"
android:accessibilityTraversalAfter="#+id/text_input_cvc"
android:nextFocusLeft="#id/text_input_cvc"
android:nextFocusUp="#id/text_input_cvc"
android:contentDescription="#string/address_label_postal_code"
android:accessibilityLiveRegion="polite"
app:hintEnabled="false"
style="#style/Stripe.CardInputWidget.TextInputLayout">
<com.stripe.android.view.PostalCodeEditText
android:id="#+id/postal_code_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:imeOptions="actionDone"
android:enabled="false"
style="#style/Stripe.CardInputWidget.EditText"
/>
</com.google.android.material.textfield.TextInputLayout>
</FrameLayout>
</merge>
Here is the code I have used from stripe library and I am trying to override this, my requirement is to show all editText fields as horizontally with match_parent and show edittext horizontally into 4 rows
Card Number
CVC
Date Expiry
Postal Code
Thanks
Regards

Using CardMultiLineWidget resolves my problem
https://stripe.dev/stripe-android/com/stripe/android/view/CardMultilineWidget.html

Searchable RecyclerView inside BottomSheetDialogFragment that stays expanded and does not wrap content

My app has a BottomSheetDialogFragment which displays list of countries with RecyclerView. When user types in the EditText bottomsheet shrinks in size so as to wrap content. What can I do to make BottomSheet remain the same and not shrink in height. I could not find anything similar on SO, closest thing I got was this article:
https://medium.com/#oshanm1/how-to-implement-a-search-dialog-using-full-screen-bottomsheetfragment-29ceb0af3d41
Can someone explain why this shrinking happens, why the article uses 2 LinearLayouts nested inside each other and provide solution to this problem with thorough explanation?
Here is xml code
<?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:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/tvCountry"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:textSize="14sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/tilSearchCountries"
style="#style/ReBankTIL"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="30dp"
android:layout_marginEnd="20dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/rtvCountry"
app:startIconDrawable="#drawable/ic_search" >
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/tieSearchCountries"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:imeOptions="actionSearch"
android:inputType="text"
android:maxLines="1" />
</com.google.android.material.textfield.TextInputLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rvCountries"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="20dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#id/tilSearchCountries" />
</androidx.constraintlayout.widget.ConstraintLayout>

Material design draw icon doesn't show

I am trying to set an icon in the end of a text input field just starting to use material design.
Here is the XML.
** </androidx.constraintlayout.widget.ConstraintLayout>
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/resturantSearchPost"
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_marginStart="32dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="32dp"
android:background="#drawable/rounded_corner_rectangle"
android:ems="10"
android:inputType="textPersonName"
android:textSize="24sp"
**app:endIconDrawable="#android:drawable/ic_menu_search"**
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/constraintLayout2" />**
app:endIconDrrawable=.... doesn't work anywhere with any icon.
Any ideas?

You need to use it in TextInputLayout.
<com.google.android.material.textfield.TextInputLayout
app:endIconDrawable="#drawable/icon">
...TextInputEdittext
</com.google.android.material.textfield.TextInputLayout>
Example
<com.google.android.material.textfield.TextInputLayout
app:endIconDrawable="#drawable/icon"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/form_username">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</com.google.android.material.textfield.TextInputLayout>

use the app:endIconDrawable and app:endIconMode toghader.
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:endIconDrawable="#drawable/ic_test"
app:endIconMode="custom">

Included ConstraintLayout with merge tag doesn't work

This is my qff_layout.xml file
<merge
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">
<androidx.constraintlayout.widget.ConstraintLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.textview.MaterialTextView
android:id="#+id/questions_label"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/questions"
android:textSize="#dimen/text_normal"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintEnd_toStartOf="#+id/followers_label"
app:layout_constraintTop_toTopOf="parent"/>
<com.google.android.material.textview.MaterialTextView
android:id="#+id/followers_label"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/followers"
android:textSize="#dimen/text_normal"
app:layout_constraintStart_toEndOf="#+id/questions_label"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintEnd_toStartOf="#+id/following_label"
app:layout_constraintTop_toTopOf="parent"/>
<com.google.android.material.textview.MaterialTextView
android:id="#+id/following_label"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/following"
android:textSize="#dimen/text_normal"
app:layout_constraintStart_toEndOf="#+id/followers_label"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<com.google.android.material.textview.MaterialTextView
android:id="#+id/questions_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="#dimen/text_normal"
android:textStyle="bold"
tools:text="0"
app:layout_constraintStart_toStartOf="#+id/questions_label"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="#+id/questions_label"
android:layout_marginRight="8dp"
app:layout_constraintTop_toBottomOf="#+id/questions_label"/>
<com.google.android.material.textview.MaterialTextView
android:id="#+id/followers_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="#dimen/text_normal"
android:textStyle="bold"
tools:text="0"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
app:layout_constraintStart_toEndOf="#+id/questions_label"
app:layout_constraintEnd_toStartOf="#+id/following_label"
app:layout_constraintTop_toBottomOf="#+id/followers_label"/>
<com.google.android.material.textview.MaterialTextView
android:id="#+id/following_number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="#dimen/text_normal"
android:textStyle="bold"
tools:text="0"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
app:layout_constraintStart_toStartOf="#+id/following_label"
app:layout_constraintEnd_toEndOf="#+id/following_label"
app:layout_constraintTop_toBottomOf="#+id/following_label"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</merge>
This displays 6 textviews in two rows, something you would see in instagram app in profile section with Posts-Followers-Following and bellow numbers under each of those.
Now the problem is when I include that in my main layout which is ConstraintLayout:
profile_fragment.xml
<?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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.Toolbar
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:theme="?attr/actionBarTheme"
android:minHeight="?attr/actionBarSize"
android:elevation="4dp"
android:id="#+id/title"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/profile_image"
android:layout_width="80dp"
android:layout_height="80dp"
app:srcCompat="#drawable/ic_profile_24dp"
tools:src="#drawable/ic_profile_24dp"
app:civ_border_color="#color/secondaryDarkColor"
app:civ_border_width="1dp"
android:layout_marginTop="#dimen/spacing_normal"
android:layout_marginStart="#dimen/spacing_normal"
android:layout_marginLeft="#dimen/spacing_normal"
app:layout_constraintTop_toBottomOf="#+id/title"
app:layout_constraintStart_toStartOf="parent"/>
<com.google.android.material.textview.MaterialTextView
android:layout_width="0dp"
android:layout_height="0dp"
android:id="#+id/description"
android:layout_marginEnd="#dimen/spacing_normal"
android:layout_marginRight="#dimen/spacing_normal"
android:layout_marginLeft="#dimen/spacing_normal"
android:layout_marginStart="#dimen/spacing_normal"
app:layout_constraintStart_toEndOf="#+id/profile_image"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="#+id/profile_image"
app:layout_constraintTop_toTopOf="#+id/profile_image"/>
<include
layout="#layout/qff_layout"
android:id="#+id/qff_layout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/spacing_small"
app:layout_constraintTop_toBottomOf="#+id/profile_image"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
<com.google.android.material.tabs.TabLayout
android:id="#+id/sliding_tabs"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/primaryLightColor"
app:tabMode="fixed"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/qff_layout"/>
<androidx.viewpager.widget.ViewPager
android:id="#+id/view_pager"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/sliding_tabs" />
</androidx.constraintlayout.widget.ConstraintLayout>
Nothing gets displayed.
I tried changing my main layout to linear and it's the same.
But when I remove merge tag from qff_layout.xml and use the same include tag in main layout it works well and displays the qff_layout, How??Why??
What is the use of merge tag then, please do not quote something from the stupidest documentation ever because it makes no sense.

You should use merge when you dont want to repeat same ViewGroup. In this case, it could save you from not using two nested ConstraintLayouts - you could remove ConstraintLayout from qff_layout.xml and use merge as your root element like:
<merge
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">
<!-- your text view -->
</merge>
If your ConstraintLayout in qff_layout.xml has some other purpose, you just leave it, and include qff_layout.xml without merge as root element.
In other words merge purpose is to replace root ViewGroup.
Read more here.
UPDATE:
You can fix your XML this way without removing marge.
Positioning constraints you defined on element, should be also applied on your ConstraintLayout inside qff_layout.xml like:
<merge
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/qff_layout"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/spacing_small"
app:layout_constraintTop_toBottomOf="#+id/profile_image"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<!-- your text view -->
</androidx.constraintlayout.widget.ConstraintLayout>
</merge>
Why you need to apply this: When you put layout inside element it will basically get pasted in the line you include it. When you don't define constraints for some layout inside ConstraintLyout, it jumps to the top left corner of the screen and thats what happend to layout you included. It didnt have defined constraints inside qff_layout.xml that will apply when it gets included, so it jumped to the top left corner.