I'm trying to remove all padding of a TextInputLayout and a TextInputEditText, but with padding=0dp the line at the bottom of the TextInputEditText keeps it padding left and right. How I can remove this padding?
This is the xml code that I've used.
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/ti_input_otp"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:hint="#string/zp_otpfragment_input_otp"
android:padding="0dp"
android:theme="#style/TextInputLayout"
app:hintTextAppearance="#style/FloatingLabel"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_input_otp_description">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/et_input_otp"
android:layout_width="match_parent"
android:layout_height="#dimen/text_input_layout_height"
android:layout_marginTop="16dp"
android:ems="10"
android:gravity="start|center_vertical"
android:imeOptions="actionNext"
android:importantForAutofill="no"
android:inputType="numberSigned"
android:labelFor="#string/zp_otpfragment_input_otp"
android:lines="1"
android:padding="0dp"
android:singleLine="true"
android:textSize="#dimen/text_info_size"
android:theme="#style/InputText" />
</com.google.android.material.textfield.TextInputLayout>
The styles are:
<style name="FloatingLabel" parent="#android:style/TextAppearance">
<item name="android:textColor">#color/colorPrimary</item>
</style>
<style name="TextInputLayout" parent="AppTheme">
<item name="boxStrokeColor">#color/colorPrimary</item> <!-- Line Color -->
<item name="android:textColorHint">#color/colorGray</item> <!-- Hint Color -->
<item name="boxStrokeWidth">1dp</item>
<item name="boxBackgroundColor">#color/colorCeruleanBlue</item>
</style>
<style name="InputText" parent="AppTheme">
<item name="android:textColor">#color/colorPrimary</item>
<item name="android:backgroundTint">#color/colorCeruleanBlue</item>
<item name="colorControlNormal">#color/colorCeruleanBlue</item> <!-- cursor y línea normal-->
<item name="colorControlActivated">#color/colorAccent</item> <!-- cursor y línea con foco-->
<item name="colorControlHighlight">#color/colorAccent</item>
</style>
Thank you
You can use your own custom style for TextInputLayout as below:
Your layout:
<com.google.android.material.textfield.TextInputLayout
....
android:hint="Your hint text"
style="#style/My.TextInputLayout.Theme" >
Then define your custom theme as below:
<style name="My.TextInputLayout.Theme" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
<item name="materialThemeOverlay">#style/MyThemePadding</item>
</style>
<style name="MyThemePadding">
<item name="editTextStyle">#style/MyTextInputEditText_padding</item>
</style>
<style name="MyTextInputEditText_padding" parent="#style/Widget.MaterialComponents.TextInputEditText.FilledBox">
<!-- Set left and right padding here -->
<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>
<!-- Set top and bottom padding here -->
<item name="android:paddingTop">28dp</item>
<item name="android:paddingBottom">12dp</item>
</style>
Related
I am trying to make the input text inside an editText come out at the bottom of it. When I use , <item name="android:gravity">bottom</item> the hint changes its position but the input text does not.
This is my xml code:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/registrationUsernameEditTextLayout"
style="#style/grayEditTextLayoutHelperText"
android:layout_width="0dp"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:hint="#string/username"
app:helperTextTextColor="#color/green"
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.35">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/registrationUsernameEditText"
style="#style/grayEditText"
android:layout_width="match_parent"
android:inputType="text" />
</com.google.android.material.textfield.TextInputLayout>
<style name="grayEditTextLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="android:layout_height">55sp</item>
<item name="hintTextColor">#color/gray</item>
<item name="android:textColorHint">#color/gray</item>
<item name="boxStrokeColor">#color/text_edit_layout_outline_color</item>
<item name="strokeWidth">2sp</item>
<item name="backgroundTint">#null</item>
<item name="boxCornerRadiusBottomEnd">7sp</item>
<item name="boxCornerRadiusBottomStart">7sp</item>
<item name="boxCornerRadiusTopEnd">7sp</item>
<item name="boxCornerRadiusTopStart">7sp</item>
</style>
<style name="grayEditText">
<item name="android:textColor">#color/gray_white</item>
<item name="android:textSize">14sp</item>
<item name="android:textCursorDrawable">#null</item>
<item name="android:layout_height">50sp</item>
<item name="android:gravity">bottom</item>
</style>
<style name="grayEditTextLayoutHelperText" parent="grayEditTextLayout">
<item name="android:layout_height">70sp</item>
</style>
I want to set custom style on TextInputLayout globally as:
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.BudgetTracker" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<!-- Primary brand color. -->
...
<!-- Secondary brand color. -->
...
<!-- Status bar color. -->
...
<!-- Customize your theme here. -->
<item name="fontFamily">#font/regular</item>
<!-- TextInputLayout-->
<item name="textInputStyle">#style/Widget.MyNiceAppName.TextInputLayout.OutlinedBox</item>
</style>
<style name="Widget.MyNiceAppName.TextInputLayout.OutlinedBox" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="android:imeOptions">actionNext</item>
<item name="android:maxLines">1</item>
</style>
</resources>
and my fragment layout is
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/outlinedTextField"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_marginTop="32dp"
android:hint="#string/label_email"
android:inputType="textEmailAddress"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/acll">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
but it never works. Any suggestions for mentioned issue resolution is highly appreciated.
You have to apply these attributes to TextInputEditText not the TextInputLayout.
In your case you can use:
<style name="Widget.MyNiceAppName.TextInputLayout.OutlinedBox" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="materialThemeOverlay">
#style/ThemeOverlay.App.TextInputEditText.OutlinedBox
</item>
</style>
<style name="ThemeOverlay.App.TextInputEditText.OutlinedBox" parent="ThemeOverlay.MaterialComponents.TextInputEditText.OutlinedBox">
<item name="editTextStyle">#style/Widget.App.TextInputEditText.OutlinedBox</item>
</style>
<style name="Widget.App.TextInputEditText.OutlinedBox" parent="Widget.MaterialComponents.TextInputEditText.OutlinedBox">
<item name="android:imeOptions">actionNext</item>
<item name="android:maxLines">1</item>
</style>
Also you can you to add the android:inputType="textEmailAddress" to the TextInputEditText:
<com.google.android.material.textfield.TextInputEditText
android:inputType="textEmailAddress"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
I am programming a view of TextInputLayout
My style.xml is :
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="MyTextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
<item name="boxStrokeColor">#color/colorPrimary</item>
<item name="hintTextColor">#color/colorPrimary</item>
<item name="boxBackgroundColor">#android:color/white</item>
<item name="boxStrokeWidth">2dp</item>
</style>
</resources>
My color overrides in color.xml are:
<color name="mtrl_textinput_default_box_stroke_color" tools:override="true">#c2261a</color>
My TextInput Layout is:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/weightInput"
style="#style/MyTextInputLayoutStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:layout_marginBottom="15dp"
android:hint="#string/hint_weight"
app:errorEnabled="true"
app:helperTextEnabled="false"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textViewTitle">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:imeOptions="actionDone"
android:importantForAutofill="no"
android:inputType="numberDecimal"
android:maxLength="5"
android:maxLines="1"
android:singleLine="true"
android:textAlignment="center"
android:textColor="#color/colorPrimary" />
</com.google.android.material.textfield.TextInputLayout>
And the final result is
As we can see the background color of the hint text is transparent. How can I find that view.
I tried that style without success:
My style.xml is :
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="HintText" parent="TextAppearance.Design.Hint">
<item name="android:textColor">#color/colorPrimary</item>
<item name="android:background">#android:color/white</item>
</style>
<style name="MyTextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
<item name="boxStrokeColor">#color/colorPrimary</item>
<item name="hintTextColor">#color/colorPrimary</item>
<item name="hintTextAppearance">#style/HintText</item>
<item name="boxBackgroundColor">#android:color/white</item>
<item name="boxStrokeWidth">2dp</item>
</style>
</resources>
Updating to material components 1.4.0-alpha01 resolves this issue.
This is the commit responsible: https://github.com/material-components/material-components-android/commit/6015a4e901dc55a02f86e12703820d520684f95e
Its Works for me.. I wish its also works for you..
<EditText
android:layout_width="match_parent"
android:layout_height="50dp"
android:textSize="14sp"
android:hint="Add Your Text Watermark"
android:textColorHint="#color/yellowcolor" // this line can change hint text color
android:textColor="#color/yellowcolor"
android:fontFamily="#font/inter_light"
android:textAlignment="center"/>
This is to change the line color of edit text.
android:backgroundTint="#color/colorPrimaryDark"
sample code:
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:backgroundTint="#color/colorPrimaryDark"
android:imeOptions="actionNext"
tools:text="Full name" />
I am using a Textinputlayout and edittext inside it, problem is when I set the error to the textinputlayout at the time of validations , it changes the color of my hint label also to red. I want to put another color instead of that red color when error comes.Only the underline color and error text should turn to red.
above shown in the pic is the problem, I dont want the email label with red color.
Below is my code.
xml file
<android.support.design.widget.TextInputLayout
android:layout_marginTop="30dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginBottom="15dp"
app:errorTextAppearance="#style/error_appearance"
app:hintTextAppearance="#style/TextLabel1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/et1"
android:padding="0dp">
<EditText
android:id="#+id/email"
android:hint="Email"
android:textColorHint="#3F4B5B"
android:maxLines="1"
android:inputType="text"
android:textSize="15sp"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.TextInputLayout>
#java file
#Declarations
private TextInputLayout emailerror;
private EditText Email;
#On create
Email=(EditText) findViewById(R.id.email);
emailerror=(TextInputLayout) findViewById(R.id.et1);
#Inside validation method
emailerror.setError("Enter a valid email");
Style.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Base.Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="AppTheme.NoActionBar" parent="Base.Theme.AppCompat.Light.DarkActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
TextInputLayout text color
<item name="colorControlNormal">#e0e0e0</item>
<item name="colorControlActivated">#52AF44</item>
<item name="android:textColorHint">#3F4B5B</item>
<item name="android:windowFullscreen">true</item>
</style>
<!-- <style name="error" parent="#android:style/TextAppearance">
<item name="android:textColor">#ff0000</item> <!–apply the color you wat here –>
<item name="android:textColorHint">#3E4A58</item>
<!– <item name="android:textColorHint">#3a52a6</item>–>
<!– <item name="android:textSize">12dp</item>–>
</style>-->
<!--<style name="Widget.Design.TextInputLayout" parent="AppTheme">
<item name="hintTextAppearance">#style/TextLabel1</item>
<item name="errorTextAppearance">#style/error_appearance</item>
<item name="counterTextAppearance">#style/TextAppearance.Design.Counter</item>
<item name="counterOverflowTextAppearance">#style/TextAppearance.Design.Counter.Overflow</item>
</style>-->
<style name="error_appearance" parent="#android:style/TextAppearance">
<item name="android:textColor">#color/colorAccent</item>
</style>
<style name="TextLabel1" parent="TextAppearance.Design.Hint">
<item name="android:textColor">#color/colorPrimaryDark</item>
<item name="android:textSize">16sp</item>
</style>
<style name="ToolbarColoredBackArrow" parent="AppTheme">
<item name="android:textColorSecondary">#color/white</item>
</style>
<style name="EditTextHint" parent="Theme.AppCompat">
<!--<item name="colorAccent">#android:color/white</item>-->
<item name="android:textColorHint">#989898</item>
<!-- <item name="colorControlNormal">#color/BackgroundtWhiteColor</item>
<item name="colorControlActivated">#color/your color</item>
<item name="colorControlHighlight">#color/BackgroundtWhiteColor</item>-->
</style>
<style name="Widget.App.Spinner" parent="#style/Widget.AppCompat.Spinner">
<item name="overlapAnchor">true</item>
<item name="android:background">#drawable/spinner_background</item>
</style>
</resources>
You need to override text input layout default style, with your customstyle.
styles.xml
<resources>
<style name="TextLabel">
<item name="android:textColorHint">#color/colorPrimary</item> <!-- Your Hint Color -->
<item name="android:textSize">18sp</item>
<item name="colorAccent">#color/colorPrimary</item>
<item name="colorControlNormal">#color/colorPrimary</item>
<item name="colorControlActivated">#color/colorPrimary</item>
</style>
<style name="error_appearance" parent="#android:style/TextAppearance">
<item name="android:textColor">#color/colorAccent</item>
</style>
</resources>
activity_layout.xml
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_mobile"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:theme="#style/TextLabel"
app:errorTextAppearance="#style/error_appearance">
<EditText
android:id="#+id/edt_mobile"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/ic_phone_iphone_black_24dp"
android:drawablePadding="8dp"
android:drawableTint="#color/colorPrimary"
android:hint="#string/email"
android:inputType="number"
android:textColor="#000" />
</android.support.design.widget.TextInputLayout>
Focused:
Without focus:
Error message:
Here I am using Floating Label EditText. I need to edit the size of the line under the EditText when I enter any text into that text field. Here I have added the code for your reference
This is the code in XML
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_last"
android:layout_width="match_parent"
android:layout_height="70dp"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:layout_marginTop="10dp">
<EditText
android:id="#+id/input_last"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
android:textSize="12sp"
android:paddingLeft="20dp"
android:theme="#style/MyEditTheme"
android:textColor="#color/white"
android:textColorHint="#color/white"
android:hint="Password" />
</android.support.design.widget.TextInputLayout>
This my style.xml
<resources>
<style name="MyMaterialTheme" parent="MyMaterialTheme.Base">
</style>
<style name="MyMaterialTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="android:textColorHint">#color/white</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="MyEditTheme" parent="MyMaterialTheme.Base">
<!-- Used for the bottom line when not selected / focused -->
<item name="colorControlNormal">#383838</item>
<!-- colorControlActivated & colorControlHighlight use the colorAccent color by default -->
</style>
</resources>
Here I need to reduce the size of the blue line.