How can I make permanent underline for an EditText, with ability of color change after being focused?
I haven't found an answer in another topics.
I would like to achieve something like that:
You can use custom style for your EditText in style.xml like this -
<!-- Edit text -->
<style name="editTextStyle" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:textSize">#dimen/auth_text_paragraph_little</item>
<item name="android:layout_gravity">left</item>
<item name="android:focusable">true</item>
<item name="colorControlNormal">#color/editUnderLine</item>
<item name="colorControlActivated">#color/colorAccent</item>
<item name="colorControlHighlight">#color/colorAccent</item>
<item name="android:textColorHint">#color/hint</item>
</style>
#color/editUnderLine is the name of color you want to use from color.xml file as like as string.xml file and dimen.xml file
and use this custom style in your XML layout-
<EditText
android:id="#+id/edt_phone_number"
style="#style/editTextStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/auth_margin_half"
android:padding="#dimen/auth_margin_half_plus"
android:fontFamily="#string/auth_font_family_regular"
android:hint="#string/auth_mobile_number"
android:inputType="phone"/>
Related
So I have the following app theme:
<!-- Base application theme. -->
<style name="Theme.Base.App" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">#color/DeepSkyBlue</item>
<item name="colorPrimaryVariant">#color/DeepSkyBlueVariant</item>
<item name="colorOnPrimary">#color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">#color/teal_200</item>
<item name="colorSecondaryVariant">#color/teal_700</item>
<item name="colorOnSecondary">#color/white</item>
<!-- Background color of the entire window/screen-->
<item name="android:windowBackground">#color/GhostWhite</item>
<!-- This defines the default style for the text-input layouts: outlined
In case there is mixture of text-input layouts
e.g. exposed dropdown and outlined, then the exposed dropdown style must be defined in the according layout file
-->
<item name="textInputStyle">
#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox
</item>
<!-- This doesn't work. Neighter the textSize nor the textColor get changed....
-->
<item name="android:autoCompleteTextViewStyle">
#style/AutoCompleteTextViewMediumStyle
</item>
</style>
<style name="AutoCompleteTextViewMediumStyle" parent="Widget.AppCompat.AutoCompleteTextView">
<item name="android:textSize">#dimen/text_medium</item>
<item name="android:textColor">#color/design_default_color_error</item>
</style>
And my example fragment layout looks like this:
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/layout_margin_default"
android:hint="#string/vehicle_type"
android:labelFor="#id/autocomplete_textview_vehicle_type"
app:startIconDrawable="#drawable/baseline_commute_24">
<AutoCompleteTextView
android:id="#+id/autocomplete_textview_vehicle_type"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="none" />
</com.google.android.material.textfield.TextInputLayout>
What I want basically is to set the textsize of every appearing AutoCompleteTextView to lets say 14sp and the TextInputLayout should be outlined.
The issue is that the style item android:autoCompleteTextViewStyle doesn't affect any AutoCompleteTextView whatsoever. However, the funny thing is that the style item textInputStyle work's like a charm, as the default TextInputLayout would appear in outlined form without defining the style in the fragment layout file.
So my question ist:
Could it be that the style item: android:autoCompleteTextViewStyle is deprecated or that the style of the AutoCompleteTextView must be defined directly inside the layout file?
If u want to change the text size, text color or whatsoever, overriding the theme for the TextInputLayout is the way to go.
Example:
<item name="textInputStyle">
#style/TextInputThemeStyle
</item>
<style name="TextInputThemeStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="materialThemeOverlay">#style/ThemeOverlay.Material3.TextInputEditText.OutlinedBox.ThemeStyle</item>
</style>
<style name="ThemeOverlay.Material3.TextInputEditText.OutlinedBox.ThemeStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="android:textSize">your text size.</item>
<item name="android:textColor">your text color</item>
</style>
I am changing color of MaterialTimePicker buttons text by changing colorPrimary of my time picker style. But when I change colorPrimary - chip in selected state also changes it's color.
What I want to achive is to make Ok and Cancel buttons text white, and selected chip leave Blue. On the screen my colorPrimary is Blue.
Is there a way to change buttons text color independently?
<style name="TimePicker" parent="#style/ThemeOverlay.MaterialComponents.TimePicker">
<item name="colorPrimary">#color/blue</item>
<item name="colorSurface">#color/dark_grey</item>
<item name="colorOnSurface">#color/light_grey</item>
<item name="colorOnPrimary">#color/white</item>
<item name="colorOnSecondary">#color/colorAccent</item>
<item name="chipStyle">#style/chipStyle</item>
<item name="materialClockStyle">#style/clockStyle</item>
<item name="imageButtonStyle">#style/Widget.MaterialComponents.TimePicker.ToggleButton</item>
</style>
<style name="chipStyle" parent="Widget.MaterialComponents.TimePicker.Display">
<item name="android:textColor">#color/selector_time_picker_chip_text_color</item>
</style>
I think i found a method.
From the source code we can see that these two buttons (OK and CANCEL) are using borderlessButtonStyle :
<Button
android:id="#+id/material_timepicker_cancel_button"
style="?attr/borderlessButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:layout_marginEnd="8dp"
android:minWidth="72dp"
android:text="#android:string/cancel"
app:layout_constraintEnd_toStartOf="#id/material_timepicker_ok_button"
app:layout_constraintTop_toTopOf="#id/material_timepicker_mode_button" />
So we can simply override the borderlessButtonStyle style in the TimePicker style to change the colors. Like this :
themes.xml :
<style name="ThemeOverlay.App.TimePicker" parent="ThemeOverlay.MaterialComponents.TimePicker">
<item name="borderlessButtonStyle">#style/borderlessButtonStyle</item>
</style>
<style name="borderlessButtonStyle" parent="Widget.MaterialComponents.Button.TextButton">
<item name="android:textColor">#color/white</item>
</style>
then in the end add this line in your main app's theme :
<style name="Theme.StackOverflow" parent="Theme.MaterialComponents.Light.NoActionBar">
...
<item name="materialTimePickerTheme">#style/ThemeOverlay.App.TimePicker</item>
...
</style>
This will work. Please feel free to improve my answer .
I use this in my theme now I am wondering if possible without using theme either programmatically changing colors of textinputlayout
or I can change in xml still without using theme, as I need to fetch colors dynamically and I write code for that or do databinding in xml.
<item name="colorControlActivated">#color/primaryTextColor</item>
<item name="android:textColorHint">#color/primaryTextColor</item>
<item name="android:textColor">#color/primaryTextColor</item>
<item name="android:editTextColor">#color/primaryTextColor</item>```
Yes, we can use setBackgroundColor().
But in your case I think you need to build your own style, here is an example:
Creating TextInputLayout Theme
Let's define a couple of text Styles that will be used as part of the theme. These styles correspond to the different texts used, such as the Hint and Error texts.
<style name="ErrorText" parent="TextAppearance.AppCompat">
<item name="android:textColor">#android:color/red</item>
<item name="android:textSize">16sp</item>
</style>
<style name="HintText" parent="TextAppearance.AppCompat">
<item name="android:textColor">#android:color/white</item>
<item name="android:textSize">14sp</item>
</style>
Then, we create our TextInputLayout theme, referencing the above:
<style name="TextInputLayoutAppearance" parent="Widget.Design.TextInputLayout">
<!-- reference our hint & error styles -->
<item name="hintTextAppearance">#style/HintText</item>
<item name="errorTextAppearance">#style/ErrorText</item>
<item name="android:textColor">#color/user_input_color</item>
<item name="android:textColorHint">#color/unfocused_color</item>
<item name="colorControlNormal">#color/white</item>
<item name="colorControlActivated">#color/blue</item>
<item name="colorControlHighlight">#color/green</item>
</style>
And for the last step, we build our layout.xml using the android:theme attribute with the style we defined above:
<android.support.design.widget.TextInputLayout
android:theme="#style/TextInputLayoutAppearance"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/hint_email"/>
</android.support.design.widget.TextInputLayout>
I need to change color of materials flat/borderless button when the user clicks on it. My current setup works for raised buttons, but doesn't work for the borderless button.
Style I use, the colorControlHighlight should change the color when pressed?:
<style name="PrimaryFlatButton" parent="Widget.AppCompat.Button.Borderless.Colored">
<item name="colorButtonNormal">#color/primary_color</item>
<item name="colorControlHighlight">#color/primary_color_dark</item>
<item name="colorAccent">#color/primary_color</item>
<item name="android:textColor">#color/white_color</item>
Layout item:
<Button
android:id="#+id/Btn_SignUp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:theme="#style/PrimaryFlatButton" />
Why does raised buttons work but not borderless?
What you need to change is something similar to this
In styles.xml put this
<style name="ButtonTheme" parent="Theme.AppCompat.Light">
<item name="colorControlHighlight">#color/button_highlight</item>
<item name="colorButtonNormal">#color/colorPrimaryDark</item>
<item name="colorControlActivated">#color/button_highlight</item>
</style>
and in xml layout for Button add this as the button theme
<Button
android:id="#+id/sign_in_button"
android:theme="#style/ButtonTheme"
//Other parameters as usual
/>
Change the parent name as follow : (without the "Borderless.Colored")
<style name="PrimaryFlatButton" parent="Widget.AppCompat.Button">
<item name="colorButtonNormal">#color/primary_color</item>
<item name="colorControlHighlight">#color/primary_color_dark</item>
<item name="colorAccent">#color/primary_color</item>
<item name="android:textColor">#color/white_color</item>
</style>
and then set it as "android:theme" like you just did.
I am trying to apply a button text color by default in styles.xml
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="AppTheme">
<item name="android:windowFullscreen">true</item>
<item name="android:windowBackground">#color/black</item>
<item name="android:textColor">#color/green</item>
</style>
How do I make the style change button color, and apply throughout the entire application? My mainfest includes:
<application
android:icon="#drawable/ic_launcher"
android:label="Hack the World"
android:theme="#style/AppTheme">
This changes all text (such as a TextView), but does not change the text in a button. If I use the ColorThemes style from above and place it in the xml for the button like this:
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:onClick="loadSavedgame"
android:text="Load Saved Game"
android:textColor="#color/green" />"
Then it works perfectly. Why doesn't this apply universally because of the style? All different versions of styles.xml have the same code.
I eventually discovered that a button is, in fact, a 9-patch image that is located at #android:drawable/btn_default in order to change the background you must modify this image. In order to change button text color I had to set a button widget style and import it into my app theme like so:
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar" >
<item name="android:windowFullscreen">true</item>
<item name="android:windowBackground">#color/black</item>
<item name="android:textColor">#color/green</item>
<item name="android:buttonStyle">#style/ButtonText</item>
</style>
<style name="ButtonText" parent="#android:style/Widget.Button">
<item name="android:textColor">#color/green</item>
<item name="android:background">#android:drawable/btn_default</item><!-- only way to change this is to change the src image -->
<item name="android:layout_width">80.0px</item>
<item name="android:layout_height">40.0px</item>
</style>
</resources>