Tinting Checkbox on pre v21 - android

So, I want to apply tint to AppCompat Checkbox.
Everything works fine on Lollipop:
android:buttonTint="#color/purple_FF4081"
or this way:
android:theme="#style/Theme.MyTheme.PurpleAccent"
But setting any of this params do not change anything on pre-Lollipop. Works only if I set colorAccent for the app theme. But I don't want all widgets to change their look, just one checkbox.
Is there any way to do this without setting colored drawables?

Quick fyi that this has all changed now after the introduction of the AppCompatActivity and the new support libraries, for reference (outlined beautifully here) a checkbox can be tinted by using the theme atttribute and setting the colorControlNormal and colorControlActivated:
styles.xml
<style name="MyCheckBox" parent="Theme.AppCompat.Light">
<item name="colorControlNormal">#color/indigo</item>
<item name="colorControlActivated">#color/pink</item>
</style>
layout xml:
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text="Check Box"
android:theme="#style/MyCheckBox"/>

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

I needed to do it programmatically, after digging for a little while I finally found this solution (tested on Kitkat & Marshmallow), I'll just post it in case it helps someone:
public static void setAppCompatCheckBoxColors(final AppCompatCheckBox _checkbox, final int _uncheckedColor, final int _checkedColor) {
int[][] states = new int[][]{new int[]{-android.R.attr.state_checked}, new int[]{android.R.attr.state_checked}};
int[] colors = new int[]{_uncheckedColor, _checkedColor};
_checkbox.setSupportButtonTintList(new ColorStateList(states, colors));
}

I have tried all answer but only this one works for me , add atttribute colorControlNormal and colorControlActivated to base style of whole activity (or application ) remove theme from your controller
here is example
<style name="AppTheme" parent="AppTheme.Base"/>
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<!-- colorPrimary is used for the default action bar background -->
<item name="colorPrimary">#color/colorPrimary</item>
<!-- colorPrimaryDark is used for the status bar -->
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<!-- colorAccent is used as the default value for colorControlActivated,
which is used to tint widgets -->
<item name="colorAccent">#color/colorAccent</item>
<!-- to hide white screen in start of window -->
<item name="android:windowIsTranslucent">true</item>
<item name="colorControlNormal">#color/orange_two</item>
<item name="colorControlActivated">#color/pumpkin_orange</item>
</style>
Your Mainfest
<application
android:allowBackup="true"
android:icon="#mipmap/ic_launcher"
android:label="#string/app_name"
android:supportsRtl="true"
android:theme="#style/AppTheme"> // here is the style used
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>

EDIT 6/28/16: The below answer is no longer correct. See the accepted answer on the new way Google has allowed tinting on pre-v21 devices with the appcompat library.
Original Answer:
The short answer is: no. Custom drawables will need to be created for use on pre-v21 devices. This is because the special tint aware widgets are currently hidden because they're an unfinished implementation detail at this time (which Google states that this may change in the future, according to their developer blog in the FAQ section)
There are two scenarios you could override the colorAccent that may work:
Have your own custom version of the widget (i.e. you’ve extended
EditText)
Creating the EditText without a LayoutInflater
(i.e., calling new EditText()).

Related

Account Kit advanced UI customizing

