Adding Litho to your Project

We publish the Litho artifacts to Bintray’s JCenter. To include Litho to your Android project, make sure you include the reference to the repository in your build.gradle file:

1
2
3
repositories {
  jcenter()
}

Then add the dependencies like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
dependencies {
  // ...
  // Litho
  implementation 'com.facebook.litho:litho-core:0.8.0'
  implementation 'com.facebook.litho:litho-widget:0.8.0'
  compileOnly 'com.facebook.litho:litho-annotations:0.8.0'

  annotationProcessor 'com.facebook.litho:litho-processor:0.8.0'

  // SoLoader
  implementation 'com.facebook.soloader:soloader:0.2.0'

  // Optional
  // For debugging
  debugImplementation 'com.facebook.litho:litho-stetho:0.8.0'

  // For integration with Fresco
  implementation 'com.facebook.litho:litho-fresco:0.8.0'

  // For testing
  testImplementation 'com.facebook.litho:litho-testing:0.8.0'
}

Adding Sections to your Project

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:

1
2
3
4
5
6
7
8
9
dependencies {

  // Sections
  implementation 'com.facebook.litho:litho-sections-core:0.8.0'
  implementation 'com.facebook.litho:litho-sections-widget:0.8.0'
  compileOnly 'com.facebook.litho:litho-sections-annotations:0.8.0'

  annotationProcessor 'com.facebook.litho:litho-sections-processor:0.8.0'
}

Using Snapshot releases

IMPORTANT: This will break and may set your house on fire. Snapshots are unsigned and automatically published by our CI system. Use them for testing purposes only.

First, add the Sonatype Snapshots repository to your gradle config:

1
2
3
repositories {
  maven { url "https://oss.sonatype.org/content/repositories/snapshots/" }
}

Then you can access the snapshot versions of all Litho artifacts that we publish:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
dependencies {
  // ...
  // Litho
  implementation 'com.facebook.litho:litho-core:0.8.1-SNAPSHOT'
  implementation 'com.facebook.litho:litho-widget:0.8.1-SNAPSHOT'
  compileOnly 'com.facebook.litho:litho-annotations:0.8.1-SNAPSHOT'

  annotationProcessor 'com.facebook.litho:litho-processor:0.8.1-SNAPSHOT'

  // SoLoader
  implementation 'com.facebook.soloader:soloader:0.2.0'

  // Optional
  // For debugging
  debugImplementation 'com.facebook.litho:litho-stetho:0.8.1-SNAPSHOT'

  // For integration with Fresco
  implementation 'com.facebook.litho:litho-fresco:0.8.1-SNAPSHOT'

  // For testing
  testImplementation 'com.facebook.litho:litho-testing:0.8.1-SNAPSHOT'
}

Adding Litho to your Kotlin Project

IMPORTANT: Kotlin support Litho is experimental at this point. You will very likely run into bugs. Please see Issue #267 for known issues and work-arounds.

In order to use Litho’s annotation processor, you need to opt in to the Kotlin KAPT plugin at the top of your application’s build.gradle file:

1
apply plugin: 'kotlin-kapt'

We publish the Litho artifacts to Bintray’s JCenter. To include Litho to your Android project, make sure you include the reference to the repository in your build.gradle file:

1
2
3
repositories {
  jcenter()
}

Then add the dependencies like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
dependencies {
  // ...
  // Litho
  implementation 'com.facebook.litho:litho-core:0.8.0'
  implementation 'com.facebook.litho:litho-widget:0.8.0'
  compileOnly 'com.facebook.litho:litho-annotations:0.8.0'

  kapt 'com.facebook.litho:litho-processor:0.8.0'

  // SoLoader
  implementation 'com.facebook.soloader:soloader:0.2.0'

  // Optional
  // For debugging
  debugImplementation 'com.facebook.litho:litho-stetho:0.8.0'

  // For integration with Fresco
  implementation 'com.facebook.litho:litho-fresco:0.8.0'

  // For testing
  testImplementation 'com.facebook.litho:litho-testing:0.8.0'
}

Adding Sections to your Project

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:

1
2
3
4
5
6
7
8
9
dependencies {

  // Sections
  implementation 'com.facebook.litho:litho-sections-core:0.8.0'
  implementation 'com.facebook.litho:litho-sections-widget:0.8.0'
  compileOnly 'com.facebook.litho:litho-sections-annotations:0.8.0'

  kapt 'com.facebook.litho:litho-sections-processor:0.8.0'
}

Using Snapshot releases

IMPORTANT: This will break and may set your house on fire. Snapshots are unsigned and automatically published by our CI system. Use them for testing purposes only.

First, add the Sonatype Snapshots repository to your gradle config:

1
2
3
repositories {
  maven { url "https://oss.sonatype.org/content/repositories/snapshots/" }
}

