Litho: Creating a custom Button component
What is Litho?
Litho is a declarative UI framework for Android, by Facebook, that was teased from Lucas Rocha the past October on a blog post he wrote in Facebook’s Engineering blog.
Litho is backed by Yoga which is a cross-platform layout engine, based on the FlexBox architecture.
Litho already includes some widgets, in its core: e.g.: Text, Image and EditText. You might notice though, that there are some basic widgets that are missing, like a Button. This might seem a bit strange, in the start, but we are Engineers and if we need something that is not available, we can build it.
Litho’s nature and its declarative API allows us to create a Button by combining different aspects of the Framework.
What is a LayoutSpec?
You can think of LayoutSpec as a classic ViewGroup on Android’s Layout system. “It simply groups existing components together in an immutable layout tree.”
We will not cover every component of Litho, but you can read it all at its beautiful documentation here.
Getting Started
To create a LayoutSpec we just need to annotate our CustomSpec class with: @LayoutSpec and add a static ComponentLayout onCreateLayout() method.
onCreateLayout() accepts a ComponentContext which is a subclass of ContextWrapper (you can think of ComponentContext like the equivalent of Context, which is used everywhere in our applications). Classes annotated with @LayoutSpec will be processed by Litho’s AnnotationProcessor, which will built a corresponding Component.
Button Container
In order to emulate the optical layout of a Button, we will create a container that hosts a Card component, which in return will be the host of a simple Text component.
As you can see above we added some styling to our card, so that we can emulate a Material Design Button style, or at least try to :P
You might also have noticed that the Card component hosts a ButtonText component through its content() method. Let’s see now, how we built our ButtonText component:
Our ButtonTextSpec class single responsibility, is to create a Text component, styled based on our needs and return it. What is new here, is that we see for the first time a @Prop annotation. Those of you who are familiar with React, you already know what a Prop is, for the rest of us though, we can think of a Prop like the data that will populate our Component or in general “shape” our Component. For our case we only needed a String, which will represent our Button’s text.
Parameters inside onCreateLayout() that are annotated with @Prop will have their equivalent method generated by the Annotation Processor. The generated method takes its name from the parameter’s name. Once we declare a Prop we will need to provide a value for it, when we create our Component, otherwise we will end up with an IllegalStateException informing us about the missing value. Don’t worry though, we can declare that a Prop is optional: @Prop(optional = true).
You can see on the left the result we have with the code available above.
Since this is the first time I am dealing with FlexBox, you might notice strange things, if you do please let me know, so that I can improve :)
Optically we have achieved our goal, but a Button has also a click functionality. We need to add this as well :)
Litho already provides us with a way to add ClickEventHandlers on a Component. We will leverage this ability and combine it with Props to achieve our “click”.
In order to get informed about ClickEvents on our Component we need to declare an onClick() method annotated with @OnEvent(ClickEvent.class) and call the clickHandler() method on the component which will receive as a parameter an EventHandler , also generated by Litho’s Annotation Processor.
You can also notice that we defined an Interface which will be used to inform us about the click event. This Interface is passed as a Prop and Litho will generate an equivalent method for us.
We defined that Interface so that we could be notified outside of the scope of a Component about the click event.
Now we have a Button-like Component that we can use wherever we need :)
Closing Notes
Litho seems to be quite powerful from a first glance and quite friendly for someone that has not dealt with FlexBox before.
It is also empowered with great Error messages, which might seem quite trivial, but they play a key role to every OpenSource project and Framework.
If you notice anything that could have been done better let me know, I am always looking for constructive feedback :)
If you liked it, hit the “heart” button and share it with the world :) Stay tuned for more :)
