Skip to main content

Setting up the Project

After creating an Android app project in Android Studio, take the steps detailed in this page to configure it with the correct settings and dependencies.

1. Add Litho core dependencies​

Add the following into the dependencies block of the build.gradle file:

dependencies {
  // Litho
  implementation 'com.facebook.litho:litho-core:0.48.0'
  implementation 'com.facebook.litho:litho-core-kotlin:0.48.0'
  implementation 'com.facebook.litho:litho-widget:0.48.0'
  implementation 'com.facebook.litho:litho-widget-kotlin:0.48.0'
  kapt 'com.facebook.litho:litho-processor:0.48.0'
  // SoLoader
  implementation 'com.facebook.soloader:soloader:0.10.5'
  // Testing Litho
  testImplementation 'com.facebook.litho:litho-testing:0.48.0'
}

2. Using the Annotation Processor (only for Spec API)​

info

If you don't plan to create new Spec-based components and only will work with new Kotlin API, you don't need neither kotlin-kapt plugin nor kapt 'com.facebook.litho:litho-processor:<version>' dependency.

The Annotation Processor is a part of the application build/compile process that generates code by reading annotations (such as @Override and @SuppressWarnings). The old Litho Spec API relies on annotation processing to generate real components implementations based on developer-written Specs. In order to enable Litho annotation processors in your project you need to apply the kotlin-kapt plugin at the top of your app's build.gradle file:

apply plugin: 'kotlin-kapt'

3. Wire up native libs​

Litho has a dependency on SoLoader to help load native libraries provided by the underlying layout engine, Yoga1.

Your custom Application class is a good place to initialize SoLoader:

MyApplication.kt
class MyApplication: Application() {

  override fun onCreate() {
    super.onCreate()
    SoLoader.init(this, false)
  }
}

Testing your setup​

You can test the above setup steps by adding the following simple UI, created with Litho, that displays "Hello, World!" text to an activity:

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.facebook.litho.Component
import com.facebook.litho.ComponentScope
import com.facebook.litho.KComponent
import com.facebook.litho.LithoView
import com.facebook.litho.kotlin.widget.Text
import com.facebook.rendercore.dp

class MyActivity : AppCompatActivity() {

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    val lithoView = LithoView.create(this /* context */, MyComponent())
    setContentView(lithoView)
  }
}

class MyComponent() : KComponent() {
  override fun ComponentScope.render(): Component {
    return Text(text = "Hello, World!", textSize = 50.dp)
  }
}

If you build and run the app you should see "Hello, World!" displayed on the screen. Project setup is complete!

What next?​

The next section of the tutorial, Components and Props, gives you a deeper understanding of what you've completed in this section.

  1. Yoga is a cross-platform (usable on Android, iOS, and other platforms) implementation of the Flexbox layout system used in web browsers. Litho uses Yoga to enable layouts (positioning of elements in the screen) to be specified via the Flexbox layouting system.↩