2 hints appearing when TextInputLayout is focused - android

I am having some trouble with the TextInputLayout.
When the TextInputLayout is focused, I am seeing the hint text float above the text field and also stay on the text field. Attaching images:
And when I type stuff on the field, the text overlaps the hint on the text field.
This is the XML for my TextInputLayout
<com.google.android.material.textfield.TextInputLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
app:layout_constraintTop_toBottomOf="#+id/imageView" app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="32dp" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="32dp" android:id="#+id/email"
android:hint="hint">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
I am using the android material components library like so:
implementation 'com.google.android.material:material:1.0.0'
How do I get the hint TextInputLayout to hide when it is focused on has text on it?
Here is the complete layout:
<?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:id="#+id/login"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.login.login.LoginFragment">
<ImageView
android:layout_width="279dp"
android:layout_height="289dp"
android:src="#drawable/react"
android:id="#+id/imageView" app:layout_constraintEnd_toEndOf="parent" android:layout_marginEnd="8dp"
app:layout_constraintStart_toStartOf="parent" android:layout_marginStart="8dp"
android:layout_marginTop="24dp" app:layout_constraintTop_toTopOf="parent"
android:contentDescription="#string/vitrix_logo"/>
<com.google.android.material.button.MaterialButton
android:text="#string/login"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/loginButton"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="32dp" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="32dp" android:contentDescription="#string/click_to_login_to_the_app"
app:layout_constraintHorizontal_bias="0.0"
android:layout_marginBottom="16dp" app:layout_constraintBottom_toTopOf="#+id/createNewAccount"/>
<com.google.android.material.button.MaterialButton
android:text="#string/create_account"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/createNewAccount"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="32dp" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="32dp" app:layout_constraintHorizontal_bias="0.0"
android:layout_marginBottom="32dp" app:layout_constraintBottom_toBottomOf="parent"/>
<com.google.android.material.textfield.TextInputLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
app:layout_constraintTop_toBottomOf="#+id/imageView" app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="32dp" app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="32dp" android:id="#+id/email"
android:hint="hint">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</com.google.android.material.textfield.TextInputLayout>
The base activity layout
<?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:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".LoginActivity">
<fragment
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="0dp"
android:layout_height="0dp"
app:navGraph="#navigation/navigation_graph" app:defaultNavHost="true"
android:id="#+id/fragment" android:layout_marginStart="8dp"
app:layout_constraintStart_toStartOf="parent" android:layout_marginTop="8dp"
app:layout_constraintTop_toTopOf="parent" app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="8dp" android:layout_marginBottom="8dp"
app:layout_constraintBottom_toBottomOf="parent"/>


Best way to achieve the result you expect:
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Full name">
<android.support.design.widget.TextInputEditText
android:id="#+id/etFullName"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.TextInputLayout>


Try using android.support.design.widget.TextInputLayout intead of com.google.android.material.textfield.TextInputLayout.


try this,
<android.support.design.widget.TextInputLayout
android:id="#+id/input_mobnumber_box"
android:layout_width="320dp"
android:layout_gravity="center"
android:layout_height="wrap_content">
<EditText
android:id="#+id/input_mobnumber"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-light"
android:hint="Mobile Number" />
</android.support.design.widget.TextInputLayout>


Turns out I was just loading the fragment twice.
I was loading in the Fragment once using navigation components and a second time from the main activity auto-generated boilerplate code you get when you use an Activity + Fragment template.
To solve the issue, just remove the FragmentTrancaction.replace from your main activity and let the Nav Component load up the fragment for you.

Related

why windowSoftInputMode doesn't work with constraint layout?

