BT

New Early adopter or innovator? InfoQ has been working on some new features for you. Learn more

Facebook Litho: An Android UI Framework Created for Performance

| by Abel Avram on Apr 19, 2017. Estimated reading time: 2 minutes |

Facebook has open sourced Litho, a framework for creating user interfaces in Android applications using a React-like declarative style with scrolling performance in mind.

With Facebook Litho one can create immutable UI components using a declarative API. Since the components are immutable, they can be prepared for rendering and layout in a different thread, then passed to the UI thread for the actual rendering on the screen. Litho uses code generation and optimizes the components for rendering, reducing the number of Android ViewGroups by grouping components and generating flatter interfaces with a smaller view hierarchy. This is supposed to reduce memory consumption and increase scrolling speed, according to Facebook.

Litho uses Yoga to layout the components, a process that can be done synchronously or asynchronously. Yoga is a a cross-platform layout engine also open sourced by Facebook. Because the components are immutable, and creating a large number of components can be expensive, Litho permits components to be reused in other views after being discarded from the current one.

Defining a "Hello, World!" Text component in Litho looks like this:

public class MyActivity extends Activity {

  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    
    final ComponentContext c = new ComponentContext(this);

    final LithoView lithoView = LithoView.create(
    	this /* context */, 
    	Text.create(c)
            .text("Hello, World!")
            .textSizeDip(50)
            .build());
    	
    setContentView(lithoView);
  }
}

LithoView corresponds to Android ViewGroup, making the connection between components defined in Litho and Android Views. Text is a Litho widget and has a number of properties such as text, textColor, textSize, and textStyle, among others.

The Litho API is pretty large, containing a couple of dozens of packages with over 300 Java classes and interfaces. Litho includes support for custom layouts, unit testing, event handling, RTL (right-to-left) text, accessibility, and others.

Facebook has put Litho at work in some of their Android applications, such as Facebook, Facebook Lite, Messenger, and Workplace. Facebook claims that Litho is faster than Android RecyclerView for scrolling surfaces, noting a 35% speed improvement for their applications. It obtains that by "moving the heavy work to a background thread and spreading the rendering work across multiple frames." Also:

Litho breaks down complex views into smaller pieces such as text, images, and videos, and renders them incrementally, spreading the work that needs to be done across multiple frames. It also recycles those smaller pieces and can recombine them in a virtually infinite number of ways, reducing the total number of views that need to be created and stored in memory.

The framework is available on GitHub and those interested in more details can go through the Tutorial and the Documentation.

Rate this Article

Adoption Stage
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread
Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Discuss

Login to InfoQ to interact with what matters most to you.


Recover your password...

Follow

Follow your favorite topics and editors

Quick overview of most important highlights in the industry and on the site.

Like

More signal, less noise

Build your own feed by choosing topics you want to read about and editors you want to hear from.

Notifications

Stay up-to-date

Set up your notifications and don't miss out on content that matters to you

BT