com.facebook.litho.Row Java Examples

private Component getNonAnimatingComponent() {
  return TestAnimationsComponent.create(mLithoViewRule.getContext())
      .stateCaller(mStateCaller)
      .transition(null)
      .testComponent(
          new TestAnimationsComponentSpec
              .TestComponent() { // This could be a lambda but it fails ci.
            @Override
            public Component getComponent(ComponentContext componentContext, boolean state) {
              return Row.create(componentContext)
                  .heightDip(200)
                  .widthDip(200)
                  .justifyContent(state ? YogaJustify.FLEX_START : YogaJustify.FLEX_END)
                  .alignItems(state ? YogaAlign.FLEX_START : YogaAlign.FLEX_END)
                  .child(
                      Row.create(componentContext)
                          .heightDip(40)
                          .widthDip(40)
                          .backgroundColor(Color.parseColor("#ee1111"))
                          .build())
                  .build();
            }
          })
      .build();
}
 

@OnCreateLayout
static Component onCreateLayout(ComponentContext c, @Prop final Decade decade) {
  return Row.create(c)
      .alignItems(YogaAlign.CENTER)
      .paddingDip(YogaEdge.ALL, 16)
      .child(Row.create(c).heightPx(1).backgroundColor(0xFFAAAAAA).flex(1))
      .child(
          Text.create(c)
              .text(String.valueOf(decade.year))
              .textSizeDip(14)
              .textColor(0xFFAAAAAA)
              .marginDip(YogaEdge.HORIZONTAL, 10)
              .flex(0))
      .child(Row.create(c).heightPx(1).backgroundColor(0xFFAAAAAA).flex(1))
      .backgroundColor(0xFFFAFAFA)
      .build();
}
 

private static Component createHorizontalScrollChildren(
    ComponentContext c, List<Pair<String, Integer>> items) {
  final Row.Builder rowBuilder = Row.create(c);
  for (Pair<String, Integer> colorItem : items) {
    rowBuilder.child(
        Row.create(c)
            .paddingDip(YogaEdge.ALL, 10)
            .backgroundColor(colorItem.second)
            .child(
                Text.create(c)
                    .text(colorItem.first)
                    .textSizeSp(20)
                    .alignSelf(YogaAlign.CENTER)
                    .heightDip(100)));
  }
  return rowBuilder.build();
}
 

@OnCreateLayout
static Component onCreateLayout(
    ComponentContext c, @State ImmutableList<Pair<String, Integer>> items) {
  return Column.create(c)
      .child(
          Row.create(c)
              .paddingDip(YogaEdge.VERTICAL, 10)
              .child(
                  Text.create(c)
                      .paddingDip(YogaEdge.RIGHT, 10)
                      .alignSelf(YogaAlign.CENTER)
                      .clickHandler(HorizontalScrollRootComponent.onClick(c, true))
                      .text("PREPEND")
                      .textSizeSp(20))
              .child(
                  Text.create(c)
                      .paddingDip(YogaEdge.LEFT, 10)
                      .alignSelf(YogaAlign.CENTER)
                      .clickHandler(HorizontalScrollRootComponent.onClick(c, false))
                      .text("APPEND")
                      .textSizeSp(20)))
      .child(HorizontalScroll.create(c).contentProps(createHorizontalScrollChildren(c, items)))
      .build();
}
 

@OnEvent(RenderEvent.class)
static RenderInfo onRender(ComponentContext c, @FromEvent Object model, @FromEvent int index) {
  return ComponentRenderInfo.create()
      .component(
          Row.create(c)
              .justifyContent(YogaJustify.CENTER)
              .widthDip(120)
              .heightDip(120)
              .backgroundColor((int) model)
              .child(
                  Text.create(c)
                      .textSizeSp(20)
                      .textColor(Color.LTGRAY)
                      .text(Integer.toString(index))
                      .verticalGravity(VerticalGravity.CENTER)))
      .build();
}
 

@OnCreateLayout
static Component onCreateLayout(ComponentContext c) {
  return Row.create(c)
      .layoutDirection(YogaDirection.RTL)
      .child(Text.create(c).textSizeSp(20).text("This component is RTL"))
      .border(
          Border.create(c)
              .color(YogaEdge.START, NiceColor.RED)
              .color(YogaEdge.TOP, NiceColor.YELLOW)
              .color(YogaEdge.END, NiceColor.GREEN)
              .color(YogaEdge.BOTTOM, NiceColor.BLUE)
              .widthDip(YogaEdge.START, 2)
              .widthDip(YogaEdge.TOP, 4)
              .widthDip(YogaEdge.END, 8)
              .widthDip(YogaEdge.BOTTOM, 16)
              .build())
      .build();
}
 

