Tutorial app

Summary:
A very basic app with a scrolling list backed by a static data source. It also covers two bases that we hadn't before: Sections and Kotlin; the latter being the better choice for a modern Android tutorial anyway.

Missing right now: BUCK support (likely not going to come anytime soon due to the kapt limitations), the actual Flipper plugin integration (that's up next).

Reviewed By: jknoxville

Differential Revision: D15166195

fbshipit-source-id: 3cfaa1d243548279cabc4f244c13363f1bcaa36c

android/tutorial/build.gradle

@@ -0,0 +1,62 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the LICENSE file
+ * in the root directory of this source tree.
+ */
+
+apply plugin: 'com.android.application'
+apply plugin: 'kotlin-android'
+apply plugin: 'kotlin-android-extensions'
+apply plugin: 'kotlin-kapt'
+
+android {
+    compileSdkVersion 28
+
+
+    defaultConfig {
+        applicationId "com.facebook.flipper.sample.tutorial"
+        minSdkVersion 23
+        targetSdkVersion 28
+        versionCode 1
+        versionName "1.0"
+    }
+
+    compileOptions {
+        targetCompatibility = JavaVersion.VERSION_1_8
+        sourceCompatibility = JavaVersion.VERSION_1_8
+    }
+
+    buildTypes {
+        release {
+            minifyEnabled false
+            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
+        }
+    }
+
+}
+
+dependencies {
+    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$KOTLIN_VERSION"
+    implementation 'androidx.appcompat:appcompat:1.0.2'
+    implementation 'androidx.core:core-ktx:1.0.1'
+
+    // Flipper
+    // For simplicity, we use Flipper for both debug and release builds here.
+    // Check out the "sample" app to see how to separate your build flavors.
+    implementation project(':android')
+    implementation deps.soloader
+
+    // Litho
+    implementation deps.lithoCore
+    implementation deps.lithoWidget
+    implementation deps.lithoAnnotations
+    implementation deps.lithoSectionsAnnotations
+    implementation deps.lithoFresco
+    implementation deps.lithoSectionsCore
+    implementation deps.lithoSectionsDebug
+    implementation deps.lithoSectionsWidget
+    implementation deps.fresco
+    kapt deps.lithoProcessor
+    kapt deps.lithoSectionsProcessor
+}

android/tutorial/proguard-rules.pro

@@ -0,0 +1,21 @@
+# Add project specific ProGuard rules here.
+# You can control the set of applied configuration files using the
+# proguardFiles setting in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# If your project uses WebView with JS, uncomment the following
+# and specify the fully qualified class name to the JavaScript interface
+# class:
+#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
+#   public *;
+#}
+
+# Uncomment this to preserve the line number information for
+# debugging stack traces.
+#-keepattributes SourceFile,LineNumberTable
+
+# If you keep the line number information, uncomment this to
+# hide the original source file name.
+#-renamesourcefileattribute SourceFile

android/tutorial/src/main/AndroidManifest.xml

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="utf-8"?><!--
+  ~ Copyright (c) Facebook, Inc. and its affiliates.
+  ~
+  ~ This source code is licensed under the MIT license found in the LICENSE file
+  ~ in the root directory of this source tree.
+  -->
+
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    package="com.facebook.flipper.sample.tutorial">
+
+    <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
+
+    <application
+        android:name=".TutorialApplication"
+        android:allowBackup="true"
+        android:icon="@mipmap/ic_launcher"
+        android:label="@string/app_name"
+        android:roundIcon="@mipmap/ic_launcher_round"
+        android:supportsRtl="true"
+        android:theme="@style/AppTheme">
+        <activity android:name=".MainActivity">
+            <intent-filter>
+                <action android:name="android.intent.action.MAIN" />
+
+                <category android:name="android.intent.category.LAUNCHER" />
+            </intent-filter>
+        </activity>
+    </application>
+
+</manifest>

android/tutorial/src/main/java/com/facebook/flipper/sample/tutorial/MainActivity.kt

@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the LICENSE file
+ * in the root directory of this source tree.
+ */
+
+package com.facebook.flipper.sample.tutorial
+
+import androidx.appcompat.app.AppCompatActivity
+import android.os.Bundle
+import com.facebook.flipper.sample.tutorial.ui.RootComponent
+import com.facebook.litho.LithoView
+import com.facebook.litho.sections.SectionContext
+
+class MainActivity : AppCompatActivity() {
+
+    private val sectionContext: SectionContext by lazy { SectionContext(this) }
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+
+        setContentView(
+                LithoView.create(this, RootComponent.create(sectionContext).build())
+        )
+    }
+}

