Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history 
New annotation based version 2.0.0
  • Loading branch information
@manneohlund
manneohlund authored Mar 1, 2018
1 parent 2477864 commit 910c9b4
Showing 1 changed file with 137 additions and 85 deletions.
222 changes: 137 additions & 85 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@

# jsonthemer
Define theme in json file and dynamically load in to a ThemeModel and bind it to your views with DataBinding

# Gradle
#### Step 1. Add the JitPack repository to your build file

```groovy
allprojects {
repositories {
Expand All @@ -11,131 +13,181 @@ allprojects {
}
}
```

#### Step 2. Add the dependency

```groovy
dependencies {
compile 'com.github.manneohlund:jsonthemer:1.0.0'
compile 'com.github.manneohlund:jsonthemer:2.0.0'
}
```

# Basic Usage
### Theme class

Create a class with any name and assign variables with key annotations to map preferred ui component to style. All annotations below are mandatory!

```java
class ThemeModel {
@Theme
var theme = android.support.v7.appcompat.R.style.Theme_AppCompat_NoActionBar
@StatusBar
var statusBarColor = "#FFFF5722" // String or int color
@NavigationBar
var navigationBarColor = "#FFFF5722"
@ToolbarBar
var toolbarColor: String = "#FFFF5722"
@AccentColor
var accentColor: String = "#FFFF5722"

// Other colors
var primaryColor: String = "#FFFF5722"
}
```

# Usage
### Json theme
Define themes in `.json` files and add it to `assets` folder
### Setup Theme in Activity

```json
{
"theme": 1,
"toolbarThemeOverlay": 0,
"popupThemeOverlay": 1,
"statusBarColor": "#388E3C",
"toolbarColor": "#4CAF50",
"accentColor": "#8BC34A",
"navigationBarColor": "#388E3C",
"backgroundColor": "#FF000000"
`JsonThemer` will set a `DefaultThemeLayoutInflaterFactory` that will handle the theme/style setting on all android.support components for `accentColor`.

```kotlin
override fun onCreate(savedInstanceState: Bundle?) {
// Must be setup before onCreate to enable the json theme
val theme = JsonThemer.setup(this, ThemeModel::class)

// Call super after the JsonThemer setup
super.onCreate(savedInstanceState)

...
}
```

### Android Data Binding
# Android Data Binding + ThemeModel
Let the DataBinding in Android do the stitching.
Set the data model variable in your layout and bind model attributes in xml code ex: `android:background="@{themeModel.toolbarColor}"`.
Set the data model variable in your layout and bind model attributes in xml code ex: `android:background="@{themeModel.primaryColor}"`.

#### XML

```xml
// R.layout.activity_main
<layout xmlns:android="http://schemas.android.com/apk/res/android">

<data>
<variable
name="themeModel"
type="jsonthemer.model.BaseThemeModel" />
type="com.somepackage.model.ThemeModel" />
</data>

<!-- Layouts -->
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@{themeModel.toolbarColor}" />
<android.support.v7.widget.SomeView
...
android:background="@{themeModel.primaryColor}" />
</layout>
```

### Setup Json Theme in Activity
If you use or extend `BaseThemeModel` `JsonThemer` will set a `DefaultThemeLayoutInflaterFactory` that will handle the theme/style setting on all android.support components for `accentColor`.
#### Activity

```kotlin