This is more like the general information question that I am asking I tried to implement windowSoftinputMode="adjustResize" mode in constraint layout but it doesn't work for it at all I tried to search for a constraint layout example but there is no example available on the internet. The only example I am able to find is with relative layout and when I implemented it worked like a charm so please tell me why it works like that
here is my constraint layout 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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:id="#+id/fromtext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="140dp"
android:fontFamily="#font/nunito_sans_semibold"
android:text="#string/from"
android:textSize="#dimen/_15sdp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Spinner
android:id="#+id/fromSpinner"
android:layout_width="match_parent"
android:layout_height="#dimen/_35sdp"
android:layout_marginHorizontal="#dimen/_20sdp"
android:entries="#array/weight"
android:textAlignment="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.49"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/fromtext"
app:layout_constraintVertical_bias="0.085" />
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/_15sdp"
android:id="#+id/fromvalue"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#id/fromSpinner"
app:layout_constraintVertical_bias="0.0"
tools:layout_editor_absoluteX="13dp">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="number"
android:textAlignment="center"
android:textSize="#dimen/_15sdp" />
</com.google.android.material.textfield.TextInputLayout>
<TextView
android:id="#+id/totext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/_50sdp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_gravity="center"
android:text="#string/to"
app:layout_constraintTop_toBottomOf="#+id/fromvalue"
android:textSize="#dimen/_20sdp"/>
<Spinner
android:layout_width="match_parent"
android:layout_height="#dimen/_35sdp"
android:layout_margin="#dimen/_15sdp"
android:entries="#array/weight"
app:layout_constraintTop_toBottomOf="#+id/totext"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
android:textAlignment="center"
android:id="#+id/toSpinner"/>
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#+id/toSpinner"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_margin="#dimen/_15sdp"
>
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/tovalue"
android:layout_width="match_parent"
android:focusable="false"
android:textSize="#dimen/_20sdp"
android:textAlignment="center"
android:cursorVisible="false"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
update
Now my app behaves like this
when the keyboard is hidden
when the keyboard is not hidden
i want my screen to be fully resized not just one element

The Android keyboard is changing the components of ConstraintLayout

I have a layout with ConstraintLayout as root, and this layout belongs to a Fragment shown in a ViewPager2, hosted by a Activity that extends FragmentActivity. My Problem is that every time the keyboard is up, it doesnt overlap the layout, it makes the window smaller, changing the aspect of my layout.
ViewPager layout:
<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=".activities.WelcomeActivity">
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="20dp"
app:layout_constraintGuide_percent=".5" />
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/welcome_viewPager2"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<me.relex.circleindicator.CircleIndicator3
android:id="#+id/welcome_indicator"
android:layout_width="match_parent"
android:layout_height="48dp"
app:layout_constraintBottom_toTopOf="#+id/view5"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<View
android:id="#+id/view5"
android:layout_width="1dp"
android:layout_height="0dp"
android:layout_marginTop="4dp"
android:layout_marginBottom="4dp"
android:background="#android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/welcome_btnLogar" />
<Button
android:id="#+id/welcome_btnLogar"
style="?android:buttonBarButtonStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/transparentBlack"
android:text="#string/login"
android:textAppearance="#style/TextAppearance.AppCompat.Body2"
android:textColor="#android:color/white"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/view5"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/welcome_btnRegister"
style="?android:buttonBarButtonStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/transparentBlack"
android:text="#string/create_an_account"
android:textAppearance="#style/TextAppearance.AppCompat.Body2"
android:textColor="#android:color/white"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/view5" />
Fragment Layout:
<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=".activities.CadastroActivity">
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/cadastro_frag1_inputLayout_ame"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:hint="#string/name"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.25"
app:startIconDrawable="#drawable/ic_android_gray_24dp">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/cadastro_frag1_inputEdit_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPersonName" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/cadastro_frag1_inputLayout_email"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:hint="#string/email"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/cadastro_frag1_inputLayout_ame"
app:startIconDrawable="#drawable/ic_email_gray_24dp">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/cadastro_frag1_inputEdit_email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textEmailAddress" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/cadastro_frag1_inputLayout_password"
android:layout_width="0dp"
app:startIconDrawable="#drawable/ic_lock_open_gray_24dp"
android:layout_height="wrap_content"
app:helperText="#string/min_6_characters"
app:helperTextTextColor="#color/colorAccentWelcome"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
app:counterEnabled="true"
android:layout_marginTop="24dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:hint="#string/password"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/cadastro_frag1_inputLayout_email"
app:passwordToggleEnabled="true">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/cadastro_frag1_inputEdit_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/cadastro_frag1_inputLayout_confirmPassword"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="8dp"
app:counterEnabled="true"
android:layout_marginRight="8dp"
android:hint="#string/confirm_your_password"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/cadastro_frag1_inputLayout_password"
app:passwordToggleEnabled="true">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/cadastro_frag1_inputEdit_confirmPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword" />
</com.google.android.material.textfield.TextInputLayout>
<Button
android:id="#+id/cadastro_frag1_btnNextStep"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginLeft="32dp"
android:layout_marginEnd="32dp"
android:layout_marginRight="32dp"
android:textColor="#android:color/white"
android:text="#string/go_to_next_step"
android:background="#drawable/shape_btn_all_round_welcome_accent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/cadastro_frag1_inputLayout_confirmPassword" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-condensed-medium"
android:text="#string/step_1_2"
android:textAppearance="#style/TextAppearance.AppCompat.Display1"
android:textColor="#color/colorAccentWelcome"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/cadastro_frag1_inputLayout_ame"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
How can i make the keyboard overlap the layout?