android/tutorial/src/main/java/com/facebook/flipper/sample/tutorial/TutorialApplication.kt

@@ -0,0 +1,32 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the LICENSE file
+ * in the root directory of this source tree.
+ */
+
+package com.facebook.flipper.sample.tutorial
+
+import android.app.Application
+import com.facebook.drawee.backends.pipeline.Fresco
+import com.facebook.flipper.android.AndroidFlipperClient
+import com.facebook.flipper.core.FlipperClient
+import com.facebook.flipper.plugins.inspector.DescriptorMapping
+import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin
+import com.facebook.flipper.plugins.litho.LithoFlipperDescriptors
+import com.facebook.soloader.SoLoader
+
+class TutorialApplication : Application() {
+    override fun onCreate() {
+        super.onCreate()
+
+        SoLoader.init(this, false)
+        Fresco.initialize(this)
+        val flipperClient = AndroidFlipperClient.getInstance(this)
+        val descriptorMapping = DescriptorMapping.withDefaults()
+        LithoFlipperDescriptors.addWithSections(descriptorMapping)
+
+        flipperClient.addPlugin(InspectorFlipperPlugin(this, descriptorMapping))
+        flipperClient.start()
+    }
+}

android/tutorial/src/main/java/com/facebook/flipper/sample/tutorial/ui/FeedItemCardSpec.kt

@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the LICENSE file
+ * in the root directory of this source tree.
+ */
+
+package com.facebook.flipper.sample.tutorial.ui
+
+import com.facebook.litho.Column
+import com.facebook.litho.Component
+import com.facebook.litho.ComponentContext
+import com.facebook.litho.annotations.LayoutSpec
+import com.facebook.litho.annotations.OnCreateLayout
+import com.facebook.litho.annotations.Prop
+import com.facebook.litho.widget.Card
+
+import com.facebook.yoga.YogaEdge.HORIZONTAL
+import com.facebook.yoga.YogaEdge.VERTICAL
+
+@LayoutSpec
+object FeedItemCardSpec {
+
+  @OnCreateLayout
+  fun onCreateLayout(
+      c: ComponentContext,
+      @Prop mammal: MarineMammal): Component =
+      Column.create(c)
+          .paddingDip(VERTICAL, 8f)
+          .paddingDip(HORIZONTAL, 16f)
+          .child(
+              Card.create(c)
+                  .content(
+                      MarineMammelComponent.create(c)
+                          .mammal(mammal)))
+          .build()
+}

android/tutorial/src/main/java/com/facebook/flipper/sample/tutorial/ui/FeedSectionSpec.kt

@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the LICENSE file
+ * in the root directory of this source tree.
+ */
+
+package com.facebook.flipper.sample.tutorial.ui
+
+import com.facebook.litho.annotations.FromEvent
+import com.facebook.litho.annotations.OnEvent
+import com.facebook.litho.annotations.Prop
+import com.facebook.litho.sections.Children
+import com.facebook.litho.sections.SectionContext
+import com.facebook.litho.sections.annotations.GroupSectionSpec
+import com.facebook.litho.sections.annotations.OnCreateChildren
+import com.facebook.litho.sections.common.DataDiffSection
+import com.facebook.litho.sections.common.RenderEvent
+import com.facebook.litho.widget.ComponentRenderInfo
+import com.facebook.litho.widget.RenderInfo
+
+@GroupSectionSpec
+object FeedSectionSpec {
+    @OnCreateChildren
+    fun onCreateChildren(c: SectionContext, @Prop data: List<MarineMammal>): Children =
+            Children.create()
+                    .child(DataDiffSection.create<MarineMammal>(c)
+                            .data(data)
+                            .renderEventHandler(FeedSection.render(c)))
+                    .build()
+
+    @OnEvent(RenderEvent::class)
+    fun render(
+            c: SectionContext,
+            @FromEvent model: MarineMammal): RenderInfo =
+            ComponentRenderInfo.create()
+                    .component(FeedItemCard.create(c).mammal(model).build())
+                    .build()
+}