@OnCreateLayout
static Component onCreateLayout(ComponentContext c) {
  return Row.create(c)
      .child(
          Text.create(c)
              .textSizeSp(20)
              .text("This component has all borders specified to the same width, but not colors"))
      .border(
          Border.create(c)
              .color(YogaEdge.LEFT, NiceColor.RED)
              .color(YogaEdge.TOP, NiceColor.YELLOW)
              .color(YogaEdge.RIGHT, NiceColor.GREEN)
              .color(YogaEdge.BOTTOM, NiceColor.BLUE)
              .widthDip(YogaEdge.ALL, 5)
              .build())
      .build();
}
 

@OnCreateLayout
static Component onCreateLayout(
    ComponentContext c, @Prop int size, @Prop int selectedIndex, @Prop int firstVisibleIndex) {
  Row.Builder row = Row.create(c).alignItems(YogaAlign.CENTER);
  final int dotCount = Math.min(size, MAX_DOT_COUNT);
  for (int position = 0; position < dotCount; ++position) {
    final int index = firstVisibleIndex + position;
    row.child(
        Circle.create(c)
            .radiusDip(2 * getIndicatorSize(size, firstVisibleIndex, position, selectedIndex))
            .color(index == selectedIndex ? COLOR_SELECTED : COLOR_NORMAL)
            .transitionKey("dot" + index)
            .transitionKeyType(Transition.TransitionKeyType.GLOBAL)
            .marginDip(YogaEdge.ALL, 2 * 1));
  }
  return row.build();
}
 

@OnCreateLayout
static Component onCreateLayout(ComponentContext c) {
  return Row.create(c)
      .child(
          Text.create(c)
              .textSizeSp(20)
              .text("This component has a path effect with rounded corners + multiple colors"))
      .border(
          Border.create(c)
              .widthDip(YogaEdge.ALL, 20)
              .color(YogaEdge.LEFT, NiceColor.RED)
              .color(YogaEdge.TOP, NiceColor.ORANGE)
              .color(YogaEdge.RIGHT, NiceColor.GREEN)
              .color(YogaEdge.BOTTOM, NiceColor.BLUE)
              .radiusDip(20f)
              .build())
      .build();
}
 

@OnCreateLayout
static Component onCreateLayout(ComponentContext c) {
  return Row.create(c)
      .child(
          Text.create(c)
              .textSizeSp(20)
              .text("This component has a path effect with multiple colors"))
      .border(
          Border.create(c)
              .color(YogaEdge.LEFT, NiceColor.RED)
              .color(YogaEdge.TOP, NiceColor.ORANGE)
              .color(YogaEdge.RIGHT, NiceColor.GREEN)
              .color(YogaEdge.BOTTOM, NiceColor.BLUE)
              .widthDip(YogaEdge.ALL, 5)
              .discreteEffect(5f, 10f)
              .build())
      .build();
}
 

@OnCreateLayout
static Component onCreateLayout(ComponentContext c) {
  return Row.create(c)
      .child(
          Text.create(c)
              .textSizeSp(20)
              .text("This component has each border specified to a different color + width"))
      .border(
          Border.create(c)
              .color(YogaEdge.LEFT, NiceColor.RED)
              .color(YogaEdge.TOP, NiceColor.YELLOW)
              .color(YogaEdge.RIGHT, NiceColor.GREEN)
              .color(YogaEdge.BOTTOM, NiceColor.BLUE)
              .widthDip(YogaEdge.LEFT, 2)
              .widthDip(YogaEdge.TOP, 4)
              .widthDip(YogaEdge.RIGHT, 8)
              .widthDip(YogaEdge.BOTTOM, 16)
              .build())
      .build();
}
 

