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>
Related
I have my layout button as -
<com.google.android.material.button.MaterialButton
android:id="#+id/save_button"
style="#style/buttonView"
android:text="Save"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
In my styles.xml, I have -
<style name="buttonView" parent="Theme.MyTheme">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_marginStart">16dp</item>
<item name="android:layout_marginLeft">16dp</item>
<item name="android:layout_marginTop">16dp</item>
<item name="android:layout_marginEnd">16dp</item>
<item name="android:layout_marginRight">16dp</item>
</style>
In my themes.xml, I have -
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.MyTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">#color/purple_500</item>
<item name="android:textColorPrimary">#color/black</item>
<item name="colorPrimaryVariant">#color/purple_700</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/black</item>
<!--- Accent color. -->
<item name="colorAccent">#color/red</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant
</item>
<!-- Customize your theme here. -->
</style>
</resources>
As per the Android documentation all the UI elements such as FAB, textview, edit text, button take the color accent. So I expect my button to take the colorAccent by default but why does it take colorPrimary. Am I doing anything wrong?
You can check the official doc.
The filled button has the backgroundTint based on the colorPrimary.
Also in your buttonView style you should extend one of the provided styles:
Default style Widget.MaterialComponents.Button
Icon style Widget.MaterialComponents.Button.Icon
Unelevated style. Widget.MaterialComponents.Button.UnelevatedButton
Unelevated icon style Widget.MaterialComponents.Button.UnelevatedButton.Icon
Example:
<style name="buttonView" parent="Widget.MaterialComponents.Button">
</style>
If you want to change the background color you can:
Use the backgroundTint attribute in your custom style
Override the colorPrimary attribute in your custom style using the materialThemeOverlay (best solution)
Example:
<style name="buttonView"parent="Widget.MaterialComponents.Button">
<item name="materialThemeOverlay">#style/CustomButtonThemeOverlay</item>
</style>
<style name="CustomButtonThemeOverlay">
<item name="colorPrimary">#color/...</item>
</style>
For my case this problem comes around when updating android studio to version 4.1.. button background color, always get color primary purple_500 by default. your code does not have problem. I set backgroundTint attribute to null and background attribute to favorite color, or just set backgroundTint to favorite color.
I am using the MaterialButtons where the colors change as per the background tint. I am changing the styles using setTheme(R.style.theme) in the app but the buttons do not change with the theme. More over if I define the background tint in the style the entire apps background is messed up.
example
<style name="AppThemeGreen" parent="AppTheme">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/green</item>
<item name="colorPrimaryDark">#color/green</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:backgroundTint">#color/green</item>
</style>
How do I set the tint color as per the theme I do not want to find the views and use checks progmatically. That would be too tedious how do I do it using styles.
you can create style like this in style.xml file
<style name="PrimaryButton" parent="Theme.AppCompat">
<item name="colorButtonNormal">#color/colorPrimary</item>
<item name="colorControlHighlight">#color/colorAccent</item>
</style>
and give it to button as below
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/click_me"
android:theme="#style/PrimaryButton" />
I am trying to get two different color types for my EditText. One should be "primary" and other should be "accent" color.
I edited my styles.xml file to this:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorAccent">#android:color/white</item>
<!-- colorPrimary is used for the default action bar background -->
<item name="colorPrimary">#color/primaryDark</item>
<!-- colorPrimaryDark is used for the status bar -->
<item name="colorPrimaryDark">#color/primaryDark</item>
</style>
</resources>
However I am only getting my edit handles, and cursorto be solid white, and highlighted selection background 50% white. Just the accent color. This is good it looks like this:
However I also need to get my highlight markers to be 50% of primary, and cursor to solid primary color, and edit handles to also primary color. As seen here, I cannot accomplish this, and the cursor, and edit handles are "white" so they are invisible:
Is there anyway to get two themed EditTexts?
Using android:theme on your EditText:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/EditTextTheme1"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/EditTextTheme2"/>
</LinearLayout>
And your custom EditText theme:
<style name="EditTextTheme1" parent="ThemeOverlay.AppCompat.Light">
<item name="colorPrimary">#color/cardview_dark_background</item>
<item name="colorPrimaryDark">#color/colorPrimary</item>
<item name="colorAccent">#color/colorAccent1</item>
</style>
<style name="EditTextTheme2" parent="ThemeOverlay.AppCompat.Dark">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorAccent</item>
<item name="colorAccent">#color/colorAccent2</item>
</style>
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"/>
I saw that
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:textColorSecondary">#android:color/white</item>
affects both menu ... text color (as in ... icon on the right) but also change the border of an unchecked checkbox. What I've been trying to do is to give them different colors. I tried to give a different style to checkbox but no luck.
<style name="Checkbox" parent="Widget.AppCompat.CompoundButton.CheckBox">
<item name="android:textColorSecondary">#color/blue</item>
</style>
and
<CheckBox
android:id="#+id/activitySettings_checkBox_announce"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusable="false"
android:focusableInTouchMode="false"
android:clickable="false"
style="#style/Checkbox"/>
but seems impossible to give any style to the checkbox because it always use the activity's theme.
You can change color by using following attribute
<style name="CheckBox" parent="Widget.AppCompat.CompoundButton.CheckBox">
<item name="colorControlNormal">#color/checkbox_normal</item> <!-- border color -->
<item name="colorControlActivated">#color/checkbox_activated</item> <!-- fill color -->
<item name="colorControlHighlight">#color/checkbox_highlight</item> <!-- animation color -->
</style>