I am using TextInputLayout and it works fine, according to the design it should look like this:
As you can see from the design, it should be filled and have rounded corners, and also the bottom stroke is inside the component just as I expected and wanted.
The way I did this is by wrapping the TextInputLayout inside a CardView - this clipped it as expected.
However, when I set the Error for the TextInputLayout the under line goes outside the CardView!! like this:
And also, even after I clean the error and it returns to blue, the bottom stroke stays outside the rouded corners of the CardView!
Here is the item as it in the layout:/
<androidx.cardview.widget.CardView. //This will give the rounded corners for filled TextInputLayout
android:id="#+id/email_text_input_wrapper"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
style="#style/Widget.Card.InputWrapper">
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/email_text_input_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:endIconMode="clear_text"
style="#style/Widget.TextInputLayout.EmailInputLayout"
android:hint="#string/email_title">
<com.google.android.material.textfield.TextInputEditText
style="#style/Widget.TextInputEditText.EmailInputEditText"
android:theme="#style/Widget.InputEditText.InputEditText"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:inputType="textEmailAddress"
android:paddingEnd="30dp"/>
</com.google.android.material.textfield.TextInputLayout>
</androidx.cardview.widget.CardView>
Edited:
Here is the style for the CardView and InputTextLayout:
<style name="Widget.Card.InputWrapper" parent="">
<item name="cardElevation">0dp</item>
<item name="cardCornerRadius">14dp</item>
<item name="cardBackgroundColor">#color/black</item>
</style>
<style name="Widget.TextInputLayout.EmailInputLayout" parent="#style/Widget.MaterialComponents.TextInputLayout.FilledBox">
<item name="boxBackgroundColor">#color/semi_black</item>
<item name="boxStrokeColor">#color/general_primary</item>
<item name="android:textColorHint">#color/gray_placeholder_text</item>
<item name="boxStrokeErrorColor">#color/error</item>
<item name="errorIconDrawable">#null</item>
<item name="hintTextColor">#color/general_primary</item>
<item name="hintTextAppearance">#style/TextAppearance.Form.Title</item>
<item name="errorTextAppearance">#style/TextAppearance.Form.Title.Error</item>
<item name="endIconTint">#null</item>
<item name="endIconDrawable">#drawable/ic_icons_general_form_erase_content</item>
<item name="boxCornerRadiusTopStart">#dimen/components_corner_radius</item>
<item name="boxCornerRadiusTopEnd">#dimen/components_corner_radius</item>
<item name="boxCornerRadiusBottomEnd">#dimen/components_corner_radius</item>
<item name="boxCornerRadiusBottomStart">#dimen/components_corner_radius</item>
</style>
Any help will be appriciated, and if there are missing details I can add any code examples if required.
Related
I want to change/ remove bottom line color. I traying many solution, I was change and remove background form EditText style but its nothing to work.
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/TextInput">
<com.rengwuxian.materialedittext.MaterialEditText
android:id="#+id/etMobileNumber"
android:layout_width="fill_parent"
android:layout_height="55dp"
android:digits="0123456789"
android:hint="#string/enter_receiver_phone_number"
android:inputType="phone"
android:maxLength="11"
android:text=""
android:textSize="18sp"
style="#style/EditText">
</com.rengwuxian.materialedittext.MaterialEditText>
</com.google.android.material.textfield.TextInputLayout>
<style name="TextInput">
<item name="android:textColor">#color/input_text_color</item>
<item name="android:textColorHint">#color/hint_text_color</item>
<item name="android:textSize">11sp</item>
<item name="colorControlNormal">#color/input_text_color</item>
<item name="colorControlActivated">#color/hint_text_color</item>
<item name="android:drawablePadding">20dp</item>
</style>
<style name="EditText">
<item name="android:textSize">18sp</item>
<item name="android:textStyle">normal</item>
<item name="android:background">#drawable/edit_text_bottom_bar</item>
<item name="android:textColor">#color/input_text_color</item>
</style>
Try this:
android:background="#null"
it's very simple to change editText bottom line color programtically,
by adding this line in your activity class :
editText.backgroundTintList = ColorStateList.valueOf(yourColor)
I need to remove underline of TextInputLayout. Its almost removed but showing little parts on start and on the end (black). It shows only when activated Screen below
style:
<style name="EditTextLoginRegister" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
<item name="boxCornerRadiusBottomEnd">8dp</item>
<item name="boxCornerRadiusBottomStart">8dp</item>
<item name="boxCornerRadiusTopEnd">8dp</item>
<item name="boxCornerRadiusTopStart">8dp</item>
<item name="boxStrokeWidth">0dp</item>
<item name="boxStrokeColor">#android:color/transparent</item>
<item name="boxBackgroundColor">#color/grey</item>
<item name="android:textColorHint">#color/greyLight2</item>
<item name="startIconTint">#color/greyLight2</item>
<item name="endIconTint">#color/greyLight2</item>
<item name="hintTextColor">#color/violet</item>
</style>
and the TextInputLayout:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/tl_email_login"
style="#style/EditTextLoginRegister"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="24dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="24dp"
android:hint="#string/e_mail"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tv_header_login"
app:startIconDrawable="#drawable/ic_user">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/et_email_login"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
android:textColor="#color/greyLight" />
</com.google.android.material.textfield.TextInputLayout>
Try adding boxStrokeWidthFocused to your style
<style name="EditTextLoginRegister" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
<!-- Other attributes -->
<item name="boxStrokeWidthFocused">0dp</item>
</style>
Admittedly, this is the most difficult part -> styling Material design views.
In Android Studio, it is possible to get AutoComplete options, and I usually go through the complete list and try out various items.
This question already has answers here:
how to change color of TextinputLayout's label and edittext underline android
(16 answers)
Closed 2 years ago.
i need to change the color but i dont know how to do it. Can you help me?
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/contraseña"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="440dp"
android:layout_marginEnd="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Contraseña"
android:inputType="textPersonName" />
</com.google.android.material.textfield.TextInputLayout>
enter image description here
I want to change the grey color to white.
For Changing the border color and hintTextColor, you can use
app:boxStrokeColor="your color"
app:hintTextColor="your color" /*This changes the color of hint when it's collapsed
and moved to top that's when user enters a character.*/
app:textColorHint="your color" //This is the text color of uncollapsed hint that's the default state.
Furthermore, if you want to create a style then this is the complete style I use which you can modify as you need.
<style name="TextInputLayoutAppearanceOutLined" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="hintTextAppearance">#style/HintText</item>
<item name="helperTextTextAppearance">#style/HelperText</item>
<item name="counterTextAppearance">#style/HelperText</item>
<item name="android:textColor">#color/dark_grey</item>
<item name="android:textColorHint">#color/dark_grey</item>
<item name="hintTextColor">#color/colorAccent</item>
<item name="boxStrokeColor">#color/colorAccent</item>
<item name="startIconTint">#color/colorAccent</item>
<item name="endIconTint">#color/colorAccent</item>
<item name="boxBackgroundColor">#color/white</item>
<item name="boxCornerRadiusBottomEnd">10dp</item>
<item name="boxCornerRadiusBottomStart">10dp</item>
<item name="boxCornerRadiusTopEnd">10dp</item>
<item name="boxCornerRadiusTopStart">10dp</item>
<item name="boxStrokeWidthFocused">2dp</item>
<item name="hintEnabled">true</item>
<!--<item name="hintAnimationEnabled">true</item>-->
</style>
These are the style elements to change HelperText or HintText apperance:
<style name="HintText" parent="TextAppearance.Design.Hint">
<item name="android:textSize">12sp</item>
</style>
<style name="HelperText" parent="TextAppearance.Design.HelperText">
<item name="android:textSize">12sp</item>
</style>
And set it to TextInputlayout as style="#style/TextInputLayoutAppearanceOutLined". Whatever mentioned in the style, you can use it in XML layout tag as well.
Also, the official docs of Material TextInputLayout are very important and easy to understand unlike the developer docs of Android and you should read them once to know more about it here.
In my app I get a color scheme for the app from the server. I update colors for all app views according to the server settings. My question is related to updating colors of EditText in the selected state:
I can change a background color of selection, using the editText.setHighlightColor() method, but can I somehow change a color of blue drag views at the left and right bottom corners? I can't change the color, using the colorAccent style attribute, as I get the color from the server at runtime. Can I change the drag views dynamically?
Here is full example, custom TextInputLayout colors:
in your custom *.xml file, check properties style and android:theme
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/txtConfirmPassword"
style="#style/TextInputLayoutStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="9dp"
android:hint="#string/confirm_password_hint"
android:importantForAutofill="no"
app:hintAnimationEnabled="false"
app:hintEnabled="false"
app:passwordToggleEnabled="true">
<com.google.android.material.textfield.TextInputEditText
style="#style/TextInputEditTextStyle"
android:layout_width="match_parent"
android:layout_height="48dp"
android:hint="#string/password_hint"
android:inputType="textPassword"
android:singleLine="true"
android:theme="#style/TextInputEditTextTheme" />
</com.google.android.material.textfield.TextInputLayout>
in your themes.xml file
<style name="TextInputEditTextStyle">
<item name="android:textColor">#color/main_text</item>
</style>
<style name="TextInputEditTextTheme">
<item name="android:textColorHighlight">#color/gray2</item> <!-- background of selected text -->
<item name="android:colorControlActivated">#color/main_text</item> <!-- cursor -->
</style>
you can custom TextInputLayout's border, by adding this to themes.xml
<style name="TextInputLayoutStyle" parent="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
<item name="boxStrokeColor">#color/text_input_layout_tint</item>
<item name="boxStrokeWidth">1dp</item>
<item name="boxStrokeWidthFocused">1dp</item>
<item name="boxCornerRadiusBottomEnd">8dp</item>
<item name="boxCornerRadiusBottomStart">8dp</item>
<item name="boxCornerRadiusTopStart">8dp</item>
<item name="boxCornerRadiusTopEnd">8dp</item>
</style>
file #color/text_input_layout_tint:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/action_yes" android:state_focused="true" />
<item android:color="#color/stroke" />
</selector>
I am trying to put two text view within the circular progress bar as shown in the picture below. These two text should be aligned with center of the circular progress bar.
But the unwanted padding in text view which prevents me to align the text into the center of the circular progress bar. This is what i get.
here is my layout file:
<FrameLayout
android:id="#+id/onboarding_activity_progress_layout"
android:layout_gravity="center_horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp">
<com.locationlabs.finder.android.core.ui.CircularProgressBar
android:id="#+id/onboarding_activity_progress_bar"
android:layout_gravity="center"
android:padding="10dp"
android:layout_width="120dp"
android:layout_height="120dp"
app:progressColor="#color/progress_bar_color"
app:backgroundColor="#color/progress_bar_background_color"
app:progressBarWidth="10dp"
tools:progress="60"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:includeFontPadding="false"
android:layout_gravity="center">
<TextView
android:id="#+id/number_of_remaining_steps"
style="#style/OnboardingNumberOfRemainingStepText"
tools:text="2"/>
<TextView
android:id="#+id/remaining_number_of_steps"
style="#style/OnboardingRemainingStepText"
tools:text="steps left"/>
</LinearLayout>
</FrameLayout>
Here is the styling:
<style name="OnboardingNumberOfRemainingStepText">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_gravity">center_horizontal</item>
<item name="android:fontFamily">sans-serif</item>
<item name="android:textSize">40sp</item>
<item name="android:textColor">#color/dark_grey</item>
<item name="android:includeFontPadding">false</item>
</style>
<style name="OnboardingRemainingStepText">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_gravity">center_horizontal</item>
<item name="android:fontFamily">sans-serif-light</item>
<item name="android:textSize">16sp</item>
<item name="android:textColor">#color/dark_grey</item>
<item name="android:textStyle">normal</item>
</style>
I was told android:includeFontPadding can help reduce the padding but it doesn't help that much. I also tried with the single textView with Spannable but I get almost the similar result. I tried with negative margin but that didn't work and it is also not reliable.
When you transfer styling attributes of a TextView to XML, TextView might render in an unexpected way. This is because the default styling for TextView is applied in a layout file which is overridden when you use style attribute in it.
You can try using parent="android:TextAppearance" in the style defined for a TextView to ensure you inherit the pre-defined styles for the TextView.
Example:
Let me know if it worked for you!