override fun onCreate(savedInstanceState: Bundle?) {
// Must be setup before onCreate to enable the json theme
val theme: BaseThemeModel = JsonThemer.setup(this, currentTheme)
val theme = JsonThemer.setup(this, ThemeModel::class)

// Call super after the JsonThemer setup
super.onCreate(savedInstanceState)

// Setup data binding and set the theme
// Setup data binding and set the theme and make custom changes to the layout
var binding: ActivityMainBinding = DataBindingUtil.setContentView(this, R.layout.activity_main)
binding.themeModel = theme

// Set ActionBar from bindings
setSupportActionBar(binding.toolbar)
}
```

# Advanced usage
# Advanced Usage
#### Json theme

### ThemeModel
Define a `ThemeModel` or use the default `BaseThemeModel`
Define themes in `.json` files and add it to `assets` folder, load them with your ThemeModel to override variables with the `json` theme.

```kotlin
class BaseThemeModel : ThemeModel {
val LIGHT = 0
val DARK = 1

override var theme: Int = LIGHT
override var statusBarColor: String = "#FFFF5722"
override var navigationBarColor: String = "#FFFF5722"

// Theme overlays
private var toolbarThemeOverlay: Int = LIGHT
private var popupThemeOverlay: Int = LIGHT

// Other
private var toolbarColor: String = "#FFFF5722"
private var accentColor: String = "#FFFF5722"
private var windowBackgroundColor: String = "#FF000000"

override fun getModelTheme(): Int {
return when (theme) {
DARK -> return android.support.v7.appcompat.R.style.Theme_AppCompat_NoActionBar
else -> android.support.v7.appcompat.R.style.Theme_AppCompat_Light_NoActionBar
}
}

fun getToolbarThemeOverlay(): Int {
return when (toolbarThemeOverlay) {
DARK -> return android.support.v7.appcompat.R.style.ThemeOverlay_AppCompat_Dark_ActionBar
else -> android.support.v7.appcompat.R.style.ThemeOverlay_AppCompat_ActionBar
}
}
```json
// blue_theme.json
{
"theme": 0,
"toolbarThemeOverlay": 1,
"popupThemeOverlay": 0,
"statusBarColor": "#303F9F",
"toolbarColor": "#C83F51B5",
"accentColor": "#448AFF",
"navigationBarColor": "#C8303F9F",
"backgroundColor": "#FFFFFFFF"
}
```

fun getPopupThemeOverlay(): Int {
return when (popupThemeOverlay) {
DARK -> return android.support.v7.appcompat.R.style.Theme_AppCompat
else -> android.support.v7.appcompat.R.style.Theme_AppCompat_Light
}
#### ThemeModel
Note that annotations can be put on functions also! See `@Theme` `@ToolbarThemeOverlay`

```java
class ThemeModel {
val LIGHT = 0
val DARK = 1

var theme = LIGHT
@StatusBar
var statusBarColor = "#FFFF5722"
@NavigationBar
var navigationBarColor = "#FFFF5722"

@ToolbarBar
val toolbarColor = "#FFFF5722"
@AccentColor
val accentColor = "#FFFF5722"

// Theme overlays
private var toolbarThemeOverlay: Int = LIGHT
private var popupThemeOverlay: Int = LIGHT

// Other
var windowBackgroundColor: String = "#FF000000"

@Theme
fun getModelTheme(): Int {
return when (theme) {
DARK -> return android.support.v7.appcompat.R.style.Theme_AppCompat_NoActionBar
else -> android.support.v7.appcompat.R.style.Theme_AppCompat_Light_NoActionBar
}
}

@ToolbarThemeOverlay
fun getToolbarThemeOverlay(): Int {
return when (toolbarThemeOverlay) {
DARK -> return android.support.v7.appcompat.R.style.ThemeOverlay_AppCompat_Dark_ActionBar
else -> android.support.v7.appcompat.R.style.ThemeOverlay_AppCompat_ActionBar
}
}
}
```

override fun getStatusBarColor(): Int {
return Color.parseColor(statusBarColor)
}
fun getStatusBarColorDrawable(): ColorDrawable {
return ColorDrawable(getStatusBarColor())
}
override fun getToolbarColor(): Int {
return Color.parseColor(toolbarColor)
}
fun getAccentColor(): Int {
return Color.parseColor(accentColor)
}
override fun getNavigationBarColor(): Int {
return Color.parseColor(navigationBarColor)
}
fun getWindowBackgroundColor(): Int {
return Color.parseColor(windowBackgroundColor)
}
#### Activity
```java
override fun onCreate(savedInstanceState: Bundle?) {
// Load json theme and override target model
val theme: ThemeModel = let {
try {
JsonThemer.setup(this, "blue_theme.json")
} catch (e: Exception) {
Log.e(MainActivity::class.simpleName, "Error: AssetFileNotFound, " \+ e.message)

// Fallback on base model
ThemeModel()
}
}

// Call super after the JsonThemer setup
super.onCreate(savedInstanceState)

// Setup data binding and set the theme and make custom changes to the layout
binding = DataBindingUtil.setContentView(this, R.layout.activity_main)
binding.themeModel = theme

// Set ActionBar from bindings
setSupportActionBar(binding.toolbar)
}
```

0 comments on commit 910c9b4

Please sign in to comment.