My default color is purple (#9b59b6) i want to change top title (blue) color to purple as well. I red manual on Customizing the Account Kit UI in Android Implemented style like this, but had no further luck changing top title color to purple.
//Delauft color: purple
UIManager uiManager = new SkinManager(SkinManager.Skin.CONTEMPORARY, ContextCompat.getColor(this, R.color.default_color), R.drawable.register_screen, SkinManager.Tint.WHITE, 0.1);
configurationBuilder.setUIManager(uiManager);
In my style.xml i have
<style name="AppBaseTheme" parent="android:style/Theme.Light.NoTitleBar">
<item name="colorPrimary">#9b59b6</item>
<item name="colorPrimaryDark">#9b59b6</item>
<item name="colorAccent">#9b59b6</item>
<!-- other elements-->
</style>
Other activities works fine.
I have app that look like this:
UPDATE
Solution: In AndroidManifest
<activity android:name="com.facebook.accountkit.ui.AccountKitActivity" android:theme="#style/CustomFbStyle" tools:replace="android:theme"/>
And in style.xml
<style name="CustomFbStyle" parent="Theme.AccountKit">
<item name="colorPrimary">#9b59b6</item>
<item name="colorPrimaryDark">#9b59b6</item>
</style>
Please check the theme you are using i.e Appbasetheme is the same which you have mentioned in application tag of manifest.
<application
android:label="#string/app_name"
android:largeHeap="true"
android:supportsRtl="true"
android:theme="#style/AppbaseTheme">
or you can also use specific theme to specific class by giving android:theme tag to that class in manifest

AppCompat Spinner style background with colorBackground set in AppTheme?

I have a BaseActivity with a theme applied in which i have defined an attribute colorBackground as my app's default background color(say brown).
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:colorBackground">#color/app_background</item>
</style>
What this does, is it gives the spinner present in one of the fragment loaded on that activity the same color background as my app's background(brown).
like this:
Problem
But I want the style to be default with white background only and not the colorBackground.
To accomplish this i have created a style for Spinner
as
<style name="AppSpinner" parent="Widget.AppCompat.Spinner">
<item name="android:popupBackground">#ffffff</item>
</style>
and i am applying this style as
<Spinner
style="#style/AppSpinner
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
this gives me the the white background for the Drop down popup but surrounded by a weird black background.
like this:
tried solution
I tried other attributes also in the AppSpinner like
android:background and android:colorBackground also, but same result.
Why is that? How can i change that.
Or is there any other way of accomplishing the desired effect.
I also had this problem and solved it like this:
1. Make two version of you app theme
The second one has to inherit the first and set the colorBackground attribute (which isn't set in the first version). Something like this:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- some theme attributes, for example accent color, etc. -->
</style>
<style name="AppTheme.WithBackground">
<item name="android:colorBackground">#color/app_background</item>
</style>
2. Use the version with background as activity theme
<activity
android:name=".MainActivity"
android:theme="#style/AppTheme.WithBackground" ... >
3. Use the version without background as theme in spinner view
<Spinner
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme" />
This worked perfectly for me, even without overdraw warnings.

Android appcompat-v7:21.0.0 change material checkbox colors

I've updated my project to use the latest appcompat support library, the new version uses material design checkboxes and radio buttons. My app is dark themed and the checkboxes are black which is hard to see. I'm trying to change their colors according to Maintaining Compatibility but so far nothing works.
res/values/styles.xml
<style name="AppBaseTheme" parent="#style/Theme.AppCompat.Light">
<!-- customize the color palette -->
<item name="colorAccent">#color/silver</item>
</style>
in build.gradle:
android {
compileSdkVersion 21
buildToolsVersion '21.1.1'
defaultConfig {
minSdkVersion 9
targetSdkVersion 19
}
}
.....
.....
compile 'com.android.support:appcompat-v7:21.0.0'
AndroidManifest.xml:
<application
android:name="ee.mtakso.App"
android:allowBackup="true"
android:icon="#drawable/ic_launcher"
android:label="#string/app_name"
android:theme="#style/AppBaseTheme">
The checkboxes, editTexts, radiobuttons etc. remain black.
Edit
I don't know if this makes much difference, but the radiobuttons and checkboxes I'm using are for a CheckedTextView, as following:
Single (radio button): android:checkMark="?android:attr/listChoiceIndicatorSingle"
Multi (check box): android:checkMark="?android:attr/listChoiceIndicatorMultiple"
Since these get the black colored material drawable, I don't think the issue is coming from them.
I had a similar problem with unchecked CheckBoxes and RadioButtons.
I found the solution, when I figured out that controls takes their "Off" color from
<item name="android:textColorSecondary">#color/secondary_text</item>
EDIT:
Specifying, if your app's or activity's theme inherite one of L's AppCompat (Dark/Light/Light.DarkActionBar), you can set:
<style name="SampleTheme" parent="Theme.AppCompat">
<item name="colorAccent">#color/green</item>
<item name="android:textColorSecondary">#color/red</item>
</style>
And that's result:
Notice: When you get different effect you probably use "wrong" theme - make sure you set it correctly.
I believe this is an error in the AppCompat theme. My workaround adding two lines of code to each CheckBox in the xml layout file.
android:button="#drawable/abc_btn_check_material"
android:buttonTint="#color/colorAccent"
You never really want to direct reference abc_ drawables but in this case I found no other solution.
This applies to RadioButton widget as well! You would just use
abc_btn_radio_material instead of abc_btn_check_material
I did this to change at least the border of a checkbox:
<style name="checkBoxComponent" parent="AppTheme">
//Checked color
<item name="colorAccent">#color/blueBackground</item>
//Checkbox border color
<item name="android:textColorSecondary">#color/grayBorder</item>
</style>
And in my layout
<android.support.v7.widget.AppCompatCheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:theme="#style/checkBoxComponent"
android:text="Yay" />
Still figuring out how to get the background of the checkbox though.
Hope it helps.
I had same problems as you.
I looked once again at AppCompat v21 — Material Design for Pre-Lollipop Devices!
And I found this "All of your Activities must extend from ActionBarActivity, which extends from FragmentActivity from the v4 support library, so you can continue to use fragments.".
So I changed my activity to ActionBarActivity and it solved my problems. I hope it will solve yours too.
I've been looking for a solution and I found it.
Step 1
Extend ActionBarActivity
public static class MyActivity extends ActionBarActivity {
//...
}
Step 2
In your style file writes two values
<style name="MyTheme" parent="Theme.AppCompat.NoActionBar">
<item name="colorAccent">#009688</item>
<item name="android:textColorSecondary">#757575</item>
</style>
colorAccent - checked color
android:textColorSecondary - unchecked color
Step 3
Set your theme in AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.test.radiobutton"
android:versionCode="1"
android:versionName="1.0">
<application android:label="#string/app_name" android:icon="#drawable/ic_launcher">
....
<activity android:name=".activity.MyActivity "
android:theme="#style/MyTheme"/>
.....
</application>
</manifest>
RESULT
Android 5
Android 4.2.2
1. Declare custom style in your styles.xml file.
<style name="CustomStyledRadioButton" parent="Theme.AppCompat.Light">
<item name="colorControlNormal">#color/red</item>
<item name="colorControlActivated">#color/red_pressed</item>
</style>
2. Apply this style to your RadioButton via android:theme attribute.
<RadioButton android:id="#+id/rb_option1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:checked="true"
android:gravity="left"
android:lineSpacingExtra="10dp"
android:padding="10dp"
android:text="Option1"
android:textColor="#color/black"
android:theme="#style/CustomStyledRadioButton"/>
100% Working
Just create a style for your RadioButton and change colorAccent like below:
<style name="RadioButtonTeal" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorAccent">#color/md_teal_600</item>
</style>
Then simply add this style to your AppCompatRadioButton:
<android.support.v7.widget.AppCompatRadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:theme="#style/RadioButtonTeal" />
To specify colors, override:
for checked color:
<item name="android:colorControlActivated">#color/your_color</item>
for unckecked color:
<item name="android:colorControlNormal">#color/your_color</item>
You will get a lot of issues with the compatibility library with both check boxes and radio buttons.
1) They come only in black for any Android 4.x devices. They come ok in Android 5.x and 2.x (don't ask me why it works on 2.x, have no clue).
2) They don't have a disabled state (doesn't matter if all your checkboxes are enabled, otherwise you're good for a very bad surprise).
Note that the default dark theme background is grey, not black, so if you keep default it's "ok".
To solve this I created the white and a disabled version of the following drawables, all added to my core project, but not in the compat project (for obvious maintenance purpose):
abc_btn_check_to_on_mtrl_000
abc_btn_check_to_on_mtrl_015
abc_btn_radio_to_on_mtrl_000
abc_btn_radio_to_on_mtrl_015
Then created a drawable to manage all states (to override compat original state):
For example, the dark theme will use this:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false" android:state_checked="true" android:drawable="#drawable/abc_btn_check_to_on_mtrl_015_disabled" />
<item android:state_enabled="true" android:state_checked="true" android:drawable="#drawable/abc_btn_check_to_on_mtrl_015" />
<item android:state_enabled="true" android:drawable="#drawable/abc_btn_check_to_on_mtrl_000" />
<item android:drawable="#drawable/abc_btn_check_to_on_mtrl_000_disabled" />
</selector>
The light theme will use this (user can switch theme in my app):
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false" android:state_checked="true" android:drawable="#drawable/abc_btn_check_to_on_mtrl_015_disabled" />
<item android:state_enabled="true" android:state_checked="true" android:drawable="#drawable/abc_btn_check_to_on_mtrl_015_light" />
<item android:state_enabled="true" android:drawable="#drawable/abc_btn_check_to_on_mtrl_000_light" />
<item android:drawable="#drawable/abc_btn_check_to_on_mtrl_000_disabled" />
</selector>
Then all I had to do is override the default compat theme (both activity and dialog, for both light/dark themes), adding something like this:
<item name="android:listChoiceIndicatorSingle">#drawable/abc_btn_radio_material</item>
<item name="android:listChoiceIndicatorMultiple">#drawable/abc_btn_check_material</item>
And this for light themes:
<item name="android:listChoiceIndicatorSingle">#drawable/abc_btn_radio_material_light</item>
<item name="android:listChoiceIndicatorMultiple">#drawable/abc_btn_check_material_light</item>
Now I've got fully operational check boxes and radios on every Android versions! IMO the compat library was not tested at all for dark theme, only white theme were used. Disabled state is likely never used by the dev of the compat lib either.
Just extend the ActionBarActivity like so:
Public class MainActivity extends ActionBarActivity {
//...
}
What you did should work for according to android blog post :
colorAccent : Bright complement to the primary branding color. By default, this is the color applied to framework controls (via colorControlActivated).
colorControlActivated : The color applied to framework controls in their activated (ex. checked) state.
Maybe the problem is coming from your theme that has #style/Theme.AppCompat.Light as parent, try with just Theme.AppCompat :
<style name="AppBaseTheme" parent="Theme.AppCompat.Light">
<!-- customize the color palette -->
<item name="colorAccent">#color/silver</item>
</style>
If you want to change a specific checkbox background color (not the whole app), you can try this trick:
Create custom_checkbox.xml file for background in drawable folder:
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="14dp" android:color="#android:color/transparent" />
<solid android:color="#ffffff" /> //the intended color of the background
<corners android:radius="2dp" />
</shape>
and then set it as background of the checkbox:
<CheckBox
android:id="#+id/rebate_tnc_checkbox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/custom_checkbox" />
you can pass another theme to the construct of the alert dialog
<style name="RadioButton" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="colorControlNormal">#color/red</item>
<item name="colorControlActivated">#color/green</item>
</style>
and use that style in the constructor
new AlertDialog.Builder(getContext(), R.style.RadioButton);
The parent of your AppTheme is #style/Theme.AppCompat.Light.
Change it to #style/Theme.AppCompat.
Now your controls will be light on a dark background.
I am using appcompat library v21:
<style name="AppBaseTheme" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#color/custom_color</item>
<item name="colorAccent">#color/custom_color</item>
</style>
The above style makes my checkbox to appear with material design (tested on android 5, 4.3, 4.1.1) but on android 2.3.3 appears with old checkbox style.
If you try to create ComboBox by hand (new ComboBox() ...), then no matter what you set, they are always going to be black. It is clear that the compat library is broken, I have created a bug report for this: https://code.google.com/p/android/issues/detail?id=158020
add this syntax to color a widget like checkbox or radio button
android:buttonTint="#color/silver"
Add
<item name="android:textColorSecondary">#color/secondary_text</item>
in style.xml and style.xml(v21)

Simple Android app color

I have an app where I haven't explicitly defined any colors. The app looks different on my phone than it does on a few other phones around my office (the title bar at the top of the app on my phone is blue with white letters and on other phones it's gray with white letters). How do I make them all the same? Is it as simple as just explicitly setting the color in my app?
You need to apply one of available themes to your application. You can do it AndroidManifest.xml, just use android:theme attribute:
android:theme="#android:style/Theme.Holo" if you want dark theme or android:theme="#android:style/Theme.Holo.Light" if you want light theme.
If you use put this app in one of your <activity> tags, only corresponding activity will be styled, if you put it in <application> tag, style will be applied to the whole application.
Of course, you can define your own style in styles.xml:
<style name="AppTheme" parent="android:Theme.Light">
<item name="android:windowBackground">#drawable/bg_window</item>
<item name="android:windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
</style>
Here's the example of AndroidManifest.xml:
<application
android:icon="#drawable/ic_launcher"
android:label="#string/app_name"
android:theme="#style/AppTheme"
>
<activity
android:name=".Activity1"
android:theme="#style/AppTheme2"
/>
<activity
android:name=".Activity2"
/>
In this example, AppTheme2 will be applied only to Activity1, while AppTheme will be applied to all other activities.
All the buttons, textviews and other UI elements not designed by you will change their aspect depending on the selected Theme. If you choose the default theme, all the GUI widgets will look different depending on the device manufacturer, the Android version, etc.
You can specify a concrete theme, such as Holo, with the problem that it won't work on Android versions prior to 3.0. You can keep the default theme for the old version, or otherwise you can use this website to generate all the Holo-style GUI elements yourself:
http://android-holo-colors.com/
the title bar at the top of the app on my phone is blue with white
letters and on other phones it's gray with white letters
This is the problem with the customized frameworks of some OEMs. They override the default android styles. I assume that the device with a blue title bar is a Samsung device with TouchWiz on it, right?
I order to have a consistent title bar you'll have to declare your own theme:
<style name="AppTheme" parent="android:Theme.Light">
<item name="android:windowBackground">#drawable/title_bar</item>
<item name="android:windowTitleStyle">#style/WindowTitle</item>
</style>
<style name="WindowTitle">
<item name="android:singleLine">true</item>
<item name="android:textAppearance">#style/TextAppearance.WindowTitle</item>
<item name="android:shadowColor">#BB000000</item>
<item name="android:shadowRadius">2.75</item>
</style>
The original title_bar 9 patch.
This is the answer to your question. However in my opinion you should't use title bars, use the ActionBar instead. You can use ActionBarSherlock for backwards compatibility.

