Develop Reference

How to change MaterialTimePicker's buttons text color independently?

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 .

Material Components Default to colorAccent instead of colorPrimary

My AppTheme in styles.xml looks like this:
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:textColorPrimary">#color/textColorPrimary</item>
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
</style>
I set this in Manifest as:
<application
android:name=".MyApp"
android:allowBackup="true"
android:icon="#mipmap/ic_launcher"
android:label="app_name"
android:roundIcon="#mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="#style/AppTheme"
tools:ignore="GoogleAppIndexingWarning">
According to https://material.io/develop/android/components/
The default color applied to my widgets should be the defined colorPrimary, but mine are picking up colorAccent as the default color. For example, this button:
<com.google.android.material.button.MaterialButton
android:id="#+id/loginButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="56dp"
android:layout_marginEnd="56dp"
android:text="login"
app:cornerRadius="5dp"
app:elevation="0dp"
app:fontFamily="#font/gotham_bold" />
Am I missing a specific config for this project for this to have button to show colorPrimary and not colorAccent?

Use the Material Components Library 1.1.0 or later.
The default style of the MaterialButton is:
<style name="Widget.MaterialComponents.Button" parent="Widget.AppCompat.Button">
<item name="backgroundTint">#color/mtrl_btn_bg_color_selector</item>
<!-- .... -->
</style>
Starting from the version 1.1.0 the #color/mtrl_btn_bg_color_selector is based on the ?attr/colorPrimary:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="?attr/colorPrimary" android:state_enabled="true"/>
<item android:alpha="0.12" android:color="?attr/colorOnSurface"/>
</selector>
In the version 1.0.0 the selector was based on ?attr/colorAccent:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="?attr/colorAccent" android:state_enabled="true"/>
<item android:color="#color/mtrl_btn_bg_color_disabled"/>
</selector>

in this case i believe only the color of text in your button has changed, it has the color value of textColorPrimary.
There is a chance that textColorPrimary and colorAccent are the same

First create btn_style in your styles.xml or themes.xml
<style name="btn_style" parent="Widget.MaterialComponents.Button">
<item name="backgroundTint">#null</item>
</style>
then in you layout apply the style and use the color or drawable that you want
<Button
android:id="#+id/btn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textStyle="bold"
android:background="#color/YOUR_COLOR"
style="#style/btn_style"
android:text="Test"/>

Underline edit text

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"/>

colorControlHighlight doesn't change color of flat button when pressed

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.

In Android, can apply different themes in a single XML layout's TextView at runtime without creating a custom widget?

I've seen similar questions here before, but none of them had a satisfactory answer. Basically, I want to have one layout instead of multiple ones and be able to apply themes at runtime. For example, let's take this layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="SAMPLE HEADING"
style="#style/Heading" />
</LinearLayout>
And the themes and styles are set up as follows:
<style name="AppTheme.Dark" parent="AppTheme">
<item name="android:radioButtonStyle">#style/radioButton.Dark</item>
<item name="android:checkboxStyle">#style/checkbox.Dark</item>
</style>
<style name="AppTheme.Light" parent="AppTheme">
<item name="android:radioButtonStyle">#style/radioButton.Ios</item>
<item name="android:checkboxStyle">#style/checkbox.Ios</item>
</style>
<style name="Heading">
<item name="android:typeface">sans</item>
<item name="android:textStyle">bold</item>
</style>
<style name="Heading.Dark" parent="Heading">
<item name="android:textColor">#color/red</item>
<item name="android:background">#drawable/dark_bg</item>
<item name="android:textSize">16dip</item>
</style>
<style name="Heading.Light" parent="Heading">
<item name="android:textColor">#color/black</item>
<item name="android:background">#drawable/light_bg</item>
<item name="android:textSize">17dip</item>
</style>
So, I want to be able to apply the dark and light Heading styles to that TextView by simply applying the dark or light AppTheme. And I don't want to apply those styles to all TextViews, but only specific ones. I also don't want to do this programmatically because there are way too many TextViews that would need this done.
Is there a way to do that, or do i have to create two identical XML layouts, where one uses the Heading.Light style and the other uses Heading.Dark?

First, your use of parent="..." property is incorrect.
As official docs state:
"If you want to inherit from styles that you've defined yourself, you do not have to use the parent attribute. Instead, just prefix the name of the style you want to inherit to the name of your new style, separated by a period."
So, declaring your style name as Heading.Light is enough to specify that it's parent style is Heading.
Now to your question. Create a res/values/attrs.xml file:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<attr name="myTextViewColor" format="reference|color" />
</resources>
Then in your styles.xml you would declare your theme as follows:
<style name="AppTheme">
<!--parent style. could be overriden by Dark and Light theme -->
</style>
<style name="AppTheme.Dark">
...
<item name="myTextViewColor">#color/red</item>
</style>
<style name="AppTheme.Light">
...
<item name="myTextViewColor">#color/black</item>
</style>
<style name="Heading">
<item name="android:typeface">sans</item>
<item name="android:textStyle">bold</item>
<item name="android:textSize">16dip</item>
</style>
Now when you apply
<TextView ... style="#style/Heading" android:textColor="?myTextViewColor />
everything should work just fine. Just make sure you apply AppTheme.Light or AppTheme.Dark theme in your app (as AppTheme parent theme would not know the value of your custom attribute).
Edit: Also, as user496854 suggested, there's another simple workaround.
Declare headingStyle attr as a reference:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<attr name="headingStyle" format="reference" />
</resources>
Then in our AppTheme.Dark and AppTheme.Light styles we would point to a corresponding heading style:
<style name="AppTheme.Dark">
...
<item name="headingStyle">#style/Heading.Dark</item>
</style>
<style name="AppTheme.Light">
...
<item name="headingStyle">#style/Heading.Light</item>
</style>

I would suggest you to crate a class that extends TextView and apply your style in it. Use this textView where you want textview with this them and simple TextView where you don't need.