Show Layouts in Android Studio depending on Flavor

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.

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 :

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 :

(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)