In the past, I used multiple frameworks to create custom Android components and I wasn’t really happy about my code. A lot of boilerplate code was required and in the end my code became a mess. But now I found a good combination of frameworks to build custom views with less code. The following is my favorite combination.

  • Kotlin
  • RxJava
  • RxBinding
  • Data Binding

Why Kotlin?

Kotlin is a modern programming language. By using Kotlin I saved a lot of boilerplate code without having any disadvantages, e.g. bad IDE support, worse debugging nor high effort to configure my first Kotlin App. With AndroidStudio or IntelliJ, I can even copy code from a Java class and paste it to a Kotlin class and I get Kotlin code. Nice! You can read more about it here and here.

Why RxJava?

Observables help you to synchronize the view with your model and reacting on user interactions becomes easier. There is also an adapter for Retrofit and many other frameworks. One example, if you wanna create an autocomplete component and it should debounce the user input. Just use debounce 😛

I needed several weeks to familiarize myself with RxJava, but it was worth the effort.

Why RxBinding?

RxBinding is an extension of RxJava and provides some adapters to the Android view world. You get rid of some really ugly Android classes like TextWatcher.

Why Data Binding?

Data Binding is a library to minimize glue code which is necessary to bind application logic with layouts and offers some other advantages. One of these is, that I’m able to bypass attributes from the include to the merge tag inside my layouts. With this ability I’m able to create more powerful components without Kotlin code and I can already see a preview within my IDE.

The next cool feature of DataBinding is the BindingAdapter. With a BindingAdapter I’m able to extend a given Android view layout with some custom attributes. No need to subclass a Android view in Kotlin. You’ll see the feature in my example.

The combination in action

Enough theory, let’s start creating a component. In the picture you can see the behavior of the component.

It’s a text input with a label. The label moves up if you tab into the field and the current value is shown as a hint. I’m using the TextInputLayout and extend it with a pattern validation. In this example, I’m validating fuel prices. What do I need to build something like this?

The first step is to create a BindingAdapter. This function extends the TextInputLayout by the attributes pattern and message. It will validates the input after 500 milliseconds without user interaction. If the value doesn’t match the pattern an error message is shown.

Next step is to create a color for the hint text. The hint should disappear if the component loses focus because the label will move at this position.

The last piece of the puzzle is the layout.

How to use the component?

Conclusion

With all of these frameworks, you are able to build your own component with less effort. Your actual logic is encapsulated in a component and easy to test. View classes like activities or fragment need not to be adapted.

If you have not used one of these libraries, you now know what you should try next, and maybe you’ll like it, too. For those who had no idea, now you have a good starting point to build your custom componentsLast but not least, just leave a comment if you are using another (or even better) tool stack how to write custom components with ease.

Leave a Comment

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close