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>
Related
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>
How to achieve this below design
I can able to achieve this below design. How can I add a radius to the box
This is my code
<style name="TextInputLayoutStyle" parent="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="boxBackgroundColor">#color/neutralWhite</item>
<item name="boxStrokeColor">#color/secondaryOrange</item>
<item name="hintTextColor">#color/secondaryOrange</item>
<item name="android:textColorHint">#color/neutralDark</item>
<item name="textColor">#color/neutralDark</item>
<item name="errorEnabled">true</item>
<item name="boxCornerRadiusTopEnd">10dp</item>
<item name="boxCornerRadiusTopStart">10dp</item>
<item name="boxCornerRadiusBottomStart">10dp</item>
<item name="boxCornerRadiusBottomEnd">10dp</item>
<item name="hintTextAppearance">#style/HintText</item>
<item name="errorTextAppearance">#style/HintText</item>
</style>
and my XML
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/userId"
style="#style/TextInputLayoutStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:hint="#string/passwordPlaceholder"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/signInHeader">
<com.google.android.material.textfield.TextInputEditText
style="#style/TextInputEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text" />
</com.google.android.material.textfield.TextInputLayout>
Why would I not be able to add margin to the end of this button?
<!--Buttons-->
<androidx.constraintlayout.widget.ConstraintLayout android:id="#+id/arqo_llButtons" android:layout_width="match_parent"
android:layout_height="98dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent"
android:background="#color/white" >
<!--Pay Button-->
<android.widget.Button android:id="#+id/arqo_btnQuickApplyPayment" style="#style/CustomButtonStyle.Success"
android:layout_width="200dp" android:layout_height="60dp" android:layout_marginEnd="16dp"
android:enabled="false" android:text="#string/button_pay" app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<style name="CustomButtonStyle">
<item name="android:layout_height">55dp</item>
<item name="android:layout_width">332dp</item>
<item name="android:layout_margin">5dp</item>
<item name="android:textSize">18sp</item>
<item name="android:gravity">center</item>
<item name="android:paddingTop">5dp</item>
<item name="android:paddingBottom">5dp</item>
<item name="android:paddingEnd">10dp</item>
<item name="android:paddingStart">10dp</item>
<item name="android:clickable">true</item>
<item name="android:drawablePadding">5dp</item>
<item name="android:textColor">#color/border_button_text</item>
<item name="android:background">#drawable/button_border</item>
</style>
<style name="CustomButtonStyle.Success" parent="#style/CustomButtonStyle">
<item name="android:background">#drawable/button_success</item>
</style>
The button here just sits on the very right edge of the constraint layout...
If you want to customize your button with a custom style, your custom style should inherit a button's style.
Something like this :
<style name="CustomStyle" parent="Widget.MaterialComponents.Button">
<!-- Style your custom button here -->
</style>
For more info : Material Button theming
Material3 Button Theming
Removing this line from the CustomButtonStyle in Styles.xml solved the issue:
<item name="android:layout_margin">5dp</item>
I am trying to customize materials TextInpuLayout.OutlinedBox and TextInputEditText.
My current state is like following image
What I want to do is remove the background of the hint label so that it doesn't create that ugly cutout. Like this:
Or if that isn't possible moving the label above the input would also do the trick:
It would be nice if this was achievable using styles so that I could easily apply this to other text input elements as well.
I'm pretty new to android so please be considerate.
Here's the code for the styling:
<style name="MyTheme" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="android:textSize">14sp</item>
<item name="boxCornerRadiusTopStart">#dimen/textInputCornerRadius</item>
<item name="boxCornerRadiusTopEnd">#dimen/textInputCornerRadius</item>
<item name="boxCornerRadiusBottomStart">#dimen/textInputCornerRadius</item>
<item name="boxCornerRadiusBottomEnd">#dimen/textInputCornerRadius</item>
<item name="boxBackgroundColor">#color/primaryDarkColorBackground</item>
<item name="boxStrokeColor">#color/text_input_box_stroke</item>
</style>
<style name="EditTextStyle" parent="Widget.AppCompat.EditText">
<item name="android:background">#null</item>
<item name="android:paddingStart">30dp</item>
</style>
And here is how I define my input in the layout:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/username_layout"
style="#style/MyTheme"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="48dp"
android:layout_marginEnd="48dp"
android:hint="#string/email_or_username"
app:boxBackgroundMode="outline"
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.10">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/username"
style="#style/EditTextStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
I don't think you can obtain it with the TextInputLayout.OutlinedBox style.
It is not exactly what you are looking for:
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.FilledBox.Rounded"
..>
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingStart="30dp"
/>
</com.google.android.material.textfield.TextInputLayout>
With:
<style name="Widget.MaterialComponents.TextInputLayout.FilledBox.Rounded" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
<item name="shapeAppearanceOverlay">#style/Rounded_ShapeAppearanceOverlay.MaterialComponents.TextInputLayout</item>
<item name="boxStrokeColor">#color/input_text_no_underline</item>
</style>
<style name="Rounded_ShapeAppearanceOverlay.MaterialComponents.TextInputLayout" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">50%</item>
</style>
The selector is used to remove the underline:
<?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>
Note: it requires the version 1.1.0 of the library.
Try setting on the TextInputEditText:
android:background="#android:color/transparent"
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: