Default style in Android project with specific Android versions - android

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.

Related

Repeating style in v19/v21

I have this in my styles.xml:
<style name="UserTheme" parent="ThemeBase">
<item name="android:editTextStyle">#style/EditTextTheme</item>
</style>
Why do I have to repeat the editTextStyle line in v19/styles.xml and v21/styles.xml.
v21/styles.xml:
<style name="UserTheme" parent="ThemeBase">
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
<item name="android:editTextStyle">#style/EditTextTheme</item>
</style>
Is there a way to just call it in the main styles.xml and have it apply everywhere so I don't have to write it multiple times?
I couldn't find any recommended solution so I i digged into AppCompat source. The way they do it is like this.
In your styles.xml
<style name="Base.V7.Theme.YourThemeName" parent="Theme.AppCompat.Light.NoActionBar">
</style>
<style name="Base.Theme.YourThemeName" parent="Base.V7.Theme.YourThemeName" />
<style name="Theme.YourThemeName" parent="Base.Theme.YourThemeName" >
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primary_dark</item>
<item name="colorAccent">#color/accent</item>
</style>
In your styles-v21.xml
<style name="Base.V21.Theme.YourThemeName" parent="Base.V7.Theme.YourThemeName">
<item name="android:navigationBarColor">#color/white</item>
<item name="android:windowTranslucentStatus">true</item>
</style>
<style name="Base.Theme.YourThemeName" parent="Base.V21.Theme.YourThemeName" />
In your styles-v22.xml
<style name="Base.V22.Theme.YourThemeName" parent="Base.V21.Theme.YourThemeName">
<item name="android:navigationBarColor">#color/black</item>
<item name="android:windowTranslucentStatus">false</item>
</style>
<style name="Base.Theme.YourThemeName" parent="Base.V22.Theme.YourThemeName" />
For every new version you extend the previous base version. If you want to override any attribute for different version just put it inside Base.VXX.Theme.YourThemeName block on your new styles-vXX.xml file.
Why do I have to repeat the editTextStyle line in v19/styles.xml and
v21/styles.xml?
If you've applied some STYLE to some attribute, Android will search styles.xml file for highest api level for which file_api_level<=Android_device_api_level and searches for STYLE in it. If it finds it would apply that STYLE to view otherwise will continue searching for the STYLE in lower api level files.
e.g. - If you have four files styles.xml(default), v19/styles.xml, v21/styles.xml, v25/styles.xml and your devices is running on api level 24. Then it'll search for STYLE in v21/styles.xml first, then v19/styles.xml and finally in styles.xml(default). Only first occurrence of the STYLE will get applied. So you can't just define only extra attributes in version-specific styles.xml file.
If you don't want to repeat common attributes here is an alternate. To declare window transitions for Android 5.0 (API level 21) and higher, you need to use some new attributes. So your base theme in res/values/styles.xml could look like this:
<resources>
<!-- base set of styles that apply to all versions -->
<style name="BaseAppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/primaryColor</item>
<item name="colorPrimaryDark">#color/primaryTextColor</item>
<item name="colorAccent">#color/secondaryColor</item>
</style>
<!-- declare the theme name that's actually applied in the manifest file -->
<style name="AppTheme" parent="BaseAppTheme" />
</resources>
Then add the version-specific styles in res/values-v21/styles.xml as follows:
<resources>
<!-- extend the base theme to add styles available only with API level 21+ -->
<style name="AppTheme" parent="BaseAppTheme">
<item name="android:windowActivityTransitions">true</item>
<item name="android:windowEnterTransition">#android:transition/slide_right</item>
<item name="android:windowExitTransition">#android:transition/slide_left</item>
</style>
Now you can apply AppTheme in your manifest file and the system selects the styles available for each system version.
Is there a way to just call it in the main styles.xml and have it
apply everywhere so I don't have to write it multiple times?
Yes, there is a way in which you can maintain only one styles.xml file.
First of all, start using AppCompat themes. They provide backward compatibility and will work for older android versions as well.
Now define all of your styles in styles.xml(default) file and if your Android Studio is showing you some warning/error for some attribute which is supported in higher level apis:
You can suppress that warning using: tools:targetApi="SupportedAndroidVersionName"
Now Android will ignore that particular attribute if it's not supported and your whole style will work perfectly for both lower and higher api levels.
Read more about Styles and Themes here.
Hope it helps :)
Newer versions of Android have additional themes available to applications, and you might want to use these while running on those platforms while still being compatible with older versions. You can accomplish this through a custom theme that uses resource selection to switch between different parent themes, based on the platform version.
Why do I have to repeat the editTextStyle line in v19/styles.xml and
v21/styles.xml?
Because if your app is running on v21, v21/styles.xml will be loaded and if running on v19, v19/styles.xml will be loaded. In case you don't have v21/styles.xml or v19/styles.xml the app will automatically use your default values/styles.xml but you wont be able to take advantage of new features provide only for v21 or v19.
For more reference you can read Supporting Different Devices and Select a theme based on platform version.

