All Projects → KNOLSKAPE → chameleon

KNOLSKAPE / chameleon

Licence: other
CSS like framework for Android

Programming Languages

java
68154 projects - #9 most used programming language

Projects that are alternatives of or similar to chameleon

Figma Theme
Generate development-ready theme JSON files from Figma Styles
Stars: ✭ 130 (+132.14%)
Mutual labels:  styles
white-cursor
Provides a white I-bar cursor in the Atom editor for use with dark backgrounds
Stars: ✭ 13 (-76.79%)
Mutual labels:  styles
CustomWebCheckbox
An example of a make checkbox design on the web.
Stars: ✭ 12 (-78.57%)
Mutual labels:  styles
Preset
A simple CSS preset for 2020
Stars: ✭ 146 (+160.71%)
Mutual labels:  styles
prop-styles
Utility to create flexible React components which accept props to enable/disable certain styles.
Stars: ✭ 31 (-44.64%)
Mutual labels:  styles
mini-styled
Small subset of styled-components 💅
Stars: ✭ 16 (-71.43%)
Mutual labels:  styles
Skin
Pure CSS framework designed & developed by eBay for a branded, e-commerce marketplace.
Stars: ✭ 126 (+125%)
Mutual labels:  styles
stylenames
A simple JavaScript utility for conditionally joining inline styles together
Stars: ✭ 18 (-67.86%)
Mutual labels:  styles
react-native-use-styles
A classy approach to manage your react native styles.
Stars: ✭ 66 (+17.86%)
Mutual labels:  styles
stylez
dark css style overrides for sites i use
Stars: ✭ 38 (-32.14%)
Mutual labels:  styles
Dropcss
An exceptionally fast, thorough and tiny unused-CSS cleaner
Stars: ✭ 2,102 (+3653.57%)
Mutual labels:  styles
CustomWebRadioButton
An example of a make radio-button design on the web.
Stars: ✭ 15 (-73.21%)
Mutual labels:  styles
less-mix
LESS-Mix - is a functional, powerful and convenient library LESS-mixins.
Stars: ✭ 22 (-60.71%)
Mutual labels:  styles
Figma Tokens
Official Repo of the Figma Plugin 'Figma Tokens'
Stars: ✭ 134 (+139.29%)
Mutual labels:  styles
jss-material-ui
A enhanced styling engine for material-ui
Stars: ✭ 15 (-73.21%)
Mutual labels:  styles
Paris
Define and apply styles to Android views programmatically
Stars: ✭ 1,716 (+2964.29%)
Mutual labels:  styles
sauron-style
One library to observe them all (style changes) 👁
Stars: ✭ 37 (-33.93%)
Mutual labels:  styles
log-utils
Basic logging utils: colors, symbols and timestamp.
Stars: ✭ 24 (-57.14%)
Mutual labels:  styles
leeks.js
Simple ANSI styling for your terminal
Stars: ✭ 12 (-78.57%)
Mutual labels:  styles
Giotto
Theme manager for your app: apply styles to anything you want through a plist file
Stars: ✭ 18 (-67.86%)
Mutual labels:  styles

CSS to Drawables

Chameleon


Motivation

Have you ever stumbled upon a situation where you want to show completely different themes of the same app for different sets of your app users? If yes, you must have definitely worried about the clutter it adds in your code to maintain different drawables for different cohorts of users; this also includes updating your code for every new theme that has to be added.

Chameleon is here to save you from that hassle!

Introduction

Chameleon is a CSS like framework for Android. Chameleon can read styles in JSON format and apply them on views in Android. This way you can skip all the painful steps involved in creating drawables etc.. As of now, Chamelon is limited to only changing the appearence of the views and not the positioning.

Not only can you choose from the variety of styles provided by the library but also add your own styles by changing just one file.

The icing on the cake is, once set up, themes can be updated without pushing a new version of your app to the playstore. So, your users can see your changes on the fly, just by changing the style JSON files on your server.


CSS to Drawables

Steps

In build.gradle

// Your gradle file should look something like this

buildscript {
  repositories {
    jcenter()
  }
  dependencies {
    classpath 'com.android.tools.build:gradle:2.3.2'

}

allprojects {
  repositories {
    jcenter()
    maven { url 'https://jitpack.io' }
  }
}

Inside your Application class file

ThemeManagerBuilder
        .getInstance()
        .withUrl("https://knolskape.s3.amazonaws.com/MLS/ktm1/1495780632_sample_theme_1.json")
        .withAsset("sample_theme_1.json", context);

Inside your Activity

@Override protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
		OnLoadResourceListener listener = new OnLoadResourceListener() {
          @Override public void onLoadFinished(ThemeManager themeManager) {
            themeManager.applyTheme((ViewGroup) findViewById(android.R.id.content), MainActivity.this);
          }
        };
    
    ThemeManagerBuilder
      .getInstance()
      .addListener(listener);
 }

Create your style JSON file under the assets folder or give a remote link

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

Inside XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.knolskape.chameleon.MainActivity"
    android:orientation="vertical"
    >
<!-- Note how we supplied the style name from the json in the tag here-->
  <TextView
      android:layout_width="match_parent"
      android:gravity="center"
      android:layout_height="70dp"
      android:layout_margin="10dp"
      android:text="Sample Style 1"
      android:tag="sampleStyle1"
      />
</LinearLayout>

WIP

  • Suport drawable tint for API < 21
  • Exception handling
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].