15

I have a project in Android Studio that uses different flavors for different colors (some other things as well, but they don't matter).

What I would like is to see how a certain UI element (all defined by xml files) looks with non-default flavor?

Let's say I have to flavors, flavor A which is default and flavor B which is not. Lets say flavor A main color is red, and flavor B main color is green.

When I open layouts, they will always show as red, no matter what flavor in build variants is selected.

I'm sure there is a way to do this, but I don't know how.

Edit1: Seems I didn't explain it (thought it was implicit). My resource files for flavors are already in different folders. Colors in resource files are of the same name. That is not the problem, the problem is that I can't see colors in layouts inside of Android Studio.

Colors are in separate folders and it works as it should. When I build and install flavors, they use their colors. But when I open a layout, it always shows with default colors in Android Studio

3
  • use separate color files for each flavor and names of the resource should be same. May 22, 2019 at 11:38
  • edited the question so it better explains my problem. I already use separate color files for each flavor May 22, 2019 at 12:30
  • is there any color resource file in main ?
    – Moinkhan
    May 27, 2019 at 8:05

3 Answers 3

14
+100

Let me blow out some dusts first :

You're getting default colors in your layout files is because, your layouts resides under default folder (main package in this case).

What happens here is that, when you create build of particular flavor (let's say flavorA), packaging system takes files specific to that flavors that are duplicated from default folder and replace it to provide you flavor-specific build.

So, your generated apk file contains flavor specific files (colors.xml in your case) + default files from main (res folder of main like all layouts and other resources & your class files too) that are not the part of your flavor specific folder.

That's why everything works perfectly.


Now back to point : (Hack)

What should you do to see layouts with flavor specific colors?

"Although I would not recommend this way" unless you're having different layout logic for flavor specific build, all you can do is place particular layout files (just to see rendered output) in your layout folder under your flavorA directory.

So, It'll now take colors from flavorA folder and render you layout in IDE with that colors in your layout file.

Note: Again, this is just a hacky way to see different things in flavor specific way, not a solution. Even though I don't think there's even solution for this problem because, this is not a problem & this is how multi-flavor gradle build system works and that's not a bug in this system.

Edit:


So, after some research, I find out how you can achieve such thing that 'you get rendered output based on your flavor colors'.

Let's say you're having different colors based on your flavors like below :

enter image description here

Now, contents of flavorB & flavorW are different for colors.xml file but having same color attributes like:

flavorB contains :

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#757575</color>
    <color name="colorPrimaryDark">#212121</color>
    <color name="colorAccent">#607d8b</color>
</resources>

flavorW contains :

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#6d4c41</color>
    <color name="colorPrimaryDark">#3e2723</color>
    <color name="colorAccent">#33691e</color>
</resources>

As you can find out that number of color elements are the same but just values are different.

TL;DR

Solution : In such case, you can simply delete colors.xml from your main/res/values folder. It won't generate any error unless you're missing any flavor specific color attr for your "current build variant".

check out main dir for my project :

enter image description here

(As you can see here that, main resource directory doesn't contains any colors.xml file)

So, if you'll try changing your build variant and look at any layout file from main it'll opt out with that specific product flavor color for you.

Note : Beware that, If you add or remove one color from one flavor remember to also add/remove it to other flavors too or else your project might get error while building. (you can also do the same trick with other resources too like drawables, layouts, dimensions etc. just make sure every flavor contains it all with the same resource name)

2
  • Thanks, I thought of stuff like this myself, but hoped that Android Studio could solve it for me without hacking. Accepting your answer, as I will do something similair: default will be for testing while flavors will be for final builds. So if I want to test flavorA, I put flavorA resources to default, and if i Want flavorB, i put flavor B. May 27, 2019 at 10:18
  • Don't do that, just remove colors.xml from main and then put it in all flavors like I suggested after Edit it works like charm as you wanted. May 27, 2019 at 10:24
4

Im not sure if its possible to affect layout preview with flavours, but its definetely possible with themes, so let me suggest a workaround.

1) Create two themes in your main source set:

    <style name="MyStyle">
        <item name="colorPrimary">#44f</item>
    </style>

    <style name="MyStyle.Red">
        <item name="colorPrimary">#f44</item>
    </style>

That is basically enough to customise layout preview: you can select theme you want.

2) To make your layouts flavor-dependent, create a theme that will inherit either MyStyle or MyStyle.Red depending on flavor

In main source set:

<style name="MyFlavorDependentStyle" parent="MyStyle"/>

In flavor source set:

<style name="MyFlavorDependentStyle" parent="MyStyle.Red"/>

and use MyFlavorDependentStyle in your layout.

1
  • Honestly it would be a great solution if I didn't have a lot of styles, so it will confuse me more then help. Great suggestion anyway, thanks. May 27, 2019 at 10:21
0

if the colors are defined in XML just move the colors definition from main/colors.xml to flavorA/colors.xml and flavorB/colors.xml

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.