Built-in 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#
TextThis is the most basic Litho component to show simple text. It's the equivalent of an Android TextView
within Litho.
#
Required PropsCharSequence text
: Text to display.
#
UsageText
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.
#
TextInput Component that renders an editable text input using an Android EditText
.
#
Required Props- None.
#
UsageBecause 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")
.
#
ImageA component that is able to display drawable resources.
#
Required PropsDrawable drawable
: Drawable to display.
#
Usage#
CardThe 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, use the less performant prop transparencyEnabled(true)
.
#
Required PropsComponent content
: The component to decorate.
#
Usage#
SolidColorA simple Component to render solid color.
#
Required Propsint color
: Color to display.
#
Usage#
ProgressRenders an infinitely spinning progress bar backed by the Android's ProgressBar
.
#
Required Props- None.
#
Usage#
SpinnerA simple spinner (dropdown) component. Derived from the standard Android Spinner
.
#
Required PropsList<String> options
: List of possible options to select from.String selectedOption
: Currently selected option.
#
Usage#
VerticalScrollComponent that wraps another component, allowing it to be vertically scrollable. It's analogous to Android's ScrollView
.
#
Required PropsComponent childComponent
: Component to vertically scroll.
#
Usage#
HorizontalScrollComponent that wraps another component, allowing it to be horizontally scrollable. It's
analogous to Android's HorizontalScrollView
.
#
Required PropsComponent contentProps
: Component to horizontally scroll.
#
Usage#
RecyclerRecycler
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.