private static Component getContent(ComponentContext c, int color, Spannable titleText) {
  return Column.create(c)
      .child(Text.create(c).textSizeSp(25).transitionName(TITLE_TRANSITION_NAME).text(titleText))
      .child(
          Row.create(c)
              .marginDip(YogaEdge.START, 100)
              .transitionName(SQUARE_TRANSITION_NAME)
              .widthDip(200)
              .heightDip(200)
              .backgroundColor(color))
      .child(
          Text.create(c)
              .textSizeSp(12)
              .transitionName("DESCRIPTION")
              .text(
                  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas augue venenatis suscipit maximus. Maecenas vel volutpat nunc. Etiam volutpat ultricies ante a iaculis. Fusce ultrices eleifend ligula in maximus. Fusce commodo, mauris vitae consequat tincidunt, nunc massa pharetra ante, non interdum magna sapien vel tortor. Aliquam in ultrices odio. Phasellus ac ante sit amet purus efficitur tempus fermentum in erat. Nullam auctor lorem ut justo convallis vestibulum. Fusce consequat velit eget pharetra consequat. Integer vulputate nisl eu libero luctus, id consequat ipsum eleifend. Nam quis sodales neque. Nullam nec velit sed leo feugiat imperdiet.\n"
                      + "\n"
                      + "Praesent lacinia lorem quis mauris molestie, ut placerat nisi ultricies. Sed a fringilla mi. Ut ornare a lorem quis consectetur. Pellentesque id leo id odio accumsan egestas. Proin sollicitudin turpis orci, in tempus dolor eleifend dapibus. Aenean facilisis fringilla orci, vel facilisis nunc commodo in. Sed scelerisque lectus ac diam feugiat, sit amet condimentum enim imperdiet. Integer urna arcu, aliquet quis facilisis quis, faucibus quis lorem. Nam congue augue est, ac porttitor mauris vehicula ut. Phasellus sapien tortor, euismod non dui quis, vulputate auctor orci. Maecenas a lectus in felis tincidunt pulvinar. Praesent nec laoreet ante, in sollicitudin quam. Vestibulum convallis, ante sit amet consequat varius, urna dui sagittis odio, suscipit rutrum ipsum nisi non eros. Cras interdum mattis libero at posuere. Phasellus venenatis dui massa, sed egestas mauris porta id."))
      .build();
}
 

@OnCreateLayout
static Component onCreateLayout(ComponentContext c) {
  return Row.create(c)
      .child(
          Text.create(c)
              .textSizeSp(20)
              .text("This component has a composite path effect of discrete + corner"))
      .border(
          Border.create(c)
              .widthDip(YogaEdge.ALL, 20)
              .color(YogaEdge.LEFT, NiceColor.RED)
              .color(YogaEdge.TOP, NiceColor.ORANGE)
              .color(YogaEdge.RIGHT, NiceColor.GREEN)
              .color(YogaEdge.BOTTOM, NiceColor.BLUE)
              .dashEffect(new float[] {10f, 5f}, 0f)
              .radiusDip(20f)
              .build())
      .build();
}
 

@OnCreateLayout
static Component onCreateLayout(ComponentContext c, @State boolean shouldShowItem) {
  return Row.create(c)
      .paddingDip(YogaEdge.ALL, 20)
      .child(Row.create(c).heightDip(SIZE_DP).widthDip(SIZE_DP).backgroundColor(Color.RED))
      .child(
          shouldShowItem
              ? Row.create(c)
                  .heightDip(SIZE_DP)
                  .widthDip(SIZE_DP)
                  .backgroundColor(Color.BLUE)

                  // Disappearing items require a transition key and a key
                  .transitionKey(BLUE_BOX_TRANSITION_KEY)
                  .key(BLUE_BOX_TRANSITION_KEY)
              : null)
      .child(Row.create(c).heightDip(SIZE_DP).widthDip(SIZE_DP).backgroundColor(Color.RED))
      .clickHandler(AppearDisappearTransition.onClick(c))
      .build();
}
 

@OnCreateLayout
static Component onCreateLayout(ComponentContext c, @State boolean shouldAlignStart) {
  return Column.create(c)
      .paddingDip(YogaEdge.ALL, 20)
      .child(
          Row.create(c)
              .alignItems(shouldAlignStart ? YogaAlign.FLEX_START : YogaAlign.FLEX_END)
              .heightDip(SIZE_DP)
              .widthDip(SIZE_DP)
              .backgroundColor(Color.RED)
              .alpha(
                  new DynamicValue<Float>(.99f)) // Set a dynamic value to force it to be mounted
              .child(Row.create(c).heightDip(10).widthDip(10).backgroundColor(Color.BLUE)))
      .clickHandler(SingleComponentMovesTransition.onClick(c))
      .build();
}
 