Then you can access the snapshot versions of all Litho artifacts that we publish:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
dependencies {
  // ...
  // Litho
  implementation 'com.facebook.litho:litho-core:0.8.1-SNAPSHOT'
  implementation 'com.facebook.litho:litho-widget:0.8.1-SNAPSHOT'
  compileOnly 'com.facebook.litho:litho-annotations:0.8.1-SNAPSHOT'

  kapt 'com.facebook.litho:litho-processor:0.8.1-SNAPSHOT'

  // SoLoader
  implementation 'com.facebook.soloader:soloader:0.2.0'

  // Optional
  // For debugging
  debugImplementation 'com.facebook.litho:litho-stetho:0.8.1-SNAPSHOT'

  // For integration with Fresco
  implementation 'com.facebook.litho:litho-fresco:0.8.1-SNAPSHOT'

  // For testing
  testImplementation 'com.facebook.litho:litho-testing:0.8.1-SNAPSHOT'
}

Adding Litho to your Project

You can include Litho to your Android project via Buck by adding the following to your BUCK file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
android_prebuilt_aar(
    name = "litho",
    aar = ":litho-core.aar",
    visibility = ["PUBLIC"],
)

remote_file(
    name = "litho-core.aar",
    sha1 = "sha1here",
    url = "mvn:com.facebook.litho:litho-core:aar:0.8.0",
)

prebuilt_jar(
    name = "litho-annotation",
    binary_jar = ":litho-annotation.jar",
    visibility = ["PUBLIC"],
)

remote_file(
    name = "litho-processor.jar",
    sha1 = "sha1here",
    url = "mvn:com.facebook.litho:litho-processor:jar:0.8.0",
)

prebuilt_jar(
    name = "litho-processor",
    binary_jar = ":litho-processor.jar",
    visibility = ["PUBLIC"],
)

remote_file(
    name = "litho-annotation.jar",
    sha1 = "sha1here",
    url = "mvn:com.facebook.litho:litho-annotation:jar:0.8.0",
)

android_prebuilt_aar(
    name = "litho-widget",
    aar = ":litho-widget.aar",
    visibility = ["PUBLIC"],
)

remote_file(
    name = "litho-widget.aar",
    sha1 = "sha1here",
    url = "mvn:com.facebook.litho:litho-widget:aar:0.8.0",
)

android_library(
    ...
    # Your target here
    ...
    annotation_processor_deps = [
        ":litho-annotation",
        ":litho-processor",
    ],
    annotation_processors = [
        "com.facebook.litho.specmodels.processor.ComponentsProcessor",
    ],
    provided_deps = [
        "litho-annotation",
    ],
    deps = [
        ":litho",
        ":litho-widget",
        ...
    ]
)

Adding Sections to your Project

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
android_prebuilt_aar(
    name = "litho-sections",
    aar = ":litho-sections-core.aar",
    visibility = ["PUBLIC"],
)

remote_file(
    name = "litho-sections-core.aar",
    sha1 = "sha1here",
    url = "mvn:com.facebook.litho:litho-sections-core:aar:0.8.0",
)

prebuilt_jar(
    name = "litho-sections-annotation",
    binary_jar = ":litho-sections-annotation.jar",
    visibility = ["PUBLIC"],
)

remote_file(
    name = "litho-sections-processor.jar",
    sha1 = "sha1here",
    url = "mvn:com.facebook.litho:litho-sections-processor:jar:0.8.0",
)

prebuilt_jar(
    name = "litho-sections-processor",
    binary_jar = ":litho-sections-processor.jar",
    visibility = ["PUBLIC"],
)

remote_file(
    name = "litho-sections-annotation.jar",
    sha1 = "sha1here",
    url = "mvn:com.facebook.litho:litho-sections-annotation:jar:0.8.0",
)

android_prebuilt_aar(
    name = "litho-sections-widget",
    aar = ":litho-sections-widget.aar",
    visibility = ["PUBLIC"],
)

remote_file(
    name = "litho-sections-widget.aar",
    sha1 = "sha1here",
    url = "mvn:com.facebook.litho:litho-sections-widget:aar:0.8.0",
)

Then modify your android_library target as such:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
android_library(
    ...
    # Your target here
    ...
    annotation_processor_deps = [
        ":litho-annotation",
        ":litho-processor",
        ":litho-sections-annotations",
        ":litho-sections-processor",
    ],
    annotation_processors = [
        "com.facebook.litho.specmodels.processor.ComponentsProcessor",
        "com.facebook.litho.specmodels.processor.sections.SectionsComponentProcessor",
    ],
    provided_deps = [
        "litho-annotations",
        "litho-sections-annotations",
    ],
    deps = [
        ":litho",
        ":litho-widget",
        ":litho-sections",
        ":litho-sections-widget",
        ...
    ]
)

Testing your Installation

You can test your install by adding a view created with Litho to an activity.

First, initialize SoLoader. Litho has a dependency on SoLoader to help load native libraries provided by the underlying layout engine, Yoga. Your Application class is a good place to do this:

1
2
3
4
5
6
7
8
9
10
[MyApplication.java]
public class MyApplication extends Application {

  @Override
  public void onCreate() {
    super.onCreate();

    SoLoader.init(this, false);
  }
}

Then, add a predefined Litho Text widget to an activity that displays “Hello World!”:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
[MyActivity.java]
import com.facebook.litho.ComponentContext;
import com.facebook.litho.LithoView;

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);
  }
}

Now, when you run the app you should see “Hello World!” displayed on the screen.

Edit on GitHub