I have few checkbox's at my application with different colors.
Now when I applied material design theme checkbox's without style changed their color to "colorControlActivated", checkbox's with style left the same.
Also I wanted to change colors of my other checkbox's without drawables files.
I tried to set style with different "colorControlActivated" color
<style name="CheckBox.Custom" parent="#style/Theme.Material.Blue">
<item name="colorControlActivated">#color/custom_color</item>
</style>
but it's not working, also I tried to create checkbox like:
ContextThemeWrapper ctw= new ContextThemeWrapper(getActivity(), R.style.CheckBox_Info);
Checkbox cb = new CheckBox(ctw);
and color didn't changed.
The same code working with SwitchCompat control.
Do somebody now how to set different colors to checkbox's without drawables?
Thank you!
This did the trick for me. Notice the android namespace.
<style name="CheckBox.Custom" parent="#style/Theme.Material.Blue">
<item name="android:colorControlActivated">#color/custom_color</item>
</style>
You can set color directly in the xml. Use buttonTint for the box: (as of API level 23)
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:buttonTint="#color/CHECK_COLOR" />
You can also do this using appCompatCheckbox v7 for older APIs:
<android.support.v7.widget.AppCompatCheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:buttonTint="#color/COLOR_HERE" />
Add this line in your styles.xml file:
<style>
<item name="android:colorAccent">#color/custom_color</item>
</style>
Related
I have very simple checkbox:
<CheckBox xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/clipboardBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="#drawable/clipboard_checkbox" />
For checked/unchecked I have two different images.
After migration to AndroidX I see default image for Android on devices below API 21.
What I've tried already:
change CheckBox to AppCompatCheckbox (from AndroidX) - nothing changed
set background to checkbox & set android:button="#null" - background is OK, but I still see default image on background (see image below)
Seems that Android completly disrespect button attribute.
I am out of ideas. For Lollipop+ everythink works as it should. Have anyone faced issue like this?
Only change I did was migration to AndroidX :/
In the appcompat theme, the checkBoxStyle below API 21 is defined as
<style name="Base.Widget.AppCompat.CompoundButton.CheckBox" parent="android:Widget.CompoundButton.CheckBox">
<item name="android:button">?android:attr/listChoiceIndicatorMultiple</item>
<item name="buttonCompat">?attr/listChoiceIndicatorMultipleAnimated</item>
<item name="android:background">?attr/controlBackground</item>
</style>
the attr buttonCompat has a default value to show the click animation. The attr buttonCompat take effect and ignore the button attr.
To fix it, the attr buttonCompat must be undefined. In your theme add
<item name="checkboxStyle">#style/MyCheckBox</item>
and add a style
<style name="MyCheckBox" parent="android:Widget.CompoundButton.CheckBox">
<item name="android:button">?android:attr/listChoiceIndicatorMultiple</item>
<item name="buttonCompat">#null</item>
<item name="android:background">?attr/selectableItemBackgroundBorderless</item>
</style>
Also in your values-v21 dir, add this to your theme
<item name="checkboxStyle">?android:attr/checkboxStyle</item>
Change CheckBox to AppCompatCheckBox(AndroidX) and replace android:button to app:buttonCompat
<androidx.appcompat.widget.AppCompatCheckBox
android:id="#+id/clipboardBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/email_sign_in_button"
app:buttonCompat="#drawable/clipboard_checkbox" />
You need to set the button and buttonCompat null for androidx libraries. It will look like below-
<androidx.appcompat.widget.AppCompatCheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="#null"
app:buttonCompat="#null"
android:background="#drawable/cb_pause_resume_selector"
/>
So I am trying to change my app color to blue and some of most the views I have are not willing to cooperate with me.
Here is the image:
Here I want to change the color of the green parts on the spinner, edittext and checkbox views (which are green) to black or blue.
I've looked all over Stack Overflow and I can't find the solution!
Thank you very much, If possible I would like to have a XML solution but I wouldn't mind a programmatic solution!
Add these to your base theme in styles.xml
<item name="colorControlNormal">#color/YOUR_COLOR</item>
<item name="colorControlActivated">#color/YOUR_COLOR</item>
<item name="colorControlHighlight">#color/YOUR_COLOR</item>
Note: The above change will affect the EditTexts and other views probably throughout the application.
If not, and if you are using the AppCompat v22 support library, you can specify the theme in the EditText like: android:theme="#style/Theme.App.Base.
This will ensure the style won't also affect other views in your layouts that you don't want to change
Also if you want to change the above solution, just add another Theme specific to EditTexts and Spinners and apply it to all Spinners if you want
<style name="MyWidgetTheme">
<item name="colorControlNormal">#color/YOUR_COLOR</item>
<item name="colorControlActivated">#color/YOUR_COLOR</item>
<item name="colorControlHighlight">#color/YOUR_COLOR</item>
</style>
and in your EditText, Spinner or any other View, just assign this theme:
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="Demo"
android:lines="1"
android:theme="#style/MyWidgetTheme"
/>
<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:theme="#style/MyWidgetTheme"></Spinner>
Take a look to this resource generator.
Choose your color, the widgets you want to generate and voila! You copy them to your project and reference them in your xmls.
I am making borderless flat button using support library (23.0.1). It works normal on Lollipop. However on pre-Lollipop when I press button Its color changes to colorButtonNormal color like it's a normal button.
I don't think so it's a normal behaviour and focused color should be grey like on Lollipop.
Here's the screenshot from Lollipop and Pre-lollipop.
First normal behaviour on Lollipop:
Borderless button in normal state and focused state on Lollipop
Not normal behaviour on Pre-Lollipop (Desire color is gray like above but it's not):
Borderless button in normal state and focused state on Pre-lollipop
Theme
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
//other stuff
<item name="colorButtonNormal">#color/orangeColor</item>
<item name="buttonBarButtonStyle">#style/BorderlessButtonStyle</item>
</style>
<style name="BorderlessButtonStyle" parent="Widget.AppCompat.Button.Borderless">
<item name="android:textColor">#color/blueTextColor</item>
</style>
And now button in layout:
<Button
android:id="#+id/btnForgotPassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/forgot_your_password"
style="?attr/buttonBarButtonStyle"
/>
Any way to get it write using AppCompat Theme and styles without of making separate Drawables.
Borderless Button works on both Post and Pre Lollipop version with Support Library but there's a small difference between their onPressed color.
Pre-Lollipop: By default onPressed color is same as default Button color set using colorButtonNormal.
Lollipop: By default onPressed color is light grey, which is ideal.
You can make a Borderless Button like this:
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Name"
style="#style/Widget.AppCompat.Button.Borderless"/>
Now If you want to have the same onPressed color on all versions then you can set colorControlHighlight in a new theme and set that theme on Button.
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Name"
android:theme="#style/BorderlessButton"
style="#style/Widget.AppCompat.Button.Borderless"/>
And theme in your style:
<style name="BorderlessButton" parent="Theme.AppCompat.Light">
<item name="colorControlHighlight">YOUR COLOR</item>
</style>
Updated: You can use android:theme attribute for a View since Android 5.0 Lollipop and AppCompat v22.1.0 (and higher).
Adding style="?borderlessButtonStyle" to the Button worked fine for me.
why do you worry with some things just go with this and be free
<Button
android:id="#+id/btnForgotPassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/forgot_your_password"
android:background="#drawable/abc_btn_borderless_material"
/>
and now careless about api stuff
You are using the android implemented style of "buttonBarButtonStyle" since you are calling it via ?atr - use style="#style/BorderlessButtonStyle instead.
Edit: Leave your xml as it is, but you can change it to your wanted behaviour like this:
AppCompatButton button = (AppCompatButton) findViewById(R.id.btnForgotPassword);
ColorStateList colorStateList = new ColorStateList(new int[][] {{0}}, new int[] {0xFF969696});
//969696 is your wanted grey color, just change it
button.setSupportBackgroundTintList(colorStateList);
I am using appcompat v7 material checkbox. My project theme is light blue, so I am assigning light blue for my checkbox checked color in styles.xml as follows
<!--checked color-->
<item name="colorAccent">#color/light_blue</item>
<!--un checked color-->
<item name="android:textColorSecondary">#color/secondary_text</item>
In My layout file
<CheckBox
android:id="#+id/chk_tick"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="#drawable/abc_btn_check_material"
android:layout_gravity="center"/>
Everything works fine with the versions below kitkat's, but the problem arises only with lollipop versions ( By default it is automatically assigning black color ). I really dont know why it is happening. Kindly please help me with your solutions. Thanks in advance
Remove this line:
android:button="#drawable/abc_btn_check_material"
Your CheckBox should be styled automatically, without setting android:button property.
Use AppCombat check box for best result
<android.support.v7.widget.AppCompatCheckBox
android:id="#+id/chkSelected"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/white"
/>
After this go to styles.xml and create new styles as follows
<style name="SampleTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorAccent">#color/colorAccent</item>
<item name="android:textColorSecondary">#color/red</item>
</style>
This is not done yet go to your manifest xml
<activity
android:name=".yourActivity"
android:theme="#style/SampleTheme" />
This Works on pre_lollipop devices also. Happy coding :)
I have been trying to find resources explaining how I can style the Switch button in the Material Design theme.
This link does explain the color values and aesthetic details but doesn't say much on how I can achieve this by setting certain attributes in Material design theme.
http://www.google.com/design/spec/components/switches.html#switches-switch
If there's no direct way of setting the Switch's color, where are the drawables located that I can use to make my own version?
I have been trying to find resources explaining as to how I can style switch button in the Material Design theme.
Coloring widgets is pretty simple now with the new appcompat-v7:21.
As long as you are using appcompat-v7:21, you can replace all of your old Switch widgets with SwitchCompat widgets. So in your xml layouts, instead of using the old Switch tag, use android.support.v7.widget.SwitchCompat.
Then in your styles.xml, make sure your app's parent theme is a Theme.AppCompat theme such as Theme.AppCompat.Light.
Finally, the key is to specify your own value for colorAccent:
<item name="colorAccent">#color/my_fancy_color</item>
The color you specify for colorAccent will be used to color the widgets in your app such as SwitchCompats, EditTexts, RadioButtons, etc.
So your styles.xml might look something like:
<style name="Theme.MyTheme" parent="Theme.AppCompat.Light">
<!-- colorPrimary is used for the default action bar background -->
<item name="colorPrimary">#color/color_primary</item>
<!-- colorPrimaryDark is used to color the status bar -->
<item name="colorPrimaryDark">#color/color_primary_dark</item>
<!--
colorAccent is used as the default value for colorControlActivated
which is used to color widgets
-->
<item name="colorAccent">#color/my_fancy_color</item>
<!-- You can also set colorControlNormal, colorControlActivated
colorControlHighlight & colorSwitchThumbNormal. -->
</style>
where are the drawables located that I can use to make my own version?
I wouldn't recommend altering the drawables directly, but they are located in
sdk/platforms/android-21/data/res/drawable-XXXX
and the files are called
btn_switch_to_off_mtrl_XXXXX.9.png
btn_switch_to_on_mtrl_XXXXX.9.png
switch_track_mtrl_alpha.9.png
To complete JDJ's answer:
There is a bug with a corrupt file in drawable-hdpi in AppCompat:
https://code.google.com/p/android/issues/detail?id=78262
To fix it, just override it with these 2 files:
https://github.com/lopespm/quick-fix-switchcompat-resources
Add them to your drawable-hdpi directory.
XML
<android.support.v7.widget.SwitchCompat
android:id="#+id/dev_switch_show_dev_only"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
And nothing was necessary in Java
In my case, I only wanted to style a particular switch, not all of them in the app. Here is how I did that using AppCompat-v7:23
xml layout:
<android.support.v7.widget.SwitchCompat
android:id="#+id/switchAffiliateMember"
android:theme="#style/Sugar.Switch.Affiliate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:textOff="No"
android:textOn="Yes" />
v21/styles.xml:
<style name="Sugar.Switch.Affiliate" parent="Base.Widget.AppCompat.CompoundButton.Switch">
<item name="colorSwitchThumbNormal">#color/red</item>
<item name="colorAccent">#color/white</item>
</style>
colorSwitchThumbNormal is the "off" state, colorAccent is the "on" state. Notice that neither of these have an "android" namespace prefix, I don't understand why, but it only works in this way for me.