On your AndroidManifest.xml add windowSoftInputMode
<activity
android:name=".YourActivity"
android:windowSoftInputMode="adjustPan"/>
or programatically
getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN);
According to documentation
The state of the soft keyboard — whether it is hidden or visible — when the activity becomes the focus of user attention.
The adjustment made to the activity's main window — whether it is resized smaller to make room for the soft keyboard or whether its contents pan to make the current focus visible when part of the window is covered by the soft keyboard.
If you need to scroll the page when the keyboard is open, add your ConstraintLayout inside a ScrollView
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<!-- xml code-->
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>

NestedScrollView not scrolling to the bottom

This layout is part of my learning process. So please don't judge the use of textview for displaying data.
The problem is i am not able to scroll the entire data in the bottom textview. Always 2 sets of data is left behind.
If i have 8 sets,the scrollview will show up to 6 sets. If i have 4 set it will show 2 sets and wont scroll at all. What's the problem with my scrollview?
<?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="wrap_content"
tools:context=".FireStoreNotes">
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/textInputLayout"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/editText_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/title" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/textInputLayout2"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textInputLayout">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/editText_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/description" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/textInputLayout3"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textInputLayout2">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/editText_priority"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/priority"
android:inputType="number" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.button.MaterialButton
android:id="#+id/button_add"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:text="#string/add_notes"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textInputLayout3" />
<com.google.android.material.button.MaterialButton
android:id="#+id/button_load"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:text="#string/load_notes"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button_add" />
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:paddingBottom="?android:attr/actionBarSize"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button_load">
<TextView
android:id="#+id/textView_loadData"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20sp" />
</androidx.core.widget.NestedScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
This is how my layout looks.
Thanks in advance.

Edit ConstraintLayout root layout_height (match_parent instead of wrap_content)
For NestedScrollView :
Replace layout_widthand layout_height values by 0dpfor applying constraints.
Add a bottom constraint with app:layout_constraintBottom_toBottomOf="parent"

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>

ConstraintLayout not respecting constraints

I understand how to use the constraint layout on Android but I have faced this issue for the second time now and wished to know if there is a remedy or it is a bug with it.
I have set all constraints correctly in my layout my preview is revealed as seen on this photo
The corresponding xml is as seen below
<?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:id="#+id/root_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.auth.PlaceOfDeliveryFragment">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar_select_city"
style="#style/ToolbarStyle"
android:layout_width="0dp"
android:layout_height="56dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:navigationIcon="#drawable/ic_chevron_left_white_32dp"
app:title="#string/text_select_delivery_city"
app:titleMarginStart="75dp"
app:titleTextAppearance="#style/ToolbarStyle"
app:titleTextColor="#color/colorTextWhite" />
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/textInputLayout"
style="#style/TextInputLayoutStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="16dp"
android:hint="#string/city"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/country_spinner">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/city_text_input"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textCapWords" />
</com.google.android.material.textfield.TextInputLayout>
<Spinner
android:id="#+id/country_spinner"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:entries="#array/countries"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView" />
<TextView
android:id="#+id/textView"
style="#style/TextAppearance.AppCompat.Subhead"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="32dp"
android:text="#string/country_hint"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/toolbar_select_city" />
<com.google.android.material.button.MaterialButton
android:id="#+id/button_next"
style="#style/NoInsetsButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/next_txt"
android:textAlignment="textEnd"
app:icon="#drawable/ic_chevron_right_white_24dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
But when the app is run, I instead see the button hanging when I constrained it to the bottom of the layout.
I wish to understand if there is anything I am missing and the button hanging.

Categories

Resources