Skip to main content

Setting up the Project

We have set up a sample project for you to follow along with this tutorial. You can edit the file/s directly in the sample project and run the sample app to observe the changes.

1. Get the sample project​

  • Clone facebook/litho and open the repository root in Android Studio.
  • The starting point of your project is sample/src/main/java/com/facebook/samples/litho/onboarding/MyActivity.kt.

2. Project dependencies​

To use Litho in your own app, add the dependencies to your module's build.gradle:

dependencies {
  implementation 'com.facebook.litho:litho-core:0.50.2'
  implementation 'com.facebook.litho:litho-widget-kotlin:0.50.2'
}

From Litho 0.51.0, Kotlin code that calls Litho hooks also has to be built with the Litho Gradle plugin. Apply it with the same version as the Litho dependencies, and add mavenCentral() to pluginManagement.repositories in settings.gradle:

plugins {
  id 'com.facebook.litho' version '<Litho version>'
}

The required dependencies are already set up for your sample project.

3. Testing your setup​

info

This tutorial is focused on Kotlin API using KComponents. Spec API is legacy and should only be considered to maintain existing code.

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.kotlin.widget.Text
import com.facebook.litho.surface.getLithoView
import com.facebook.litho.surface.setLithoContent
import com.facebook.rendercore.dp

class MyActivity : AppCompatActivity() {

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

    setLithoContent { MyComponent() }
    setContentView(getLithoView())
  }
}

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

The command to build and install the app is:

./gradlew :sample:installDebug

Running the app navigate to "Tutorial" -> "1. Hello World" where you'd see the preview of this activity. You can make changes to this file throughout the next sections and run the app to monitor changes.

What next?​

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