Material theme not applied correctly on pre-21 devices - android

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

Related

Default style in Android project with specific Android versions

I want to accommodate for older Android versions (say 17 to 20) with specific style specs. So I made these:
values/styles.xml (what I think should be the default)
values-v17/styles.xml
values-v18/styles.xml
values-v19/styles.xml
values-v20/styles.xml
In my values/styles.xml file I keep the default for versions 21+. However, the style that's actually applied in both the preview and the virtual device is that of v20, for display versions 21 and up. If I erase values-v20/styles.xml then it's the next one down the line, v19, that takes over. Why isn't the default style taking over?
Simple example:
values-v20/styles.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Button.AccentButton" parent="Theme.AppCompat">
<item name="android:textColor">#android:color/white</item>
<item name="android:background">#color/red</item>
</style>
</resources>
values/styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Button.AccentButton" parent="Theme.AppCompat">
<item name="android:textColor">#android:color/white</item>
<item name="android:background">#color/green</item>
</style>
</resources>
Final result: v21+ button shows red, should be green.
It works the other way around!
values/styles.xml (the default for all versions below lowest specified)
values-v21/styles.xml (values for v21+)
In other words, the first versioned folder applies to all the following versions too. The un-versioned folder applies to versions below the lowest versioned folder.

Statusbar Color won't change in v21

it feels like, I have searched the whole internet for this... I'm currently writing an app, in which the statusbar color should be red in v21 (Lollipop) and above. The current code from values-v21/styles.xml is
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="android:Theme.Material.Light.DarkActionBar">
<item name="android:colorPrimary">#color/primaryColor</item>
<item name="android:colorPrimaryDark">#color/primaryColorDark</item>
<item name="android:colorAccent">#color/primaryColor</item>
<item name="android:statusBarColor">#color/primaryColorDark</item>
<item name="android:navigationBarColor">#color/primaryColorDark</item>
<item name="android:windowBackground">#color/darkWhite</item>
</style>
</resources>
This code does not work. The strange thing is, it only doesn't work in v21, in v22 (Android 5.1) it is shown as fully working. Do anyone know how I get it working on v21?
(Sry for bad English)
It works for me but I use
item name="colorPrimaryDark"
Without 'android' before the attributes.
Got it, it doesn't work, if v21 isn't the targetSdk in the Manifest.

Cannot get Material Design CheckBox to use styling

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

How to make custom windowBackground theme style work on all Android devices?

I am trying to get all of my activities to have a custom theme style that should look like this:
This theme works on many devices, including the Nexus 7, the Samsung Galaxy S4, and the Samsung Droid Charge (running Gingerbread). However, on other devices, such as HP Slate 7 and Motorola Droid RAZR, it ends up looking like this:
I have the following in my AndroidManifest.xml's application tag:
android:theme="#style/AppTheme"
The theme is as follows in res/values/styles.xml:
<style name="AppBaseTheme" parent="#android:style/Theme.Light.NoTitleBar">
</style>
<style name="AppTheme" parent="#style/AppBaseTheme">
<item name="android:windowBackground">#color/background</item>
</style>
I have also added a styles.xml under res/values-v11. Here is the applicable style from there:
<style name="AppBaseTheme" parent="#android:style/Theme.Holo.Light.NoActionBar">
</style>
Finally, this appears in styles.xml under res/values-v14:
<style name="AppBaseTheme" parent="#android:style/Theme.DeviceDefault.Light">
</style>
I have tried to define the theme for each activity and to manually use the setTheme() function in onCreate(), but nothing has worked. I have also tried to manually set a background in every Activity, and this did not work either. What can I do to fix my problem?
EDIT: What's interesting is setting android:background in the styles makes it work, but then elements that should not have backgrounds receive that background color as well.
The key to solving the problem was changing android:windowBackground in the theme to the following:
<item name="android:windowBackground">#drawable/default_background</item>
Notice that I am no longer using #color, but simply a #drawable, the xml for which is below:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#color/background"/>
</shape>
It seems that some devices do not support accepting a color for this element.
I found that the latest version of Android Studio expect that the parent for the style needs to be Theme.AppCompat. Also, it is good style to create a colors.xml file in the values directory (with named color elements between the resource tags). Put your RGB values as values to the named color elements. Reference them in your styles with #color/.
<!--colors.xml in values folder-->
<resources>
<color name="color1">#ffb62a23</color>
<color name="color2">#ffedeba6</color>
<color name="color3">#00ff00</color>
</resources>
<!--style tags -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:windowBackground">#color/color2</item>
<item name="android:textColorPrimary">#color/color1</item>
<item name="android:textColorSecondary">#color/color2</item>
<item name="android:textColorTertiary">#color/color3</item>
</style>

Setting Android Theme background color

I'm trying to modify the default background theme color, which should be easy but surprisingly I can't get it working. Please note that I want the change to be across the entire app, not just for a single activity. Here is my code:
styles.xml
<resources>
<color name="white_opaque">#FFFFFFFF</color>
<color name="pitch_black">#FF000000</color>
<style name="AppTheme" parent="android:Theme.Light">
<item name="android:background">#color/white_opaque</item>
<item name="android:windowBackground">#color/white_opaque</item>
<item name="android:colorBackground">#color/white_opaque</item>
</style>
</resources>
and of course in the manifest
<application
.
.
.
android:theme="#style/AppTheme" >
</application>
Android doc which I consulted on modifying themes:
http://developer.android.com/guide/topics/ui/themes.html
I've tried switching between white_opaque and pitch_black for all the xml attributes but it doesn't change a thing. Any suggestions?
Okay turned out that I made a really silly mistake. The device I am using for testing is running Android 4.0.4, API level 15.
The styles.xml file that I was editing is in the default values folder. I edited the styles.xml in values-v14 folder and it works all fine now.
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="android:Theme.Holo.NoActionBar">
<item name="android:windowBackground">#android:color/black</item>
</style>
</resources>
Open res -> values -> styles.xml and to your <style> add this line replacing with your image path <item name="android:windowBackground">#drawable/background</item>. Example:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:windowBackground">#drawable/background</item>
</style>
</resources>
There is a <item name ="android:colorBackground">#color/black</item> also, that will affect not only your main window background but all the component in your app. Read about customize theme here.
If you want version specific styles:
If a new version of Android adds theme attributes that you want to
use, you can add them to your theme while still being compatible with
old versions. All you need is another styles.xml file saved in a
values directory that includes the resource version qualifier. For
example:
res/values/styles.xml # themes for all versions
res/values-v21/styles.xml # themes for API level 21+ only
Because the styles in the values/styles.xml file are available for all
versions, your themes in values-v21/styles.xml can inherit them. As
such, you can avoid duplicating styles by beginning with a "base"
theme and then extending it in your version-specific styles.
Read more here(doc in theme).

Categories

Resources