@Test
public void testNestedIncrementalMountDisabled() {
  LithoView view =
      ComponentTestHelper.mountComponent(
          mComponentContext,
          RecyclerCollectionComponent.create(mComponentContext)
              .section(
                  SingleComponentSection.create(new SectionContext(mComponentContext))
                      .component(
                          Row.create(mComponentContext)
                              .viewTag("rv_row")
                              .heightDip(100)
                              .widthDip(100))
                      .build())
              .build(),
          false,
          false);

  final LithoView childView = (LithoView) findViewWithTag(view, "rv_row");
  assertThat(childView).isNotNull();
  assertThat(childView.getComponentTree().isIncrementalMountEnabled()).isFalse();
}
 

@OnCreateLayout
static Component onCreateLayout(ComponentContext c) {
  return Row.create(c)
      .child(Text.create(c).textSizeSp(20).text("This component has varying corner radii"))
      .border(
          Border.create(c)
              .widthDip(YogaEdge.ALL, 3)
              .color(YogaEdge.LEFT, Color.BLACK)
              .color(YogaEdge.TOP, NiceColor.GREEN)
              .color(YogaEdge.BOTTOM, NiceColor.BLUE)
              .color(YogaEdge.RIGHT, NiceColor.RED)
              .radiusDip(Corner.TOP_LEFT, 10)
              .radiusDip(Corner.TOP_RIGHT, 5)
              .radiusDip(Corner.BOTTOM_RIGHT, 20)
              .radiusDip(Corner.BOTTOM_LEFT, 30)
              .build())
      .build();
}
 

private static Component affectedParent(ComponentContext c, boolean flag3) {
  return Row.create(c)
      .justifyContent(YogaJustify.CENTER)
      .child(
          Row.create(c)
              .transitionKey(TRANSITION_KEY_CONTAINER_3)
              .transitionKeyType(Transition.TransitionKeyType.GLOBAL)
              .heightDip(60 + 2 * 8)
              .paddingDip(YogaEdge.ALL, 8)
              .backgroundColor(Color.LTGRAY)
              .child(
                  Column.create(c)
                      .transitionKey(TRANSITION_KEY_CHILD_3_1)
                      .transitionKeyType(Transition.TransitionKeyType.GLOBAL)
                      .widthDip(60 * (flag3 ? 1 : 2))
                      .backgroundColor(Color.YELLOW))
              .clickHandler(BoundsAnimationComponent.onThirdComponentClick(c)))
      .build();
}
 

@OnCreateLayout
static Component onCreateLayout(
    ComponentContext c,
    @Prop String messageText,
    @Prop String timestamp,
    @Prop(optional = true) boolean seen,
    @State Boolean expanded) {
  final boolean isExpanded = expanded == null ? false : expanded;
  return Column.create(c)
      .paddingDip(YogaEdge.TOP, 8)
      .transitionKey(ExpandableElementUtil.TRANSITION_MSG_PARENT)
      .transitionKeyType(Transition.TransitionKeyType.GLOBAL)
      .clickHandler(ExpandableElementOther.onClick(c))
      .child(ExpandableElementUtil.maybeCreateTopDetailComponent(c, isExpanded, timestamp))
      .child(
          Column.create(c)
              .transitionKey(ExpandableElementUtil.TRANSITION_TEXT_MESSAGE_WITH_BOTTOM)
              .transitionKeyType(Transition.TransitionKeyType.GLOBAL)
              .child(
                  Row.create(c)
                      .paddingDip(YogaEdge.END, 5)
                      .child(createSenderTile(c))
                      .child(createMessageContent(c, messageText)))
              .child(ExpandableElementUtil.maybeCreateBottomDetailComponent(c, isExpanded, seen)))
      .build();
}
 

@OnCreateLayout
static Component onCreateLayout(
    ComponentContext c,
    @State boolean state,
    @State boolean running,
    @State Set<String> runningAnimations) {
  return Column.create(c)
      .child(Row.create(c).child(Text.create(c).text(running ? "RUNNING" : "STOPPED")))
      .child(
          Column.create(c)
              .alignItems(!state ? YogaAlign.FLEX_START : YogaAlign.FLEX_END)
              .child(
                  Text.create(c)
                      .heightDip(50)
                      .widthDip(50)
                      .text(runningAnimations.toString())
                      .backgroundColor(Color.parseColor("#ee1111"))
                      .alpha(!state ? 1.0f : 0.2f)
                      .transitionKey(TRANSITION_KEY)
                      .build()))
      .clickHandler(BlocksSameTransitionKeyComponent.onClick(c))
      .build();
}
 

