I am trying to style CompoundButton.CheckBox using official material.io tutorial:
<style name="Widget.App.CheckBox" parent="Widget.MaterialComponents.CompoundButton.CheckBox">
<item name="buttonTint">#color/button_tint</item>
</style>
and in color/button_tint.xml:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color=">#color/shrine_pink_900" android:state_checked="true"/>
<item android:alpha="0.38" android:color="#color/shrine_pink_100" android:state_enabled="false"/>
<item android:color="#color/shrine_pink_100"/>
</selector>
What I cannot style is the ripple effect color when checked checkbox is pressed:
I see that this color is the default green with transparency and I need to use blue one. Tried to play with checkbox states in selector but without luck.
Official documentation: https://material.io/develop/android/components/checkboxes
Try to override your checkbox theme like this:
first, declare this in your style:
<style name="MyCheckBox" parent="Theme.AppCompat.Light">
<!-- Customize your color as you want here -->
<item name="colorControlNormal">#ADB6AF</item>
<item name="colorControlActivated">#F7F13D</item>
<item name="colorControlHighlight">#F73D</item>
</style>
then apply it to your checkbox:
<CheckBox
...
android:theme="#style/MyCheckBox"/>
Related
I'm trying to style a TextInputLayout:
<style name="AppTheme.TextInputLayout.OutlinedBox" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="boxStrokeColor">#color/text_input_layout_outlined_box_stroke</item>
<item name="hintTextColor">#color/text_input_layout_outlined_box_stroke</item>
</style>
And that's the color selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/green_2" android:state_focused="true" />
<item android:color="#color/green_2" android:state_hovered="true" />
<item android:color="#color/green_2" android:state_enabled="false" />
<item android:color="#color/green_2" />
</selector>
And that's my View:
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:hint="#string/surname">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
Why this works as expected applying to the view:
style="#style/AppTheme.TextInputLayout.OutlinedBox"
And theme is not working:
android:theme="#style/AppTheme.TextInputLayout.OutlinedBox"
I'm not getting the differences between these two...
EDIT: maybe I've found this to avoid repeating for each view:
<item name="textInputStyle">#style/AppTheme.TextInputLayout.OutlinedBox</item>
You can define a style:
<style name="AppTheme.TextInputLayout.OutlinedBox" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="boxStrokeColor">#color/text_input_layout_outlined_box_stroke</item>
<item name="hintTextColor">#color/text_input_layout_outlined_box_stroke</item>
</style>
and apply it to a view with:
<com.google.android.material.textfield.TextInputLayout
style="#style/AppTheme.TextInputLayout.OutlinedBox"
..>
At the same time you can define:
<style name="textInputPrimaryColor" parent="">
<item name="colorPrimary">#color/.....</item>
</style>
and then use it with the android:theme attribute:
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:theme="#style/textInputPrimaryColor"
..>
In this way you can modify the theme attributes for that view and any child views, which is useful for overriding theme color palettes in a specific portion of your interface.
More info here.
In this way you are overriding the colorPrimary attribute in the style Widget.MaterialComponents.TextInputLayout.OutlinedBox.
For example it is the default selector used by the boxStrokeColor.
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="?attr/colorPrimary" android:state_focused="true"/>
<item android:alpha="0.87" android:color="?attr/colorOnSurface" android:state_hovered="true"/>
<item android:alpha="0.12" android:color="?attr/colorOnSurface" android:state_enabled="false"/>
<item android:alpha="0.38" android:color="?attr/colorOnSurface"/>
</selector>
Using the android:theme="#style/textInputPrimaryColor" you can are changing the colorPrimary for this view without extending the style.
You can achieve the same behavior using the materialThemeOverlay attribute in your style:
<style name="My.OutlinedBox" parent="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="materialThemeOverlay">#style/ThemeOverlay.My.OutlinedBox</item>
</style>
with:
<style name="ThemeOverlay.My.OutlinedBox" parent="ThemeOverlay.MaterialComponents.TextInputEditText.OutlinedBox">
<item name="colorPrimary">#color/......</item>
</style>
and then apply it to your view:
<com.google.android.material.textfield.TextInputLayout
style="#style/My.OutlinedBox"
..>
I want all my items with style OutlinedBox to have the box green colored"? I'd like to avoid repeating theme and style for every view...I mean a "global" style that inherit from AppTheme, which is already applied to the whole application in the manifest
Currently there isn't an attribute to define a style only for the TextInputLayout with an OutlinedBox style.
You can only assign a global style for all TextInputLayout views in your app using the textInputStyle attribute in your app theme:
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
...
<item name="textInputStyle">#style/My.OutlinedBox</item>
</style>
Note: it requires the version 1.1.0 of the Material Components Library.
I want to add focus ripple effect to whole RadioButton, but there is something strange is happening to it when I try to use ripple effect with highlight. In the picture, left is what I get and right is what I want:
background_drawable:
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/colorAccent">
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<solid android:color="#android:color/white"/>
</shape>
</item>
</ripple>
styles.xml
<style name="RadioButtonStyle" parent="Widget.AppCompat.CompoundButton.RadioButton">
<item name="android:background">#drawable/radio_button_background</item>
</style>
This happens only If I try to use ripple effect and not if I try to use only shape with selector and state_focused=true as background. For now my workaround is to use warpper View class for RadioButton and set background into it. Is there any way to get background as in the picture but without any additional code? Thanks.
The solution is to set the button attribute to null and set the drawableStart attribute in styles for the radio button:
<style name="RadioButtonStyle" parent="Widget.AppCompat.CompoundButton.RadioButton">
<item name="android:button">#null</item>
<item name="android:drawableStart">#drawable/radio_button_selector</item>
<item name="android:drawablePadding">4dp</item>
<item name="android:background">#drawable/radio_button_background</item>
<item name="android:gravity">center_vertical</item>
<item name="android:paddingStart">8dp</item>
<item name="android:paddingEnd">8dp</item>
<item name="android:paddingTop">11dp</item>
<item name="android:paddingBottom">11dp</item>
</style>
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
<!-- Customize your theme here. -->
<item name="radioButtonStyle">#style/RadioButtonStyle</item>
<item name="android:radioButtonStyle">#style/RadioButtonStyle</item>
</style>
After that focus works as aspected and You can add background to the radio button as You want
The title says it all, looking for the default color value used in TextViews in theme.appcompat.light
tried looking for it in Android studio by hitting ctrl on theme.appcompat.light but it brought me down a rabbit hole that I couldn't find the end of.
Looks like theme.appcompat.light goes all the way up to Platform.AppCompat.Light
By default I'm just going to assume you mean the primary color.
Here's what it looks like:
<style name="Platform.AppCompat.Light" parent="android:Theme.Light">
<item name="android:windowNoTitle">true</item>
...
<!-- Text colors -->
<item name="android:textColorPrimary">#color/abc_primary_text_material_light</item>
<item name="android:textColorPrimaryInverse">#color/abc_primary_text_material_dark</item>
<item name="android:textColorSecondary">#color/abc_secondary_text_material_light</item>
<item name="android:textColorSecondaryInverse">#color/abc_secondary_text_material_dark</item>
<item name="android:textColorTertiary">#color/abc_secondary_text_material_light</item>
<item name="android:textColorTertiaryInverse">#color/abc_secondary_text_material_dark</item>
<item name="android:textColorPrimaryDisableOnly">#color/abc_primary_text_disable_only_material_light</item>
<item name="android:textColorPrimaryInverseDisableOnly">#color/abc_primary_text_disable_only_material_dark</item>
<item name="android:textColorHint">#color/hint_foreground_material_light</item>
<item name="android:textColorHintInverse">#color/hint_foreground_material_dark</item>
<item name="android:textColorHighlight">#color/highlighted_text_material_light</item>
<item name="android:textColorLink">?attr/colorAccent</item>
...
</style>
Inside you'll see abc_primary_text_material_light:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false" android:color="#color/primary_text_disabled_material_light"/>
<item android:color="#color/primary_text_default_material_light"/>
</selector>
Which last but not least defines it's color as:
<color name="primary_text_default_material_light">#de000000</color>
I need to change SwitchCompat's track color.
I've tried this, but it didn't worked for me.
This is code of my XML file
<android.support.v7.widget.SwitchCompat
android:id="#+id/sc_push"
style="#style/switchStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:theme="#style/switchStyle"
app:theme="#style/switchStyle" />
and this is my style.xml file
<style name="switchStyle">
<item name="colorControlActivated">#color/red</item>
<item name="android:colorForeground">#color/gray</item>
</style>
What seems the problem?
In addition, I can't change the activity's color or base application's color. I have to change color for this single view.
Try this code.
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
...
<!-- Active thumb color & Active track color(30% transparency) -->
<item name="colorControlActivated">#color/theme</item>
<!-- Inactive thumb color -->
<item name="colorSwitchThumbNormal">#color/grey300</item>
<!-- Inactive track color(30% transparency) -->
<item name="android:colorForeground">#color/grey600</item>
...
</style>
The better way to do it would be,
Create new resource file as below, switch_track_color.xml, using selector tag.
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#15A215" android:state_checked="true"/>
<item android:color="#BAC7CB" android:state_checked="false"/>
</selector>
Use this in style for SwitchCompat.
<style name="SwitchStyle">
<item name="thumbTint">#ffffff</item>
<item name="trackTint">#color/switch_track_color</item>
</style>
I think this is an easy question, but I haven't been able to find an answer to my specific problem.
I've read this great article and would like to set the background color of the selected item on the Android Dropdown list on the stock ActionBar (I'm not using Sherlock and I'm targetting ICS+), as explained in the image link below:
So far I've set my theme in this way:
<resources>
<style name="AppBaseTheme" parent="android:Theme.Holo.Light">
<item name="android:dropDownListViewStyle">#style/MyDropDownListView</item>
</style>
<style name="MyDropDownListView" parent="android:style/Widget.Holo.ListView.DropDown">
<item name="android:listSelector">#drawable/ad_selectable_background</item>
</style>
</resources>
And this is my ad_selectable_background.xml:
<selector xmlns:android="http://schemas.android.com/apk/res/android"
android:exitFadeDuration="#android:integer/config_mediumAnimTime" >
<item android:state_pressed="true" android:drawable="#android:color/holo_blue_light" />
<item android:drawable="#android:color/transparent" />
</selector>
My dropdown view resource is:
adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
The pressed state works, but when you open the menu no selection is displayed.
I would like to set it to holo_blue_light using the selector, but I'm not able to find the correct syntax using XML.
I'm looking for an XML only answer if it's possible (i.e. not using any code). Thanks!
Apparently, it was quite simple!
I had to edit ad_selectable_background.xml to use the checked state (as I did before, but I was missing the theme below):
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
android:exitFadeDuration="#android:integer/config_mediumAnimTime" >
<item android:state_pressed="false" android:state_checked="true" android:drawable="#android:color/holo_blue_light" />
<item android:state_pressed="true" android:drawable="#android:color/holo_blue_light" />
<item android:drawable="#android:color/transparent" />
</selector>
And then edit the theme by adding the android:spinnerDropDownItemStyle item and disabiling the checkMark (as I didn't want the radio buttons), in this way:
<resources>
<style name="AppBaseTheme" parent="android:Theme.Holo.Light">
<item name="android:dropDownListViewStyle">#style/MyDropDownListView</item>
<item name="android:spinnerDropDownItemStyle">#style/MySpinnerDropDownItem</item>
</style>
<style name="MyDropDownListView" parent="android:style/Widget.Holo.ListView.DropDown">
<item name="android:listSelector">#drawable/ad_selectable_background</item>
</style>
<style name="MySpinnerDropDownItem" parent="android:style/Widget.DropDownItem.Spinner">
<item name="android:background">#drawable/ad_selectable_background</item>
<item name="android:checkMark">#null</item>
</style>
</resources>