Changing themes and styles based on the Android version on build

I know I can add different XMLs for different API levels, for example having different styles for values-v21 and values-v19. What I'm trying to understand is how the build system actually works with those different values? So for example if I have the bulk of my styles common across all APIs and one item of one style changes between 21 and the rest, do I:
1) Copy the whole styles.xml into v21 and change the one value I need to change
2) Only add that one style that changed to styles.xml under v21
3) Only add that one item of that one style that changed under 21
It's confusing and I couldn't find any documentation how the built process handles merging styles.
Rules are quite clear:
While running Android selects the best-matching style
If selected style is a child style, Android merges its items with parent best-matching style
If you provide your mutable item via a reference, just define its value to match selected api version.
<style name="SomeStyle">
<item name="someColor">#color/some_color</item>
</style>
You can have some_color.xml in color-v21 folder for API 21 and a common version of this file in a color folder for all other api levels.
Example:
You want to have the following style for non-v21 API
<style name="FinalStyle">
<item name="commonText">It\'s a common text</item>
<item name="specificDrawable">#drawable/icon</item>
<item name="specificColor">#color/primary_color</item>
<item name="specificText">non-v21</item>
</style>
And the following style for v21 API
<style name="FinalStyle">
<item name="commonText">It\'s a common text</item>
<item name="specificDrawable">#drawable/icon</item>
<item name="specificColor">#color/secondary_color</item>
<item name="specificText">v21</item>
</style>
Specific-parameters differ between v21/non-v21 API, common parameters are common.
How to do it?
res/values/styles.xml
<style name="BaseStyle">
<item name="commonText">It\'s a common text</item>
<item name="specificDrawable">#drawable/icon</item>
</style>
<style name="FinalStyle" parent="BaseStyle">
<item name="specificColor">#color/primary_color</item>
<item name="specificText">non-v21</item>
</style>
res/values-v21/styles.xml
<style name="FinalStyle" parent="BaseStyle">
<item name="specificColor">#color/secondary_color</item>
<item name="specificText">v21</item>
</style>
res/drawable/icon.png
Common icon
res/drawable-v21/icon.png
v21 icon
When Android searches FinalStyle for v21, it selects FinalStyle definition from res/values-v21 as best-matching style, and merges with BaseStyle. In this example there is also another best-matching resource search, when Android searches #drawable/icon.
This is for anyone who comes across this and is still just as confused as I was, even after a lot of reading and trial & error. Hopefully this helps.
The folder structure is like #Dmitry stated.
res/values/styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
<style name="AppBase" parent="Theme.MaterialComponents.NoActionBar">
<!-- simple: overrides colorPrimary in parent theme -->
<item name="colorPrimary">#color/brand_blue</item>
<item name="colorSecondary">#color/brand_grey</item>
<!-- sets the attributes in materialButtonStyle with style: myMaterialButton -->
<!-- the materialButtonStyle attribute is what actually changes the button settings -->
<item name="materialButtonStyle">#style/myMaterialButton</item>
</style>
<!-- this style consists of common 'attributes' among all API versions -->
<!-- you can choose to add a parent to inherit an additional style -->
<!-- unlike the materialButtonStyle attribute, this parent is not necessary to change the button settings -->
<style name="myMaterialButton" parent="Widget.MaterialComponents.Button">
<item name="cornerRadius">60dp</item>
<item name="android:paddingVertical" tools:targetApi="26">20dp</item>
</style>
<!-- this will add on and override AppBase and should include any changes that differ from other API versions -->
<style name="AppBaseChanges" parent="AppBase">
<!-- to inherit myMaterialButton, you don't have to include it in here, since it's in AppBase -->
<!-- however, if you want to extend myMaterialButton, create a new style as its child -->
<item name="materialButtonStyle">#style/myMaterialButtonAPI_All</item>
</style>
<!-- make sure the parent is myMaterialButton to inherit/override its settings -->
<!-- this will be picked for all APIs lower than other styles like this -->
<style name="myMaterialButtonAPI_All" parent="myMaterialButton">
<item name="backgroundTint">?attr/colorPrimary</item>
</style>
</resources>
res/values-v2/styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- restate the same declaration as the other xml file-->
<style name="AppBaseChanges" parent="AppBase">
<!-- use a different name (...API_2) for the overriding style -->
<item name="materialButtonStyle">#style/myMaterialButtonAPI_2</item>
</style>
<style name="myMaterialButtonAPI_2" parent="myMaterialButton">
<item name="backgroundTint">?attr/colorSecondary</item>
</style>
</resources>
Set the manifest theme to AppBaseChanges. The app will pick only one AppBaseChanges style to apply changes, so be sure to carefully override the right styles to ensure you are inheriting from lower level versions.
For some reason, AndroidStudio doesn't do a good job at all previewing themes, so before you think it's not working, relaunch the app to see the changes. There are also situations where I have no idea why it wasn't updating the setting and couldn't find where it was overriding the theme. In those cases you can dig further, or avoid the hassle and just apply the relevant style directly to the view.
Here's the order of precedence for the sample themes described above. The higher the style, the higher precedence it has and will override the lower style.
either myMaterialButtonAPI_All or myMaterialButtonAPI_2
AppBaseChanges (only one is chosen)
myMaterialButton
Widget.MaterialComponents.Button
AppBase
Theme.MaterialComponents.NoActionBar
You may maintain only one styles.xml(default) file for all the device version.
Checkout my answer to How to remove repeating of similar styles in v19/styles.xml and v21/styles.xml files
https://stackoverflow.com/a/53445541/5745574