android/tutorial/src/main/java/com/facebook/flipper/sample/tutorial/ui/MarineMammal.kt

@@ -0,0 +1,12 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the LICENSE file
+ * in the root directory of this source tree.
+ */
+
+package com.facebook.flipper.sample.tutorial.ui
+
+import android.net.Uri
+
+data class MarineMammal(val title: String, val picture_url: Uri)

android/tutorial/src/main/java/com/facebook/flipper/sample/tutorial/ui/MarineMammals.kt

@@ -0,0 +1,19 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the LICENSE file
+ * in the root directory of this source tree.
+ */
+
+package com.facebook.flipper.sample.tutorial.ui
+
+import androidx.core.net.toUri
+
+object MarineMammals {
+    val list = listOf(
+            MarineMammal("Polar Bear", "https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Ursus_maritimus_4_1996-08-04.jpg/190px-Ursus_maritimus_4_1996-08-04.jpg".toUri()),
+            MarineMammal("Sea Otter", "https://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Sea_otter_cropped.jpg/220px-Sea_otter_cropped.jpg".toUri()),
+            MarineMammal("West Indian Manatee", "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/FL_fig04.jpg/230px-FL_fig04.jpg".toUri()),
+            MarineMammal("Bottlenose Dolphin", "https://upload.wikimedia.org/wikipedia/commons/thumb/1/10/Tursiops_truncatus_01.jpg/220px-Tursiops_truncatus_01.jpg".toUri())
+    )
+}

android/tutorial/src/main/java/com/facebook/flipper/sample/tutorial/ui/MarineMammelComponentSpec.kt

@@ -0,0 +1,47 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the LICENSE file
+ * in the root directory of this source tree.
+ */
+
+package com.facebook.flipper.sample.tutorial.ui
+
+import android.graphics.Typeface
+import com.facebook.litho.Column
+import com.facebook.litho.Component
+import com.facebook.litho.ComponentContext
+import com.facebook.litho.annotations.LayoutSpec
+import com.facebook.litho.annotations.OnCreateLayout
+import com.facebook.litho.annotations.Prop
+import com.facebook.litho.widget.Text
+import com.facebook.yoga.YogaEdge.BOTTOM
+import com.facebook.yoga.YogaEdge.LEFT
+import com.facebook.yoga.YogaEdge.HORIZONTAL
+import com.facebook.yoga.YogaPositionType.ABSOLUTE
+
+@LayoutSpec
+object MarineMammelComponentSpec {
+    @OnCreateLayout
+    fun onCreateLayout(
+            c: ComponentContext,
+            @Prop mammal: MarineMammal
+    ): Component =
+            Column.create(c)
+                    .child(SingleImageComponent.create(c)
+                            .image(mammal.picture_url)
+                            .build()
+                    )
+                    .child(
+                            Text.create(c)
+                                    .text(mammal.title)
+                                    .textStyle(Typeface.BOLD)
+                                    .textSizeDip(24f)
+                                    .backgroundColor(0xDDFFFFFF.toInt())
+                                    .positionType(ABSOLUTE)
+                                    .positionDip(BOTTOM, 4f)
+                                    .positionDip(LEFT, 4f)
+                                    .paddingDip(HORIZONTAL, 6f))
+                    .build()
+
+}

android/tutorial/src/main/java/com/facebook/flipper/sample/tutorial/ui/RootComponentSpec.kt