@OnCreateLayout
static Component onCreateLayout(
    ComponentContext c,
    @State String selection,
    @State boolean isShowingDropDown,
    @Prop(resType = ResType.DIMEN_TEXT, optional = true) float selectedTextSize,
    @Prop(resType = ResType.COLOR, optional = true) int selectedTextColor,
    @Prop(resType = ResType.DRAWABLE, optional = true) @Nullable Drawable caret) {
  caret = caret == null ? new CaretDrawable(c.getAndroidContext(), DEFAULT_CARET_COLOR) : caret;
  selectedTextSize =
      selectedTextSize == -1
          ? spToPx(c.getAndroidContext(), DEFAULT_TEXT_SIZE_SP)
          : selectedTextSize;

  return Row.create(c)
      .minHeightDip(SPINNER_HEIGHT)
      .justifyContent(YogaJustify.SPACE_BETWEEN)
      .paddingDip(START, MARGIN_SMALL)
      .backgroundAttr(android.R.attr.selectableItemBackground)
      .clickHandler(Spinner.onClick(c))
      .child(createSelectedItemText(c, selection, (int) selectedTextSize, selectedTextColor))
      .child(createCaret(c, caret, isShowingDropDown))
      .accessibilityRole(AccessibilityRole.DROP_DOWN_LIST)
      .build();
}
 

static Component.Builder createMessageContent(ComponentContext c, String messageText) {
  return Row.create(c)
      .paddingDip(YogaEdge.ALL, 8)
      .marginDip(YogaEdge.ALL, 8)
      .background(ExpandableElementUtil.getMessageBackground(c, 0xFFEAEAEA))
      .child(Text.create(c).textSizeDip(18).textColor(Color.BLACK).text(messageText));
}
 

@OnCreateLayout
static Component onCreateLayout(
    ComponentContext c,
    @State boolean favourited) {
  return Row.create(c)
      .backgroundRes(favourited ? star_on : star_off)
      .widthDip(32)
      .heightDip(32)
      .clickHandler(FavouriteButton.onClick(c))
      .build();
}
 

@OnCreateLayout
static Component onCreateLayout(ComponentContext c, @State boolean left) {
  return Column.create(c)
      .alignItems(left ? YogaAlign.FLEX_START : YogaAlign.FLEX_END)
      .child(
          Row.create(c)
              .heightDip(40)
              .widthDip(40)
              .backgroundColor(Color.parseColor("#ee1111"))
              .transitionKey("red")
              .build())
      .child(
          Row.create(c)
              .heightDip(40)
              .widthDip(40)
              .backgroundColor(Color.parseColor("#1111ee"))
              .transitionKey("blue")
              .build())
      .child(
          Row.create(c)
              .heightDip(40)
              .widthDip(40)
              .backgroundColor(Color.parseColor("#11ee11"))
              .transitionKey("green")
              .build())
      .clickHandler(LeftRightBlocksSequenceComponent.onClick(c))
      .build();
}
 

private Component getAnimatingXPropertyComponent() {
  return TestAnimationsComponent.create(mLithoViewRule.getContext())
      .stateCaller(mStateCaller)
      .transition(
          Transition.create(TRANSITION_KEY)
              .animator(Transition.timing(144))
              .animate(AnimatedProperties.X))
      .testComponent(
          new TestAnimationsComponentSpec
              .TestComponent() { // This could be a lambda but it fails ci.
            @Override
            public Component getComponent(ComponentContext componentContext, boolean state) {
              return Row.create(componentContext)
                  .heightDip(200)
                  .widthDip(200)
                  .justifyContent(state ? YogaJustify.FLEX_START : YogaJustify.FLEX_END)
                  .alignItems(state ? YogaAlign.FLEX_START : YogaAlign.FLEX_END)
                  .child(
                      Row.create(componentContext)
                          .heightDip(40)
                          .widthDip(40)
                          .backgroundColor(Color.parseColor("#ee1111"))
                          .transitionKey(TRANSITION_KEY)
                          .viewTag(TRANSITION_KEY)
                          .build())
                  .build();
            }
          })
      .build();
}
 

@Override
public Component getComponent(ComponentContext componentContext, boolean state) {
  return Column.create(componentContext)
      .alignItems(state ? YogaAlign.FLEX_START : YogaAlign.FLEX_END)
      .child(
          Row.create(componentContext)
              .heightDip(40)
              .widthDip(40)
              .backgroundColor(Color.parseColor("#ee1111"))
              .transitionKey(RED_TRANSITION_KEY)
              .viewTag(RED_TRANSITION_KEY)
              .build())
      .child(
          Row.create(componentContext)
              .heightDip(40)
              .widthDip(40)
              .backgroundColor(Color.parseColor("#11ee11"))
              .transitionKey(GREEN_TRANSITION_KEY)
              .viewTag(GREEN_TRANSITION_KEY)
              .build())
      .child(
          Row.create(componentContext)
              .heightDip(40)
              .widthDip(40)
              .backgroundColor(Color.parseColor("#1111ee"))
              .transitionKey(BLUE_TRANSITION_KEY)
              .viewTag(BLUE_TRANSITION_KEY)
              .build())
      .build();
}
 