Material theme not applied correctly on pre-21 devices

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

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>

How to fix styling of app

I am having a really hard time with the styling of my Android application, check out the screenshot:
The screenshot is from a Android 4.0.3 emulator, so I expect the new looks.
There are several problems with it:
The black border around the title of the alert dialog
The blue border around the whole alert dialog
The NumberPicker looks like Android 2.0
The buttons should be black and with no space between them and the border of the dialog
My Styles.xml looks like this:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Theme.Splash" parent="android:Theme">
<item name="android:windowBackground">#drawable/splash</item>
<item name="android:windowNoTitle">true</item>
</style>
<style name="Theme.Recson.BlueBackground" parent="android:Theme">
<item name="android:background">#ff2390C8</item>
</style>
<style name="Theme.Recson.NoActionBar" parent="Theme.Recson.BlueBackground">
<item name="android:windowNoTitle">true</item>
</style>
</resources>
The activity that spawns this alert dialog uses Theme.Recson.BlueBackground. Not specifying any theme for the activity makes it look the way I want it to - except for the missing blue background:
So, I guess, the question is: How to fix my theme?
Try using parent="android:Theme.Holo".
Of course, this is only available from API level 11 and up, so you will have to create a separate styles.xml file and place it in the values-v11 folder.
In the default styles.xml file use your existing configuration, in the v11 file, you can use Theme.Holo.
Have a look at Styles and Themes - Select a theme based on platform version | Android Developers.

Categories

Resources