@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the LICENSE file
+ * in the root directory of this source tree.
+ */
+
+package com.facebook.flipper.sample.tutorial.ui
+
+import com.facebook.litho.Component
+import com.facebook.litho.ComponentContext
+import com.facebook.litho.annotations.LayoutSpec
+import com.facebook.litho.annotations.OnCreateLayout
+import com.facebook.litho.sections.SectionContext
+import com.facebook.litho.sections.widget.RecyclerCollectionComponent
+import com.facebook.yoga.YogaEdge
+
+@LayoutSpec
+object RootComponentSpec {
+    @OnCreateLayout
+    fun onCreateLayout(c: ComponentContext): Component =
+            RecyclerCollectionComponent.create(c)
+                    .disablePTR(true)
+                    .section(FeedSection.create(SectionContext(c)).data(MarineMammals.list).build())
+                    .paddingDip(YogaEdge.TOP, 8f)
+                    .build()
+}

android/tutorial/src/main/java/com/facebook/flipper/sample/tutorial/ui/SingleImageComponentSpec.kt

@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the LICENSE file
+ * in the root directory of this source tree.
+ */
+
+package com.facebook.flipper.sample.tutorial.ui
+
+import android.net.Uri
+import com.facebook.drawee.backends.pipeline.Fresco
+import com.facebook.litho.Component
+import com.facebook.litho.ComponentContext
+import com.facebook.litho.annotations.LayoutSpec
+import com.facebook.litho.annotations.OnCreateLayout
+import com.facebook.litho.annotations.Prop
+import com.facebook.litho.annotations.PropDefault
+import com.facebook.litho.fresco.FrescoImage
+
+@LayoutSpec
+object SingleImageComponentSpec {
+
+  @PropDefault
+  val imageAspectRatio = 1f
+
+  @OnCreateLayout
+  fun onCreateLayout(
+      c: ComponentContext,
+      @Prop image: Uri,
+      @Prop(optional = true) imageAspectRatio: Float): Component =
+      Fresco.newDraweeControllerBuilder()
+          .setUri(image)
+          .build().let {
+        FrescoImage.create(c)
+            .controller(it)
+            .imageAspectRatio(imageAspectRatio)
+            .build()
+      }
+}

android/tutorial/src/main/res/drawable-v24/ic_launcher_foreground.xml

@@ -0,0 +1,41 @@
+<!--
+  ~ Copyright (c) Facebook, Inc. and its affiliates.
+  ~
+  ~ This source code is licensed under the MIT license found in the LICENSE file
+  ~ in the root directory of this source tree.
+  -->
+
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:aapt="http://schemas.android.com/aapt"
+    android:width="108dp"
+    android:height="108dp"
+    android:viewportWidth="108"
+    android:viewportHeight="108">
+    <path
+        android:fillType="evenOdd"
+        android:pathData="M32,64C32,64 38.39,52.99 44.13,50.95C51.37,48.37 70.14,49.57 70.14,49.57L108.26,87.69L108,109.01L75.97,107.97L32,64Z"
+        android:strokeWidth="1"
+        android:strokeColor="#00000000">
+        <aapt:attr name="android:fillColor">
+            <gradient
+                android:endX="78.5885"
+                android:endY="90.9159"
+                android:startX="48.7653"
+                android:startY="61.0927"
+                android:type="linear">
+                <item
+                    android:color="#44000000"
+                    android:offset="0.0" />
+                <item
+                    android:color="#00000000"
+                    android:offset="1.0" />
+            </gradient>
+        </aapt:attr>
+    </path>
+    <path
+        android:fillColor="#FFFFFF"
+        android:fillType="nonZero"
+        android:pathData="M66.94,46.02L66.94,46.02C72.44,50.07 76,56.61 76,64L32,64C32,56.61 35.56,50.11 40.98,46.06L36.18,41.19C35.45,40.45 35.45,39.3 36.18,38.56C36.91,37.81 38.05,37.81 38.78,38.56L44.25,44.05C47.18,42.57 50.48,41.71 54,41.71C57.48,41.71 60.78,42.57 63.68,44.05L69.11,38.56C69.84,37.81 70.98,37.81 71.71,38.56C72.44,39.3 72.44,40.45 71.71,41.19L66.94,46.02ZM62.94,56.92C64.08,56.92 65,56.01 65,54.88C65,53.76 64.08,52.85 62.94,52.85C61.8,52.85 60.88,53.76 60.88,54.88C60.88,56.01 61.8,56.92 62.94,56.92ZM45.06,56.92C46.2,56.92 47.13,56.01 47.13,54.88C47.13,53.76 46.2,52.85 45.06,52.85C43.92,52.85 43,53.76 43,54.88C43,56.01 43.92,56.92 45.06,56.92Z"
+        android:strokeWidth="1"
+        android:strokeColor="#00000000" />
+</vector>

