Layout with Row and Column

Litho uses Yoga which is an implementation of Flexbox to measure and layout components on screen. If you have used Flexbox on the web before this should be very familiar. If you are more familiar with how Android normally performs Layout then Flexbox will remind you a lot of LinearLayout.

In Litho you can use a Row to achieve a similar layout to a horizontal LinearLayout.

Row.create(c)
    .child(...)
    .child(...)
    .build();

Or a Column to achieve a similar layout to a vertical LinearLayout.

Column.create(c)
    .child(...)
    .child(...)
    .build();

To achieve an effect similar to a LinearLayout with weights Flexbox provides a concept called flexGrow(<weight>).

Row.create(c)
    .child(
        SolidColor.create(c)
            .color(RED)
            .flexGrow(1))
    .child(
        SolidColor.create(c)
            .color(BLUE)
            .flexGrow(1))
    .build();

If you would like to overlay one view on top of the other -- similar to a FrameLayout -- Flexbox can do that with positionType(ABSOLUTE).

Column.create(c)
    .child(
        Image.create(c)
            .drawableRes(R.drawable.some_big_image)
            .widthDip(100)
            .heightDip(100))
    .child(
        Text.create(c)
            .text("Overlaid text")
            .positionType(ABSOLUTE))
    .build();

For more documentation of specific Flexbox properties check out the Yoga documentation or explore any web resources on how Flexbox works.