@OnCreateLayout
static Component onCreateLayout(
    ComponentContext c,
    @Prop String messageText,
    @Prop String timestamp,
    @Prop(optional = true) boolean seen,
    @State Boolean expanded) {
  final boolean isExpanded = expanded == null ? false : expanded;
  return Column.create(c)
      .paddingDip(YogaEdge.TOP, 8)
      .transitionKey(TRANSITION_MSG_PARENT)
      .transitionKeyType(Transition.TransitionKeyType.GLOBAL)
      .clickHandler(ExpandableElementMe.onClick(c))
      .child(ExpandableElementUtil.maybeCreateTopDetailComponent(c, isExpanded, timestamp))
      .child(
          Column.create(c)
              .transitionKey(ExpandableElementUtil.TRANSITION_TEXT_MESSAGE_WITH_BOTTOM)
              .transitionKeyType(Transition.TransitionKeyType.GLOBAL)
              .child(
                  Row.create(c)
                      .justifyContent(YogaJustify.FLEX_END)
                      .paddingDip(YogaEdge.START, 75)
                      .paddingDip(YogaEdge.END, 5)
                      .child(createMessageContent(c, messageText)))
              .child(ExpandableElementUtil.maybeCreateBottomDetailComponent(c, isExpanded, seen)))
      .build();
}
 

@OnCreateLayout
static Component onCreateLayout(ComponentContext c, @Prop boolean shouldWrapInView) {
  return Row.create(c)
      .child(
          (shouldWrapInView ? Column.create(c).wrapInView() : Column.create(c))
              .backgroundColor(Color.RED)
              .foregroundColor(Color.GREEN)
              .child(Text.create(c).text("Hello")))
      .child(
          (shouldWrapInView ? Column.create(c).wrapInView() : Column.create(c))
              .backgroundColor(Color.RED)
              .foregroundColor(Color.GREEN)
              .child(Text.create(c).text("world")))
      .build();
}
 

@OnCreateLayout
static Component onCreateLayout(ComponentContext c, @State int state, @State boolean running) {
  final boolean redLeft = state == 0 || state == 4 || state == 5;
  final boolean blueLeft = state == 0 || state == 1 || state == 5;
  final boolean greenLeft = state == 0 || state == 1 || state == 2;
  return Column.create(c)
      .child(Row.create(c).child(Text.create(c).text(running ? "RUNNING" : "STOPPED")))
      .child(
          Column.create(c)
              .alignItems(redLeft ? YogaAlign.FLEX_START : YogaAlign.FLEX_END)
              .child(
                  Row.create(c)
                      .heightDip(40)
                      .widthDip(40)
                      .backgroundColor(Color.parseColor("#ee1111"))
                      .transitionKey(TRANSITION_KEY_RED)
                      .build()))
      .child(
          Column.create(c)
              .alignItems(blueLeft ? YogaAlign.FLEX_START : YogaAlign.FLEX_END)
              .child(
                  Row.create(c)
                      .heightDip(40)
                      .widthDip(40)
                      .backgroundColor(Color.parseColor("#1111ee"))
                      .transitionKey(TRANSITION_KEY_BLUE)
                      .build()))
      .child(
          Column.create(c)
              .alignItems(greenLeft ? YogaAlign.FLEX_START : YogaAlign.FLEX_END)
              .child(
                  Row.create(c)
                      .heightDip(40)
                      .widthDip(40)
                      .backgroundColor(Color.parseColor("#11ee11"))
                      .transitionKey(TRANSITION_KEY_GREEN)
                      .build()))
      .clickHandler(ToggleMoveBlocksExampleComponent.onClick(c))
      .build();
}
 

static Component.Builder createMessageContent(ComponentContext c, String messageText) {
  return Row.create(c)
      .paddingDip(YogaEdge.ALL, 8)
      .marginDip(YogaEdge.ALL, 8)
      .background(ExpandableElementUtil.getMessageBackground(c, 0xFF0084FF))
      .child(Text.create(c).textSizeDip(18).textColor(Color.WHITE).text(messageText));
}