In my application I want use TextInputLayout and I want set border for this view.
Such as this image : Image
I write below codes :
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/loginFrag_phoneInputLayout"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/_15mdp"
android:layout_marginLeft="#dimen/_15mdp"
android:layout_marginTop="#dimen/_15mdp"
android:layout_marginEnd="#dimen/_15mdp"
android:layout_marginRight="#dimen/_15mdp"
android:hint="#string/insertYourPhoneNumber"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/loginFrag_title">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/signInFrag_phoneEdt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:gravity="right|center_vertical"
android:inputType="phone"
android:maxLength="11"
android:maxLines="1"
android:paddingLeft="#dimen/_10mdp"
android:paddingRight="#dimen/_10mdp"
android:singleLine="true"
android:textColorHint="#color/colorLightGray"
android:textSize="#dimen/_10mdp"
app:drawableRightCompat="#drawable/ic_phone" />
</com.google.android.material.textfield.TextInputLayout>
I added this line :
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
But when update material design library to v1.3 not show me any border!
'com.google.android.material:material:1.3.0'
But in v1.2 or v1.1 show me border and not any problem!
Why not show border in v1.3 ?
How can I fix it?
You have to remove the background android:background="#android:color/transparent" in the TextInputEditText.
Also don't use app:drawableRightCompat="#drawable/...." in the TextInputEditText but use:
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
app:endIconDrawable="#drawable/..."
app:endIconMode="custom"
I am also using v 1.3.0 and getting correct border using below code:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/loginFrag_phoneInputLayout"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="10dp"
android:layout_marginRight="10dp"
android:hint="Phone Number"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:startIconDrawable="#drawable/ic_action_phone"
>
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/signInFrag_phoneEdt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="phone"
android:maxLength="11"
android:maxLines="1"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:singleLine="true"/>
</com.google.android.material.textfield.TextInputLayout>
Related
I am using textInputLayout in my application, but I am getting additional padding to the Hint. Can anyone help me out.
Screenshot:
Xml Code:
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:id="#+id/outlined_member_name_text_field"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:hint="#string/name"
app:startIconDrawable="#drawable/ic_baseline_person_24"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/select_contact_button">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/member_name_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textCapSentences|text" />
</com.google.android.material.textfield.TextInputLayout>
You can add -ve padding to TextInputEditText, it should solve the extra padding issue that you have. For example I have used -10dp you can check what fits your case.
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:id="#+id/outlined_member_name_text_field"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:hint="#string/name"
app:startIconDrawable="#drawable/ic_baseline_person_24"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/select_contact_button">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/member_name_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawablePadding="-10dp"
android:inputType="textCapSentences|text" />
</com.google.android.material.textfield.TextInputLayout>
I am setting a an icon in material TextInputLayout but the icon is showing as grey not its original color(Shown in the image below). Using the same icon image in a Image View is showing colors. I have searched a lot and haven't found any solutions.
Any help will be great. Thanks in advance.
XML for the TextInputLayout :-
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/country"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="#string/country"
app:layout_constraintBottom_toBottomOf="parent"
app:startIconDrawable="#drawable/flag"
app:layout_constraintStart_toStartOf="parent"
android:layout_margin="10dp">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="+91"
android:enabled="false"/>
</com.google.android.material.textfield.TextInputLayout>
Simply add this line to your xml TextinputLayout Xml file
app:startIconTint="#null"
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/country"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:hint="کشور"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:startIconDrawable="#drawable/blue_cheese"
app:startIconTint="#null">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:enabled="false"
android:text="+91" />
</com.google.android.material.textfield.TextInputLayout>
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">
I want to change the TextInputLayout Box color when it contains some text or maintained the focused state when contains the text.
My Code:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/et_email_layout"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="40dp"
android:layout_marginEnd="16dp"
android:hint="#string/email"
android:textColorHint="#color/grey_40"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/et_url_layout">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/et_email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:backgroundTint="#android:color/transparent"
android:drawableEnd="#drawable/ic_email"
android:inputType="textEmailAddress"
android:maxLength="20"
android:maxLines="1"
android:paddingStart="10dp"
android:paddingEnd="10dp"
android:singleLine="true"
android:textColor="#color/color_text" />
</com.google.android.material.textfield.TextInputLayout>
OutPut:
When Focused:
UnFocus:
I want to achieve the same state of focus when it does contains some text.
Any help will be highly appreciated.
Thanks!
I am trying to make AutoCompleteTextView look like this image https://ibb.co/ZJxmgK5 but unable to do the same. The outlined box is not visible in the result
Below is my current code. Earlier I tried adding an EditText in TextInputLayout but now I want to add Autocomplete in this.
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/input_layout_holiday_destination"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/lbl_destination_big">
<AutoCompleteTextView
android:id="#+id/edittext_holiday_destination"
style="#style/Base.Widget.AppCompat.EditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="10"
android:background="#android:color/transparent"
android:hint="#string/lbl_destination"
android:layout_marginLeft="#dimen/margin8"
android:singleLine="true"
android:lines="1"
android:textSize="25sp"
android:nextFocusDown="#+id/txv_holiday_num_of_nights"
android:imeOptions="actionNext"
android:textCursorDrawable="#drawable/edittext_cursor_drawable"/>
/>
</com.google.android.material.textfield.TextInputLayout>
The expected result is the image for which the URL has been given above.
If you would like to have a TextInputLayout in conjuction with an AutoCompleteTextView you should use this style for the TextInputLayout Widget.MaterialComponents.TextInputLayout.*.ExposedDropdownMenu.
In your case:
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
Use something like:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/name_text_input"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="HINT TEXT">
<AutoCompleteTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#null"/>
</com.google.android.material.textfield.TextInputLayout>
Check also the doc:
Note: When using an outlined text field with an EditText child that is not a TextInputEditText, make sure to set the EditText's android:background to #null. This allows TextInputLayout to set an outline background on the EditText.
If you would like to avoid the dropdown icon just use the app:endIconMode attribute.
<com.google.android.material.textfield.TextInputLayout
app:endIconMode="none"
...>
Below code solves the problem:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/input_layout_holiday_destination"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/lbl_destination_big">
<androidx.appcompat.widget.AppCompatAutoCompleteTextView
android:id="#+id/edittext_holiday_destination"
style="#style/Widget.MaterialComponents.AutoCompleteTextView.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:singleLine="true"
android:lines="1"
android:nextFocusDown="#+id/txv_holiday_num_of_nights"
android:imeOptions="actionNext"
android:textCursorDrawable="#drawable/edittext_cursor_drawable"
/>
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/input_layout_holiday_destination"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<AutoCompleteTextView
android:id="#+id/edittext_holiday_destination"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Destination"
android:layout_weight="10"
android:singleLine="true"
android:lines="1"
android:textSize="25sp"
android:layout_gravity="center_vertical"
android:layout_marginLeft="8dp"
tools:text="Hello" />
/>
</com.google.android.material.textfield.TextInputLayout>
This works. The problem was with the background color that you were setting to the AutoCompleteTextView.
finally my answer is this
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/uomLay"
android:layout_width="0dp"
app:layout_constraintTop_toBottomOf="#id/quantity_lay"
app:layout_constraintStart_toStartOf="#id/start2"
app:layout_constraintEnd_toEndOf="#id/end2"
style="#style/OutlineBoxDropDown"
app:endIconDrawable="#drawable/ic_path_16692"
app:shapeAppearance="#style/Rounded"
app:hintTextAppearance="#style/hintTextAppearence"
android:layout_marginTop="#dimen/_13sdp"
android:layout_height="wrap_content">
<AutoCompleteTextView
android:id="#+id/uom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/graphikregular"
android:hint="UOM"
style="#style/Widget.MaterialComponents.AutoCompleteTextView.OutlinedBox"
android:background="#null"
android:paddingVertical="#dimen/_7sdp"
android:textColor="#color/desc_color"
android:textSize="#dimen/_11ssp"
tools:text="kg" />
</com.google.android.material.textfield.TextInputLayout>