Show Layouts in Android Studio depending on Flavor

Question

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

Answer 1

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)