I am trying to add two CheckBox views to a feedback Fragment in my current app, which is using the AppCompat library (v7:22.2.1) . The API range for this app is 16-current (22). My manifest is set up with the following theme definition:
android:theme="#style/AppTheme"
which is defined as such in my styles.xml file:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Base.Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
</style>
<style name="AppTheme.FacebookFlatButton">
<item name="android:background">#drawable/facebook_flat_button</item>
<item name="android:textAppearance">?android:attr/textAppearanceMedium</item>
<item name="android:textColor">#android:color/white</item>
</style>
<style name="AppTheme.TwitterFlatButton">
<item name="android:background">#drawable/twitter_flat_button</item>
<item name="android:textAppearance">?android:attr/textAppearanceMedium</item>
<item name="android:textColor">#android:color/white</item>
</style>
</resources>
The problem is my CheckBox (and I also notice my EditText) views don't default to a proper color such that they are viewable when checked. Here is a screenshot of the Preview in Android Studio and my emulator side-by-side:
No matter what combination of style items I put in this style from other SO articles such as this one, the colors don't change in the emulator or on a device, but they are updating in the Preview. I have also tried various tweaks of the parent theme to my custom theme, but nothing seems to matter.
I have tried this in a Nexus 5 (API 19) and a Nexus 6 (API 22) emulator, and it also does the same thing on my Nexus 6 device.
I'm not defining much at all custom here, but I still feel like I'm missing some small critical piece of information here. What am I missing?
OK, after much research and testing, I have a solution that works both for my CheckBox and EditText controls.
The (bad) assumption on my part was that one theme could take care of AppCompat and Material Design, which is not true. Basically, for AppCompat (< API 21), you have to define your styles with names without the android: prefix, such as this for the CheckBox and EditText:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Base application theme -->
<style name="AppTheme" parent="Theme.AppCompat.Light">
<!-- Customize your theme here. -->
</style>
<style name="AppTheme.EditText" parent="Widget.AppCompat.EditText">
<item name="colorControlNormal">#color/almanac_red_dark</item>
<item name="colorControlActivated">#color/almanac_red_light</item>
<item name="colorControlHighlight">#color/almanac_red_light</item>
</style>
<style name="AppTheme.CheckBox">
<item name="colorAccent">#color/almanac_red_dark</item>
</style>
<style name="AppTheme.FlatButton">
<item name="android:textAppearance">?android:attr/textAppearanceMedium</item>
<item name="android:textColor">#android:color/white</item>
</style>
<style name="AppTheme.FacebookFlatButton" parent="AppTheme.FlatButton">
<item name="android:background">#drawable/facebook_flat_button</item>
</style>
<style name="AppTheme.TwitterFlatButton" parent="AppTheme.FlatButton">
<item name="android:background">#drawable/twitter_flat_button</item>
</style>
</resources>
But you have to have another version of the style for Material Design versions (> API 21) in the values-v21 directory (with the Material Design parent theme), with the android: prefix:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="#android:style/Theme.Material.Light">
<!-- Customize your theme here. -->
</style>
<style name="AppTheme.EditText">
<item name="android:colorControlNormal">#color/almanac_red_dark</item>
<item name="android:colorControlActivated">#color/almanac_red_light</item>
<item name="android:colorControlHighlight">#color/almanac_red_light</item>
</style>
<style name="AppTheme.CheckBox">
<item name="android:colorAccent">#color/almanac_red_dark</item>
</style>
</resources>
I have tried on the Nexus 4 (API 16), Nexus 5 (API 19) and Nexus 6 (API 22) emulators and my physical Nexus 6 device and everything looks as I expect.
You need to specify the acent colors for that, put below line in your main style 'AppTheme'
<item name="colorAccent">#color/color_primary</item>
This will change your checkbox and edittext color
Related
This is a pretty basic question - I am supporting API versions 11+ and I want to use functionality on phones that have a newer API version. However, it would be nice if I didn't have to re-define my style. So, for example, if, in values/styles.xml I have:
<resources
xmlns:android="http://schemas.android.com/apk/res/android">
<style name="Theme.MyApp.Input.Text">
<item name="android:layout_width">match_parent<item>
<item name="android:layout_height>wrap_content</item>
</style>
</resources>
and then in values-v14/styles.xml I have:
<resources
xmlns:android="http://schemas.android.com/apk/res/android">
<style name="Theme.MyApp.Input.Text">
<item name="android:textAllCaps">true</item>
</style>
</resources>
Then, on devices that have API 14+, I'll get the union of the two styles.
The question is quite old but it is possible:
The following snippet is from values/styles.xml
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/green</item>
<item name="colorPrimaryDark">#color/dark</item>
<item name="colorAccent">#color/green</item>
<item name="checkboxStyle">#style/AppTheme.CheckBox</item>
</style>
If you want to inherit (for eg) the same style and specialize in the API >=23 you must define a values/style-23.xml as below:
<style name="AppTheme.AppTheme23" >
<item name="android:windowLightStatusBar">true</item>
</style>
Obviously in the AndroidManifest.xml the theme to specify is:
android:theme="#style/AppTheme"
That's all folks!
I understand that to correctly use some of the Material theme design patterns for pre API-21 devices, I'll have to include two style folders.
The theme is applied correctly on my Nexus 5 (lolipop) device, but when I run my application on a pre API-21 device (I'm using my Samsung Galaxy Note, API-16), I'm getting a blank, black screen. The application works, as I can interact with the activity (press buttons, use the keyboard, etc), but I can't see anything.
Here is my res/values-v21/themes.xml file:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Theme.MyTheme" parent="AppTheme">
<item name="colorPrimary">#color/green</item>
<item name="colorPrimaryDark">#color/darkgreen</item>
</style>
</resources>
and here is my res/values/themes.xml file:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Theme.MyTheme" parent="Theme.AppCompat.Light">
</style>
</resources>
and I've included this line inside my manifest file under <application>:
android:theme="#style/Theme.MyTheme"
Am I not supposed to use the AppCompat theme for pre-lolipop devices? I'm using the v7 support library.
Any help is appreciated.
Change your res/values/themes.xml in:
<style name="Theme.MyTheme" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#color/green</item>
<item name="colorPrimaryDark">#color/darkgreen</item>
</style>
Then remove the same theme (name="Theme.MyTheme") from res/values-v21/themes.xml
I am defining action bar styles for an Android device running 4.4.2. I've tested the styles on a device running 4.3 and they work prefectly. The phone running KitKat however refuses to apply any of the rules defined by the style. I've defined the same theme in all three folders: values, values-11 and values-14.
<style name="AppTheme" parent="#style/Theme.AppCompat.Light">
<!-- Setting values in the android namespace affects API levels 14+ -->
<item name="android:actionBarStyle">#style/MyStyledActionBar</item>
</style>
<style name="MyStyledActionBar" parent="#style/Widget.AppCompat.Light.ActionBar">
<!-- Setting values in the android namespace affects API levels 14+ -->
<item name="android:background">#drawable/oc_actionbar_background</item>
<item name="android:titleTextStyle">#style/MyActionBarTitleText</item>
<item name="android:actionMenuTextAppearance">#style/MyActionBarMenuText</item>
<item name="android:actionMenuTextColor">#style/MyActionBarMenuText</item>
<item name="android:actionOverflowButtonStyle">#style/MyActionButtonOverFlow</item>
<item name="android:displayOptions">showHome</item>
</style>
<style name="MyActionBarTitleText" parent="#style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">#696969</item>
</style>
<style name="MyActionBarMenuText" parent="#style/TextAppearance.AppCompat.Widget.ActionBar.Menu">
<item name="android:textColor">#696969</item>
</style>
<style name="MyActionButtonOverFlow" parent="#style/Widget.AppCompat.Light.Base.ActionButton.Overflow">
<item name="android:src">#drawable/ic_action_search</item>
</style>
I've also added
android:theme="#style/AppTheme"
to the manifest application tag. But the styles are still not applied. I have however managed to change the action bar properties at runtime (changing the color), but that's not a desirable way of handling such problems.
If anyone could advise me on the matter, I would be most grateful.
To prevent these kind of issues, I like to use the following tool to generate the style for me: http://jgilfelt.github.io/android-actionbarstylegenerator/
Easy to use tool that generates the style just like I want it. Might help you too, since you avoid these issues. Just paste this in your project, and you're done.
Other tools can be found here: http://romannurik.github.io/AndroidAssetStudio/index.html
I am using the following code to change the color of the background of my spinner. I am confused as to why it is not work.
style.xml
<style name="MyTheme" parent="#style/Theme.Sherlock.Light">
<item name="windowActionBarOverlay">true</item>
<item name="android:windowActionBarOverlay">true</item>
<item name="actionDropDownStyle">#style/MyActionBarSpinnerStyle</item>
</style>
<style name="MyActionBarSpinnerStyle" parent="#style/Widget.Sherlock.Light.Spinner.DropDown.ActionBar">
<item name="android:background">#drawable/actionbar_spinner_background</item>
</style>
actionbar_spinner_background.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/spinner_background_disabled" android:state_enabled="false"/>
<item android:drawable="#drawable/spinner_background_pressed" android:state_pressed="true"/>
<item android:drawable="#drawable/spinner_background_focused" android:state_focused="true" android:state_pressed="false"/>
<item android:drawable="#drawable/spinner_background_default"/>
</selector>
Is there something that I am missing or doing incorrectly?
I have separate styles.xml files for default and 11+. This was from my 11+ file. I removed the true from my 11+ file and still not working. Testing on a device running 4.4.4 does it matter that I am using Sherlock?
The problem is that the following line of code require API level 11 and up :
<item name="android:windowActionBarOverlay">true</item>
Solution -
Make separate styles.xml in res/values-v11 to support the same functionality in android 3.0 and up.
For Android 3.0 and higher only
If your minSdkVersion is set to 11 or higher, your custom theme should use Theme.Holo theme (or one of its descendants) as your parent theme.
For example -
<resources>
<!-- the theme applied to the application or activity -->
<style name="CustomActionBarTheme"
parent="#android:style/Theme.Holo">
<item name="android:windowActionBarOverlay">true</item>
</style>
</resources>
For Android 2.1 and higher
If your app is using the Support Library for compatibility on devices running versions lower than Android 3.0, your custom theme should use Theme.AppCompat theme (or one of its descendants) as your parent theme.
For example -
<resources>
<!-- the theme applied to the application or activity -->
<style name="CustomActionBarTheme"
parent="#android:style/Theme.AppCompat">
<item name="android:windowActionBarOverlay">true</item>
<!-- Support library compatibility -->
<item name="windowActionBarOverlay">true</item>
</style>
</resources>
NOTE:
Notice that this theme includes two definitions for the windowActionBarOverlay style: one with the android: prefix and one without. The one with the android: prefix is for versions of Android that include the style in the platform and the one without the prefix is for older versions that read the style from the Support Library.
Reference:
https://developer.android.com/training/basics/actionbar/overlaying.html#EnableOverlay
I'm using the Android appcompat library to create a custom action bar. That all works. On devices not using the v11 theme (values folder) a bottom border does not appear as it should not. But when v11+ devices use the theme (in the values-v11 folder of course) there is a bottom border. It's a thin 1dp type border. I have a custom background applied for the actionbar and this all works on version < v11, just an annoying extra bottom border is added on v11+ devices ;-]
Now I found via another SO article where the user was using ActionBarSherlock that the base theme needed to be Theme.X and not theme.X.Light.x to resolve this issue (with no explanation as to why). I applied this same logic (I'm using android's appcompat, not sherlock one) and it worked for removing the border but then other style issues came up with radio buttons, etc, taking on the non-light theme. So I want to keep the base theme as 'Theme.AppCompat.Light' and get rid of the bottom border on the actionbar. Again, it doesn't show up on devices < v11.
Screen shots (Theme.AppCompat.Light/Theme.AppCompat):
My theme (same in values folder minus the android prefacing):
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Application theme. -->
<style name="ActionTheme" parent="#style/Theme.AppCompat.Light">
<item name="android:actionBarStyle">#style/ActionBarStyle</item>
<item name="android:windowActionBar">true</item>
</style>
<style name="ActionBarStyle" parent="#style/Widget.AppCompat.ActionBar">
<item name="android:displayOptions"></item>
<item name="android:background">#drawable/header_style</item>
<item name="android:titleTextStyle">#style/ActionBarTitleText</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:height">70dp</item>
</style>
<style name="ActionBarTitleText" parent="#style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">#color/color_dark_blue</item>
</style>
</resources>
Through the power of SO my question was finally answered! I tried everything the OP in the below link tried and more over the last two days. Somehow I didn't see this SO thread (I wasn't using search terms 'divider', methinks).
What worked for me was to have the no window overlay property set to null. I see that setting the window color may work on some higher version of android (4.2.x+) as well, so I decided to set both. Here is the SO link with the solution(s) to this nasty feature (bug?): link
My final values-v11/themes.xml -
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Application theme. -->
<style name="ActionTheme" parent="#style/Theme.AppCompat.Light">
<item name="android:actionBarStyle">#style/ActionBarStyle</item>
<item name="android:windowActionBar">true</item>
<item name="android:windowBackground">#android:color/white</item>
<item name="android:windowContentOverlay">#null</item>
</style>
<style name="ActionBarStyle" parent="#style/Widget.AppCompat.ActionBar">
<item name="android:displayOptions"></item>
<item name="android:background">#drawable/header_style</item>
<item name="android:titleTextStyle">#style/ActionBarTitleText</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:height">70dp</item>
</style>
<style name="ActionBarTitleText" parent="#style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">#color/color_dark_blue</item>
</style>
</resources>
If user2545146 answer doesn't work on lollipop.
call setElevation on the actionbar from the activity.
getSupportActionBar().setElevation(0);
The only thing that worked for me was
AppBarLayout appBarLayout = findViewById(R.id.my_app_bar_layout);
appBarLayout.setOutlineProvider(null);
api >= 21 only