android/tutorial/src/main/res/drawable/ic_launcher_background.xml

@@ -0,0 +1,177 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  ~ Copyright (c) Facebook, Inc. and its affiliates.
+  ~
+  ~ This source code is licensed under the MIT license found in the LICENSE file
+  ~ in the root directory of this source tree.
+  -->
+
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="108dp"
+    android:height="108dp"
+    android:viewportWidth="108"
+    android:viewportHeight="108">
+    <path
+        android:fillColor="#008577"
+        android:pathData="M0,0h108v108h-108z" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M9,0L9,108"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,0L19,108"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M29,0L29,108"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M39,0L39,108"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M49,0L49,108"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M59,0L59,108"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M69,0L69,108"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M79,0L79,108"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M89,0L89,108"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M99,0L99,108"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,9L108,9"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,19L108,19"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,29L108,29"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,39L108,39"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,49L108,49"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,59L108,59"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,69L108,69"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,79L108,79"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,89L108,89"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M0,99L108,99"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,29L89,29"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,39L89,39"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,49L89,49"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,59L89,59"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,69L89,69"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M19,79L89,79"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M29,19L29,89"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M39,19L39,89"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M49,19L49,89"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M59,19L59,89"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M69,19L69,89"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+    <path
+        android:fillColor="#00000000"
+        android:pathData="M79,19L79,89"
+        android:strokeWidth="0.8"
+        android:strokeColor="#33FFFFFF" />
+</vector>

android/tutorial/src/main/res/mipmap-anydpi-v26/ic_launcher.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  ~ Copyright (c) Facebook, Inc. and its affiliates.
+  ~
+  ~ This source code is licensed under the MIT license found in the LICENSE file
+  ~ in the root directory of this source tree.
+  -->
+
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@drawable/ic_launcher_background" />
+    <foreground android:drawable="@drawable/ic_launcher_foreground" />
+</adaptive-icon>

android/tutorial/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  ~ Copyright (c) Facebook, Inc. and its affiliates.
+  ~
+  ~ This source code is licensed under the MIT license found in the LICENSE file
+  ~ in the root directory of this source tree.
+  -->
+
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@drawable/ic_launcher_background" />
+    <foreground android:drawable="@drawable/ic_launcher_foreground" />
+</adaptive-icon>

android/tutorial/src/main/res/values/colors.xml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  ~ Copyright (c) Facebook, Inc. and its affiliates.
+  ~
+  ~ This source code is licensed under the MIT license found in the LICENSE file
+  ~ in the root directory of this source tree.
+  -->
+
+<resources>
+    <color name="colorPrimary">#008577</color>
+    <color name="colorPrimaryDark">#00574B</color>
+    <color name="colorAccent">#D81B60</color>
+</resources>

android/tutorial/src/main/res/values/strings.xml

@@ -0,0 +1,10 @@
+<!--
+  ~ Copyright (c) Facebook, Inc. and its affiliates.
+  ~
+  ~ This source code is licensed under the MIT license found in the LICENSE file
+  ~ in the root directory of this source tree.
+  -->
+
+<resources>
+    <string name="app_name">Flipper Tutorial</string>
+</resources>

