Our first contribution to the open source community

“I miss CSS”

… I said to Sai Kamisetti, as I struggled with all the clunky XML code in our project. Never thought I’d say this despite hating CSS for a very long time.

I started developing apps in Android about 6 months back, after working for 2+ years as a Web developer. Few weeks into learning Android and fiddling around with XML, I realized how powerful CSS is as a language and how much we needed something like it in Android.

At KNOLSKAPE, Android is fairly new to us at this point of time and as we began working on one of our apps, we had three concerns majorly, which needed to be resolved:

1. Changing the look & feel of the product for different clients

We provide our clients the flexibility to customize our products mostly with respect to suiting their branding guidelines. This requires us to deploy our products in different avatars or “storylines” as we call it internally.

Obviously, CSS plays a crucial role here. A web app can simply pick a different set of CSS classes or rather pick a different CSS file altogether to change the appearance. Our entire architecture around theming relies on the very existence of CSS language. Achieving the same in Android, is a relatively tedious task.

2. Quick deployment

We love web apps for the fact that you can deploy new version of the app instantly. All you need to do is ask your users to refresh and they’d receive the new update. Again, achieving the same in Android or any mobile app for that matter is a fairly long procedure — Deploy new app >>Wait for it to get approved and published on the store >> Intimate user to update the app >> Wait for users to update their apps.

3. Separation of concerns

For fast development, it is essential to have the segregation of layouts, styles and the business logic. This increases the maintainability and the stability of the code. Over the course of a product’s lifecycle, developer(s) can easily modify one layer of the product without having to worry about stability of the other layers. Also, it makes debugging a lot more easier as you can pin point to the erroneous code faster.

Enter Chameleon

Github page: https://github.com/KNOLSKAPE/chameleon | Logo by: sandeepbvnr

The idea was to come up with a CSS-like framework for Android, which would solve all the three concerns.

We started with creating a JSON parser. Then we came up with our own set of rules which are similar to the attributes in CSS. For example, this is a sample JSON that Chameleon understands:

{
  "sampleStyle1":{
    "borderRadius":"10",
    "borderWidth":"3",
    "borderColor":"#3F9C35",
    "bgGradientColors":"#0075B0, #3F9C35",
    "textColor":"#FFFFFF",
    "bgGradientType":"BL_TR",
    "textSize":"16"
  },
  "sampleStyle2":{
    "borderRadius":"15",
    "textColor":"#000000",
    "borderWidth":"10",
    "textSize":"16",
    "borderColor":"#0075B0"
  },
  "sampleStyle3":{
    "borderRadius":"20",
    "borderWidth":"3",
    "borderColor":"#af7219",
    "bgGradientColors":"#af7219, #fcd651",
    "textColor":"#FFFFFF",
    "bgGradientType":"BOTTOM_TOP",
    "textSize":"16"
  }
}

This file can now sit on the server and the app’s look & feel can be modified simply by changing it on the server and relaunching the app.

This is how the result looks like:

Check out the Chameleon Github page for more details on integration.

Update

We have added Firebase integration as well. Check out the firebase-integration branch in out Github project.