Custom Home Icon in Action Bar Sherlock

I am trying to set custom icon for home icon using ActionBarSherlock library. I have tried to set custom layout using abHomeLayout attribute in my custom theme. But it didn't work for me. Only way, how to set it, is to set abIcon attribute for my custom drawble, but I cannot set some horizontal padding for this drawable. Is there any example for this or where could be a problem with abHomeLayout attribute?
This works for my situation, it replaces the default ic_launcher icon in the action bar with my custom one.
In your onCreate do this:
getSupportActionBar().setIcon(R.drawable.audio_shortcut);
Or in the manifest you can set the logo:
<activity>
android:logo="#drawable/my_custom_logo"
...
</activity>
This works great too:
<style name="Theme.Styled" parent="Theme.Sherlock.Light.DarkActionBar">
<item name="actionBarStyle">#style/Widget.Styled.ActionBar</item>
<item name="android:actionBarStyle">#style/Widget.Styled.ActionBar</item>
</style>
<style name="Widget.Styled.ActionBar" parent="Widget.Sherlock.Light.ActionBar.Solid.Inverse">
<item name="icon">#drawable/my_custom_logo</item>
<item name="android:icon">#drawable/my_custom_logo</item>
</style>
Reference: How to change the ActionBar “Home” Icon to be something other than the app icon?
I had similar issue with incorrect padding of the home icon on devices api<11 (i.e not the fully fledged platform action bar) and the abHomeLayout style only worked api>11
My solution was to copy the abs__action_bar_home.xml layout from ABS to child project and manually add padding to the abs__home imageview
<ImageView
android:id="#+id/abs__home"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingTop="#dimen/action_bar_home_icon_top_bottom_padding"
android:paddingBottom="#dimen/action_bar_home_icon_top_bottom_padding"
android:paddingLeft="#dimen/action_bar_home_icon_left_right_padding"
android:paddingRight="#dimen/action_bar_home_icon_left_right_padding"
android:scaleType="centerInside" />
Define an own style, like this:
<resources>
<style name="Theme.OwnTheme" parent="#style/Theme.Sherlock">
<item name="abBackground">#476dd5</item>
<item name="abHeight">30dip</item>
</style>
</resources>
I think here your can use abHomeLayout.
Set this style for your activity like this:
<activity
android:name=".MainActivity"
android:theme="#style/Theme.OwnTheme">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
In MainActivity you can use getSupportActionBar()... functions.

Categories

Resources