4. Applying For an Application

Beginning

I’ve implemented StyleR one of my project which made from 4 modules. These modules are dependent to from top to bottom.

 — resources

--- framework

---- components

----- app

StyleR implemented from components module. Because I code my views from this module and use it in app module. That’s why I need to implement StyleR in that module, also I’ve implemented as "api" because I’ll initialize StyleR from app module application class.

The View

Here is the view which is I’ll apply StyleR on it. Without StyleR I had to do things which is I don’t want to do because view changes radically if user is following from the user. Here is the layout of the view:

What I don’t want to do is providing buttons background by an observable field, it overrides my button style and pressed and disabled states doesn’t work because of that. Here is the states.

• User Not Following Button

• User Following Button

Style ME!

I’ve created the json style file under userprofile package. Here is the json file:

* styles.json 
{
  "AppButton": {
    "fontName": "sf_bold.otf",
    "textColor": "white",
    "pressedTextColor": "white",
    "disabledTextColor": "white",
    "backgroundColor": "buttonPrimary_light",
    "pressedBackgroundColor": "buttonPressed_light",
    "disabledBackgroundColor": "buttonSecondary_light",
    "backgroundRadius": 6,
    "elevation": 6
  },
  "AppButton.Outlined": {
    "textColor": "buttonPrimary_light",
    "pressedTextColor": "buttonPrimary_light",
    "disabledTextColor": "buttonPrimary_light",
    "backgroundBorderWidth": 1
  }
}
* userprofileview.json
{
"UserProfileView": [
    {
      "id": "btn_action",
      "style": "AppButton"
    }
  ],
"UserProfileView.Following": [
    {
      "id": "btn_action",
      "style": "AppButton.Outlined"
    }
  ]
}

I only want to apply this style for this button that’s why I just added button to json but the proper way for this add all views attributes to json file, but I don’t want to do all of this refactor process. I’ll do it when I code a new view. Here is the result after StyleR.

Initializing the StyleR

I’ve created AppStyleR.kt to configure StyleR in this class and called it from application classes onCreate method by this line:

AppStyleR.initialize(resources)

Here is the views viewModel logic:

 takeIf { _ -> it.isFollowing == true }?.let {
 followButtonStyleObservable.set("UserProfileView.Following")
 } ?: kotlin.run {
 followButtonStyleObservable.set("UserProfileView")
 }

Here is the views:

 viewModel.followButtonStyleObservable.addOnChange { style ->
 style?.let { StyleR.applyStyle(binding.root, it) }
 }

And we’re done! Now I don’t have useless duplicated codes in my code anymore.

• User Not Following Button

• User Following Button

It’s same in sample application. You can see AppStyleR.kt and StyleRApp.kt