Widgets

Litho provides a number of build-in components. You can find the full list of components and APIs within our javadocs for the com.facebook.litho.widget package.

We'll show and explain here a list of the most basic widgets.

Font Size: bold italic Size Vertical Size: Horizontal Size: Border Border Radius: Border Size: Box Shadow Text Shadow Vertical Position: Horizontal Position: Blur Radius:

TextTextInputImageCardSolidColorProgressSpinnerVerticalScrollHorizontalScrollRecycler

Text

This is the most basic Litho component to show simple text. It's the equivalent of an Android TextView within Litho.

Required Props
  • CharSequence text: Text to display.

Usage

Text has numerous optional props you can use to style your text, same as TextView since both use android.text.Layout under the hood. A full list of them is available in the javadocs. Most props directly accept resources ids too.

final Component component =
Text.create(c)
.text("This is my example text")
.textSizeRes(R.dimen.my_text_size)
.textColorRes(R.color.my_text_color)
.textAlignment(Layout.Alignment.ALIGN_CENTER)
.build()

TextInput

Component that renders an editable text input using an Android EditText.

Required Props
  • None.

Usage

Because this component is backed by Android's EditText, many native capabilities are applicable!

  • Use an android.text.InputFilter to set a text length limit or modify text input.
  • Change the input representation by passing an android.text.InputType constants.
  • For performance reasons, avoid re-creating the Component with different props to change its configuration. You can instead use Event triggers OnTrigger to update text, request view focus or set selection. e.g. TextInput.setText(c, "myTextInputKey", "myText").
private static final InputFilter lenFilter = new InputFilter.LengthFilter(maxLength);
Component component =
TextInput.create(c)
.initialText(text)
.textColorStateList(ColorStateList.valueOf(color))
.multiline(true)
.inputFilter(lenFilter)
.backgroundColor(Color.TRANSPARENT)
.inputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_FLAG_CAP_SENTENCES)
.build()

Image

A component that is able to display drawable resources.

Required Props
  • Drawable drawable: Drawable to display.

Usage

Component component =
Image.create(c)
.drawableRes(R.drawable.my_drawable)
.scaleType(ImageView.ScaleType.CENTER_CROP)
.build()

Card

The Litho equivalent of an Android CardView. Card applies borders with shadows/elevation to a given component. If your card is rendered on top of a dynamically colored background which cannot be "faked" using the Card component, check out the less performant TransparencyEnabledCard.

Required Props
  • Component content: The component to decorate.

Usage

Component component =
Card.create(c)
.content(myContentComponent)
.clippingColorRes(R.color.my_clipping_color)
.cornerRadiusDip(8)
.build()

SolidColor

A simple Component to render solid color.

Required Props
  • int color: Color to display.

Usage

Component component =
SolidColor.create(c)
.color(Color.RED)
.alpha(0.5)
.build()

Progress

Renders an infinitely spinning progress bar backed by the Android's ProgressBar.

Required Props
  • None.

Usage

Component component =
Progress.create(c)
.indeterminateDrawableRes(R.drawable.my_loading_spinner)
.build()

Spinner

A simple spinner (dropdown) component. Derived from the standard Android Spinner.

Required Props
  • List<String> options: List of possible options to select from.
  • String selectedOption: Currently selected option.

Usage

List<String> myOptions = ...
Component component =
Spinner.create(c)
.options(myOptions)
.selectedOption(myOptions.get(0))
.build()

VerticalScroll

Component that wraps another component, allowing it to be vertically scrollable. It's analogous to Android's ScrollView.

Required Props
  • Component childComponent: Component to vertically scroll.

Usage

Component component =
VerticalScroll.create(c)
.childComponent(myComponentToScroll)
.verticalFadingEdgeEnabled(true)
.fadingEdgeLengthDip(FADING_EDGE_LENGTH_DP)
.build()

HorizontalScroll

Component that wraps another component, allowing it to be horizontally scrollable. It's analogous to Android's HorizontalScrollView.

Required Props
  • Component contentProps: Component to horizontally scroll.

Usage

Component component =
HorizontalScroll.create(c)
.contentProps(myComponentToScroll)
.build()

Recycler

Recycler is the equivalent of Android's RecyclerView. We suggest you to use Sections for efficient lists rendering, which is using Recycler under the hood. However, if you really want to use Recycler directly, we have an advanced guide dedicated to it.

Edit this page