Skip to main content

Setting up the project

To add Litho to your project you'll need to configure it with correct settings and dependencies.

We publish Litho artifacts to Bintray's JCenter and first you need to make sure you have the JCenter repository in your root build.gradle file:

repositories {  jcenter()}

Add Litho core dependencies#

dependencies {
// Litho
implementation 'com.facebook.litho:litho-core:0.40.0'
implementation 'com.facebook.litho:litho-widget:0.40.0'
annotationProcessor 'com.facebook.litho:litho-processor:0.40.0'
// SoLoader
implementation 'com.facebook.soloader:soloader:0.9.0'
// Testing Litho
testImplementation 'com.facebook.litho:litho-testing:0.40.0'

Add Sections dependencies#

Litho comes with an optional library called Sections for declaratively building lists. You can include Sections by adding the following additional dependencies to your build.gradle file:

dependencies {
// Sections
implementation 'com.facebook.litho:litho-sections-core:0.40.0'
implementation 'com.facebook.litho:litho-sections-widget:0.40.0'
compileOnly 'com.facebook.litho:litho-sections-annotations:0.40.0'
annotationProcessor 'com.facebook.litho:litho-sections-processor:0.40.0'

Wire up native libs#

As a last step, you need to initialize SoLoader. Litho has a dependency on SoLoader to help load native libraries provided by the underlying layout engine, Yoga. Your custom Application class is a good place to do this:
public class MyApplication extends Application {
  @Override  public void onCreate() {    super.onCreate();    SoLoader.init(this, false);  }}

Testing your setup

Now you can test this config by adding a simple UI created with Litho - a built-in Text widget that displays "Hello World!" text - to an activity.


Don't worry about all the unfamiliar classes and red Text – we will explain everything in the next step of this tutorial.
import com.facebook.litho.ComponentContext;import com.facebook.litho.LithoView;import com.facebook.litho.widget.Text;
public class MyActivity extends AppCompatActivity {
  @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(50f)            .build());
    setContentView(lithoView);  }}

That's it, if you build and run the app you should see "Hello World!" displayed on the screen. Setup is complete, let's go to the next page to understand what we've just done.