android/tutorial/src/main/res/values/styles.xml

@@ -0,0 +1,18 @@
+<!--
+  ~ Copyright (c) Facebook, Inc. and its affiliates.
+  ~
+  ~ This source code is licensed under the MIT license found in the LICENSE file
+  ~ in the root directory of this source tree.
+  -->
+
+<resources>
+
+    <!-- Base application theme. -->
+    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
+        <!-- Customize your theme here. -->
+        <item name="colorPrimary">@color/colorPrimary</item>
+        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
+        <item name="colorAccent">@color/colorAccent</item>
+    </style>
+
+</resources>

android/tutorial/src/test/java/com/facebook/flipper/sample/tutorial/ExampleUnitTest.kt

@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the LICENSE file
+ * in the root directory of this source tree.
+ */
+
+package com.facebook.flipper.sample.tutorial
+
+import org.junit.Test
+
+import org.junit.Assert.*
+
+/**
+ * Example local unit test, which will execute on the development machine (host).
+ *
+ * See [testing documentation](http://d.android.com/tools/testing).
+ */
+class ExampleUnitTest {
+    @Test
+    fun addition_isCorrect() {
+        assertEquals(4, 2 + 2)
+    }
+}

build.gradle

@@ -3,13 +3,14 @@
 // This source code is licensed under the MIT license found in the LICENSE file
 // in the root directory of this source tree.
 
-buildscript {
+buildscript { 
     repositories {
         google()
         jcenter()
     }
     dependencies {
         classpath 'com.android.tools.build:gradle:3.4.0'
+        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$KOTLIN_VERSION"
     }
 }
 
@@ -67,10 +68,13 @@ ext.deps = [
         // Litho
         lithoAnnotations   : "com.facebook.litho:litho-annotations:$LITHO_VERSION",
         lithoCore          : "com.facebook.litho:litho-core:$LITHO_VERSION",
+        lithoSectionsAnnotations: "com.facebook.litho:litho-sections-annotations:$LITHO_VERSION",
         lithoSectionsDebug : "com.facebook.litho:litho-sections-debug:$LITHO_VERSION",
         lithoSectionsCore  : "com.facebook.litho:litho-sections-core:$LITHO_VERSION",
+        lithoSectionsWidget  : "com.facebook.litho:litho-sections-widget:$LITHO_VERSION",
         lithoWidget        : "com.facebook.litho:litho-widget:$LITHO_VERSION",
         lithoProcessor     : "com.facebook.litho:litho-processor:$LITHO_VERSION",
+        lithoSectionsProcessor: "com.facebook.litho:litho-sections-processor:$LITHO_VERSION",
         lithoFresco        : "com.facebook.litho:litho-fresco:$LITHO_VERSION",
         lithoTesting       : "com.facebook.litho:litho-testing:$LITHO_VERSION",
         // Debugging and testing

gradle.properties

@@ -14,6 +14,7 @@ POM_DEVELOPER_NAME=facebook
 # Shared version numbers
 LITHO_VERSION=0.25.0
 ANDROIDX_VERSION=1.0.0
+KOTLIN_VERSION=1.3.21
 
 # Gradle internals
 org.gradle.internal.repository.max.retries=10

settings.gradle

@@ -13,6 +13,7 @@ include ':fbjni'
 include ':easywsclient'
 include ':sonarcpp'
 include ':sample'
+include ':tutorial'
 include ':doubleconversion'
 include ':glog'
 include ':libevent'
@@ -24,6 +25,7 @@ project(':fbjni').projectDir = file('libs/fbjni')
 project(':easywsclient').projectDir = file('libs/easywsclient')
 project(':sonarcpp').projectDir = file('xplat')
 project(':sample').projectDir = file('android/sample')
+project(':tutorial').projectDir = file('android/tutorial')
 project(':android').projectDir = file('android')
 project(':doubleconversion').projectDir = file('android/third-party/external/double-conversion/')
 project(':glog').projectDir = file('android/third-party/external/glog/')