I have a layout with several TextInputEditText fields nested in TextInputLayouts. I also have one dropdown menu using AutoCompleteTextView, also nested in a TextInputLayout. I use a custom background drawable on the fields to create a rounded field. Unfortunately, I cannot for the life of me figure out how to get rid of the little outline around the AutoCompleteTextView.
With the TextInputEditText fields, I can eliminate the outlines by setting the background on it. Doing this on the AutoCompleteTextView does nothing, and I have to set it on the parent TextInputLayout to see the background. But yet, the outline remains.
I believe this has something to do with material design (and its styles?) because when you press on the field, the outline turns orange, which is the primary color in our app's theme as set in the styles.xml.
Here is a relevant snippet of the XML layout in question. For comparison, the first part is the city field, and the second is the state field:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/input_city"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:visibility="#{viewModel.addDevice.isFinishedWithSettings ? View.INVISIBLE : View.VISIBLE}"
app:endIconMode="clear_text"
app:hintEnabled="false"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/input_apartment">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/input_city_edit_text"
style="#style/AppFont500.DarkGrey.EditTextHint"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingStart="25dp"
android:paddingEnd="25dp"
android:paddingLeft="25dp"
android:paddingRight="25dp"
android:visibility="#{viewModel.addDevice.isFinishedWithSettings ? View.INVISIBLE : View.VISIBLE}"
android:imeOptions="actionDone"
android:inputType="number"
android:text="#={viewModel.addDevice.city}"
android:hint="#string/hint_city"
android:background="#drawable/rounded_edittext_states"
/>
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/input_state"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:visibility="#{viewModel.addDevice.isFinishedWithSettings ? View.INVISIBLE : View.VISIBLE}"
app:endIconMode="dropdown_menu"
app:hintEnabled="false"
app:layout_constraintEnd_toStartOf="#id/input_zip_code"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/input_city"
android:background="#drawable/rounded_edittext_states"
>
<AutoCompleteTextView
android:id="#+id/input_state_edit_text"
style="#style/AppFont500.DarkGrey.EditTextHint"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingStart="25dp"
android:paddingEnd="25dp"
android:paddingLeft="25dp"
android:paddingRight="25dp"
android:layout_marginEnd="4dp"
android:visibility="#{viewModel.addDevice.isFinishedWithSettings ? View.INVISIBLE : View.VISIBLE}"
android:imeOptions="actionDone"
android:inputType="none"
android:text="#={viewModel.addDevice.state}"
android:hint="#string/hint_state"
/>
</com.google.android.material.textfield.TextInputLayout>
I believe the key here involves styles and themes. Here are the custom styles and theme used within this snippet:
<style name="AppMaterialTheme" parent="#style/Theme.MaterialComponents.Light.NoActionBar">
<item name="colorPrimary">#color/primaryOrange</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowActionBar">false</item>
<item name="android:windowFullscreen">true</item>
<item name="android:windowContentOverlay">#null</item>
</style>
<style name="AppFont500">
<item name="fontFamily">#font/poppins_medium_500</item>
</style>
<style name="AppFont500.DarkGrey">
<item name="android:textColor">#color/secondaryDarkGrey</item>
</style>
<style name="AppFont500.DarkGrey.EditTextHint">
<item name="android:textSize">16sp</item>
</style>
The background comes from this selector. It previously had more items, but right now just has one:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_enabled="true"
android:drawable="#drawable/rounded_edittext" />
</selector>
And the drawable:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:padding="10dp">
<solid android:color="#FFFFFF" />
<corners
android:radius="30dp" />
</shape>
Mainly, what I have seen in questions related to outlines around edit texts is to either edit the stroke or boxStroke. I tried both and set them to an invisible value, but it does not change the stroke at all.
Here is how you remove this outline.
In your TextInputLayout XML code add the following snippet:
app:boxStrokeWidth="0dp"
Related
I have problem with my custom TextInputLayout. Here is my code
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/phone"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:theme="#style/CustomTextInputLayout"
android:hint="#string/phone_number"
android:layout_marginTop="8dp"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
app:startIconDrawable="#drawable/account"
android:background="#color/bg_light_gray"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/page_description">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="?attr/listPreferredItemHeight"
android:background="#color/bg_light_gray"
android:inputType="phone"
android:singleLine="true" />
</com.google.android.material.textfield.TextInputLayout>
Here is my code from style.xml file
<style name="CustomTextInputLayout" parent="Widget.Design.TextInputLayout">
<item name="errorTextAppearance">#style/ErrorText</item>
<item name="colorControlNormal">#color/green_txt</item>
<item name="colorControlActivated">#color/orange</item>
<item name="colorControlHighlight">#color/orange</item>
</style>
I want to make a baseline color of TextInputLayout to orange, but now it is gray. Also, I place an icon, which has its original color orange, but after placing it became dark gray. Now I am not understanding why it is happening and how to fix this problem. Can someone help me with that?
I want to make base line color of TextInputLayout to orange
Just use a Material theme (for example Widget.MaterialComponents.TextInputLayout.FilledBox) the app:boxStrokeColor attribute to change the color.
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/custom_end_icon"
style="#style/Widget.MaterialComponents.TextInputLayout.FilledBox"
app:boxStrokeColor="#color/text_input_selector
where the selector is something like:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="?attr/colorPrimary" android:state_focused="true"/>
<item android:alpha="0.87" android:color="?attr/colorOnSurface" android:state_hovered="true"/>
<item android:alpha="0.12" android:color="?attr/colorOnSurface" android:state_enabled="false"/>
<item android:alpha="0.38" android:color="?attr/colorAccent"/>
</selector>
Also I place an icon, which has its original color orange, but after placing it became dark gray.
Use the app:endIconTint attribute to apply a color or a color selector to your end icon.
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/custom_end_icon"
android:hint="Hint text"
style="#style/Widget.MaterialComponents.TextInputLayout.FilledBox"
app:boxStrokeColor="#color/text_input_selector"
app:endIconMode="custom"
app:endIconDrawable="#drawable/ic_add_24px"
app:endIconTint="#color/text_input_selector"
I can't seem to get rid of the black underline from Exposed Dropdown Menu done according to material design guide in my android UI.
The dropdown looks like this:
I have tried setting background to null, transparent or custom shape. app:boxBackgroundMode="none" doesn't work either.
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/spinner_age"
style="#style/Widget.MaterialComponents.TextInputLayout.FilledBox.ExposedDropdownMenu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/bg_rounded_button"
android:hint="Age">
<AutoCompleteTextView
android:id="#+id/age_dropdown"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"/>
</com.google.android.material.textfield.TextInputLayout>
Ideally the dropdown would look like a button without the underline. How do I get rid of it?
Please change your this line
android:background="#android:color/transparent"
With
android:background="#00000000"
Make background = null
<AutoCompleteTextView
android:id="#+id/age_dropdown"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#null"/>
just add this line to remove the underline
android:inputType="textNoSuggestions"
Just use the standard style #style/Widget.MaterialComponents.TextInputLayout.FilledBox.ExposedDropdownMenu and
You don't need to use a custom background shape, you can just use the
app:boxCornerRadius* attributes to define the rounded shape.
Something like:
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.FilledBox.ExposedDropdownMenu"
app:boxCornerRadiusBottomEnd="32dp"
app:boxCornerRadiusTopEnd="32dp"
app:boxCornerRadiusBottomStart="32dp"
app:boxCornerRadiusTopStart="32dp"
app:boxStrokeColor="#color/myselector"
...>
<AutoCompleteTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#null"
/>
</com.google.android.material.textfield.TextInputLayout>
To change the color of the line under the component, you have to change the app:boxStrokeColor attribute. Just customize the selector as you prefer:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:alpha="0" android:color="?attr/colorOnSurface" android:state_hovered="true"/>
<item android:alpha="0" android:color="?attr/colorOnSurface" android:state_enabled="false"/>
<item android:alpha="0" android:color="?attr/colorOnSurface"/>
</selector>
This is the result:
Pay attention to this note in doc:
Note: When using a filled 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 a filled background on the EditText.
Alternative:
With the new version 1.1.0 you can also use the shapeAppearanceOverlay attribute to customize the shape of your component.
Just use:
<com.google.android.material.textfield.TextInputLayout
style="#style/MyFilledBox_ExposedDropdownMenu
...>
<AutoCompleteTextView
android:background="#null"
... />
</com.google.android.material.textfield.TextInputLayout>
and this style:
<!-- Rounded -->
<style name="MyFilledBox_ExposedDropdownMenu" parent="#style/Widget.MaterialComponents.TextInputLayout.FilledBox.ExposedDropdownMenu">
<item name="shapeAppearanceOverlay">#style/ShapeAppearanceOverlay.MyApp.TextInputLayout.Rounded</item>
<item name="boxStrokeColor">#color/myselector</item>
</style>
<style name="ShapeAppearanceOverlay.MyApp.TextInputLayout.Rounded" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">32dp</item>
</style>
Setting boxStrokeWidth = 0dp would solve it
I'm trying to add custom styles to a TextInputLayout and TextInputEditText and I´m not able to get the expected results.
What I need is to have a custom color "A" for hints in enabled views and a custom color "B" for hints in disabled views.
Right now I have a style with a selector for hints enabled/disabled. This is the style:
<style name="CustomTextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
<item name="boxStrokeColor">#color/input_blue</item>
<item name="boxStrokeWidth">2dp</item>
<item name="errorTextAppearance">#style/ErrorText</item>
<item name="android:textColorHint">#color/selector_edithintcolor</item>
</style>
Here is the selector, you can see the color to make the point:
Now some of the components in the layout:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/layout_text_disabled"
style="#style/CustomTextInputLayoutStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="32dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/layout_phone_not_focused">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/txt_text_disabled"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/hint_deactivated"
android:inputType="text"
android:text="#string/txt_disabled" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/layout_text_disabled_hint"
style="#style/CustomTextInputLayoutStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginTop="32dp"
android:layout_marginEnd="32dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/layout_text_disabled">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/txt_text_disabled_hint"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/hint_deactivated"
android:inputType="text" />
</com.google.android.material.textfield.TextInputLayout>
Additionally I have a button to change the status of those 2 views from enabled to disabled, here is the behavior:
When views are enabled everything is as expected, hints have the green color as per the selector:
Now when I disable the views, this is what I get:
Any ideas for making the disabled hints be orange as per the selector? Thanks in advance!
Following this link it appears that it is now possible with version 1.2.0-alpha03 of com.google.android.material:material
You need to create a color state list like so :
box_stroke_color_state_list.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="?colorPrimary" android:state_enabled="true" />
<item android:color="?colorSecondary" android:state_hovered="true" />
<item android:color="?colorSecondary" android:state_focused="true" />
<!-- This is where the disable hint and box will take it's color -->
<item android:alpha="#dimen/material_emphasis_disabled" android:color="#android:color/holo_green_dark" android:state_enabled="false" />
<item android:color="#color/mtrl_textinput_default_box_stroke_color" />
</selector>
and then call it in your code :
ContextCompat.getColorStateList(context, R.color.box_stroke_color_state_list)?.let {
layout_text_disabled_hint.setBoxStrokeColorStateList(it)
}
Based on the #Caktuspace reply, you can apply in this way:
layout.xml
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/til"
...
android:hint="#string/hello"
android:textColorHint="#color/hint_text_color_textinputlayout">
hint_text_color_textinputlayout.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:alpha="#dimen/material_emphasis_disabled" android:color="#color/desiredColorDisabled" android:state_enabled="false" />
<item android:color="#color/desiredColorEnabled" />
</selector>
Is there way to remove floating label (hint) when the TextInputLayout is in focused mode?
When I try to set app:hintEnabled="false" and hint inside TextInputeEditText, the TextInputLayout behaves weird by hiding top stroke.
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Text">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
Important thing is that I use Material Components in version 1.1.0-alpha01.
Edit
This is what it looks like (when input is not focused):
Top stroke is cut.
Yes there's a rather simple way to remove the floating label hint and only have a hint inside your TextInputLayout.
This can be easily achieved by disabling the hint in the TextInputLayout, and setting the hint on the TextInputEditText instead of the TextInputLayout like this:
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:hintEnabled="false">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="hint text comes here" />
</com.google.android.material.textfield.TextInputLayout>
The result looks something like this:
And when some text is added, it will look like this:
I tried this out in Material Components v1.2.0
Just set hint for EditText programmatically and remove app:hintEnabled="false" from your TextInputLayout if you have, in my case worked :)
Try to set hint empty of both text layout and edit text:-
<com.google.android.material.textfield.TextInputLayout
app:boxBackgroundMode="outline"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:hint=""
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
If you want to use hint then you can use custom drawable as background of EditText :-
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="10dp"/>
<solid android:color="#ffffff"/>
<stroke android:color="#000000"
android:width="2dp"/>
</shape>
You should use this style in first :
<style name="TextInputLayoutOutlinedBoxStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="android:textColorHint">#F5F5F5</item>
<item name="hintTextAppearance">#style/HintTextAppearance</item>
<item name="boxCornerRadiusBottomEnd">20dp</item>
<item name="boxCornerRadiusBottomStart">20dp</item>
<item name="boxCornerRadiusTopEnd">20dp</item>
<item name="boxCornerRadiusTopStart">20dp</item>
</style>
And you should have textinputlayout that contain this style like this :
<com.google.android.material.textfield.TextInputLayout
style="#style/TextInputLayoutOutlinedBoxStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/relativelayout_activatetoken_main"
android:layout_marginStart="20dp"
android:layout_marginTop="30dp"
android:layout_marginEnd="20dp"
android:hint="#string/activatetoken_passwordhint"
android:textColorHint="#color/colorText"
app:helperText="#string/activatetoken_passwordhelpertext"
app:helperTextTextAppearance="#style/TextAppearanceHelper"
app:hintTextAppearance="#style/TextAppearanceBase"
app:passwordToggleTint="#color/text_50">
And for the border color use this in colors :
<color name="mtrl_textinput_default_box_stroke_color" tools:override="true">#F5F5F5</color>
There appears to be left padding automatically added when using a TextInputLayout to wrap an EditText as you can see in the screenshot below.
There is no padding added to the EditText in the layout XML, but when the view is rendered there appears to be left padding on the EditText. You can see this when comparing the TextView below the TextInputLayout.
How do I disable this left padding from being added?
Thank you!
You can just set the start and end padding on the inner EditText to 0dp.
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingStart="0dp"
android:paddingEnd="0dp" />
</com.google.android.material.textfield.TextInputLayout>
Here's a screenshot with Show Layout Bounds turned on so you can see that the hints go all the way to the edge of the view.
With the TextInputLayout included in the Material Components Library you can use a custom style to reduce the padding.
Just use something like:
<com.google.android.material.textfield.TextInputLayout
....
android:hint="Hint text"
style="#style/My.TextInputLayout.FilledBox.Padding" >
Then you can define a custom style for the EditText using the materialThemeOverlay attribute:
<style name="My.TextInputLayout.FilledBox.Padding" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
<item name="materialThemeOverlay">#style/MyThemeOverlayFilledPadding</item>
</style>
<style name="MyThemeOverlayFilledPadding">
<item name="editTextStyle">#style/MyTextInputEditText_filledBox_padding</item>
</style>
<style name="MyTextInputEditText_filledBox_padding" parent="#style/Widget.MaterialComponents.TextInputEditText.FilledBox">
<!-- left and right padding -->
<item name="android:paddingStart" ns2:ignore="NewApi">2dp</item>
<item name="android:paddingEnd" ns2:ignore="NewApi">2dp</item>
<item name="android:paddingLeft">2dp</item>
<item name="android:paddingRight">2dp</item>
<!-- top and bottom padding -->
<item name="android:paddingTop">28dp</item>
<item name="android:paddingBottom">12dp</item>
</style>
Here the final result:
Note: it requires at least the version 1.1.0 of the Material Components library.
Make the padding 0dp like this
<com.google.android.material.textfield.TextInputLayout
style="#style/UserTextLayout"
android:layout_height="50dp"
app:boxBackgroundMode="none">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/emailEditText1"
style="#style/UserEditText"
android:layout_width="match_parent"
android:hint="MATRIC NUMBER"
android:inputType="number"
android:maxLines="1"
android:padding="0dp"
android:text="20181766" />
</com.google.android.material.textfield.TextInputLayout>
Here is the result
I managed to remove that left space by making a copy of the original theme of the edittext background
res/drawable/my_edit_text_material.xml
<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetLeft="#dimen/abc_edit_text_inset_horizontal_material"
android:insetRight="#dimen/abc_edit_text_inset_horizontal_material"
android:insetTop="#dimen/abc_edit_text_inset_top_material"
android:insetBottom="#dimen/abc_edit_text_inset_bottom_material">
<selector>
<item android:state_enabled="false" android:drawable="#drawable/abc_textfield_default_mtrl_alpha"/>
<item android:state_pressed="false" android:state_focused="false" android:drawable="#drawable/abc_textfield_default_mtrl_alpha"/>
<item android:drawable="#drawable/abc_textfield_activated_mtrl_alpha"/>
</selector>
</inset>
res/drawable-v21/my_edit_text_material.xml
<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetTop="#dimen/abc_edit_text_inset_top_material"
android:insetBottom="#dimen/abc_edit_text_inset_bottom_material">
<selector>
<item android:state_enabled="false">
<nine-patch android:src="#drawable/abc_textfield_default_mtrl_alpha"
android:tint="?attr/colorControlNormal"
android:alpha="?android:attr/disabledAlpha"/>
</item>
<item android:state_pressed="false" android:state_focused="false">
<nine-patch android:src="#drawable/abc_textfield_default_mtrl_alpha"
android:tint="?attr/colorControlNormal"/>
</item>
<item>
<nine-patch android:src="#drawable/abc_textfield_activated_mtrl_alpha"
android:tint="?attr/colorControlActivated"/>
</item>
</selector>
</inset>
in the two files delete:
android:insetLeft="#dimen/abc_edit_text_inset_horizontal_material"
android:insetRight="#dimen/abc_edit_text_inset_horizontal_material"
Create a new style for your editText and add it as background
/res/values/styles.xml
<resources>
<!-- Other styles . -->
<style name="AppTheme.EditText" parent="Widget.AppCompat.EditText">
<item name="android:background">#drawable/my_edit_text_material</item>
</style>
</resources>
Add the style to your editText
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_lastname"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginLeft="0dp"
android:layout_marginStart="0dp"
android:textColorHint="#color/Cool_Gray_2_C"
app:layout_constraintEnd_toStartOf="#+id/profile_guideline_end"
app:layout_constraintStart_toStartOf="#+id/profile_guideline_start"
app:layout_constraintTop_toBottomOf="#+id/input_layout_firstname" >
<EditText
style="#style/AppTheme.EditText"
android:id="#+id/txfLastname"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="#string/last_name"
android:inputType="textPersonName"
android:textColor="#color/Cool_Gray_2_C"
android:textColorHint="#color/Cool_Gray_2_C"
android:textSize="17sp" />
</android.support.design.widget.TextInputLayout>
That is the way I found removing the left and right space.
I hope help, thanks
The horizontal space on the left and right of the EditText default drawable is controlled by the abc_edit_text_inset_horizontal_material dimension. You can confirm that by looking at the abc_edit_text_material.xml drawable file, which represents AppCompat's default EditText background. To remove the space completely you can just set the dimension to 0 by specifing the dimension with exact same name inside your own project's dimens.xml file:
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
<dimen tools:override="true" name="abc_edit_text_inset_horizontal_material">0dp</dimen>
...
</resources>
However, there is a catch. AppCompat library will only use it's own abc_edit_text_material.xml background if the host OS doesn't support material design. So If you're running your app on Android 4, you'll see that side margins disappear after you add the dimension mentioned above. If, however, you launch your app on say Android 10, you'll see that margins are still there. That is because on newer Android versions, compat library will actually prefer background drawable specified inside the OS itself.
So you need to force all of your EditTexts to use abc_edit_text_material.xml background specified inside the AppCompat library. Luckily, you can do that just by adding one line to your syles.xml file:
styles.xml:
<resources xmlns:tools="http://schemas.android.com/tools">
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
<item name="editTextBackground">#drawable/abc_edit_text_material</item>
...
</style>
...
</resources>
Any Theme.AppCompat.* will do as a parent theme and of course you have to use this theme as your app's theme in order to get any effect.
This solution uses private AppCompat identifiers (Android Studio will complain about this), but I still think this solution is much cleaner than using negative margins.
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/textField_driver_age"
style="#style/Widget.MaterialComponents.TextInputLayout.FilledBox.ExposedDropdownMenu"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:padding="0dp"
android:textColorHint="#color/brown_grey"
app:boxBackgroundColor="#color/white"
app:boxStrokeWidth="0dp"
app:boxStrokeWidthFocused="0dp"
app:endIconMode="none"
app:layout_constraintBottom_toBottomOf="#+id/lable3"
app:layout_constraintStart_toEndOf="#+id/lable3"
app:layout_constraintTop_toTopOf="#+id/lable3">
<AutoCompleteTextView
android:drawablePadding="8dp"
android:drawableEnd="#drawable/ic_email"
android:id="#+id/et_driver_age"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:dropDownHeight="250dp"
android:inputType="none"
android:lines="1"
android:padding="0dp"
android:text="30"
android:textColor="#color/greyish_brown"
android:textSize="12sp" />