Seperate Toolbar action menu style and Checkbox style - android

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>

Related

Using android:autoCompleteTextViewStyle in theme.xml

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>

"android:gravity" for custom button is not applying when defined in styles.xml

I just can't center (vertically and horizontally) text in a Button I defined in styles.xml (works properly when all attributes are in layout)
Originally all attributes were set directly in the layout, but I have lots of fragments where all buttons are the same. When Button is fully declared in the layout I don't even need to specify a "gravity" value, text is automaticaly centered.
I tried to create a style for some attributes but I lost text centering and "android:gravity="center"" does not work, in the style and/or in the layout
styles.xml
<!-- GENERAL - BUTTON -->
<style name="Widget.AppCompat.Button.one_line">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">50dp</item>
<item name="android:paddingStart">20dp</item>
<item name="android:paddingEnd">20dp</item>
<item name="android:paddingBottom">20dp</item>
<item name="android:fontFamily">#font/roboto_condensed_bold</item>
<item name="android:textStyle">bold</item>
<item name="android:textColor">#color/white</item>
<item name="android:textSize">#dimen/default_text_size</item>
<item name="android:gravity">center_vertical</item>
</style>
myLayout.xml
<android.support.constraint.ConstraintLayout>
...
<Button
android:id="#+id/btn_back"
style="#style/Widget.AppCompat.Button.one_line"
android:background="#drawable/border_green_full"
android:text="#string/retour"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<android.support.constraint.ConstraintLayout>
I would expect the text vertically centered. What am I missing ?
In your case just remove the:
<item name="android:paddingBottom">20dp</item>
Better use a parent style:
<style name="Widget.AppCompat.Button.one_line" parent="#style/Widget.AppCompat.Button">
...
</style>
The default value in this case is:
<item name="android:gravity">center_vertical|center_horizontal</item>
In general:
Originally all attributes were set directly in the layout, but I have lots of fragments where all buttons are the same
If you would like to centralize the style for all the buttons in your app, avoiding to specify the style attribute in any buttons in the layouts just use:
with a Material Theme the materialButtonStyle attribute in your app theme:
Something like:
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light">
...
<item name="materialButtonStyle">#style/Widget.MaterialComponents.Button</item>
</style>
with an AppCompat theme use the buttonStyle attribute:
Something like:
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
...
<item name="buttonStyle">#style/Widget.AppCompat.Button</item>
</style>
If you would like to customize the style, define the parent style with Widget.MaterialComponents.Button/Widget.AppCompat.Button.
I made a mistake like #GiddyNaya said, obviously add padding_bottom puts the text up in the button (I wanted to add margin, not padding...)

Change background tint as per style

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

Two color types for EditText

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>

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.

Categories

Resources