Making HeaderView span width like buttons in sample app

[Winghin2517]

I see that in our MainActivity, we have created a GridLayoutManager with spanCount = 2.

    EpoxyRecyclerView recyclerView = (EpoxyRecyclerView) findViewById(R.id.recycler_view);
    recyclerView.setLayoutManager(new GridLayoutManager(this, 2));

Now, this causes the "ADD", "CLEAR","SHUFFLE" and "CHANGE" buttons to each take up half the size of the screen.

However, the headerview does not respect the spanCount = 2 at all and fills up the fill width of the screen.

I created a duplicated headerview and called it headerview2:

@ModelView(autoLayout = ModelView.Size.WRAP_WIDTH_WRAP_HEIGHT)
public class HeaderView2 extends LinearLayout {

    @BindView(R.id.title_text)
    TextView title;
    @BindView(R.id.caption_text) TextView caption;

    public HeaderView2(Context context) {
        super(context);
        init();
    }

//  @Style(isDefault = true)
//  static void headerStyle(HeaderViewStyleApplier.StyleBuilder builder) {
//
//  }

    private void init() {
        setOrientation(VERTICAL);
        inflate(getContext(), R.layout.view_header, this);
        ButterKnife.bind(this);
    }

    @TextProp(defaultRes = R.string.app_name)
    public void setTitle(CharSequence title) {
        this.title.setText(title);
    }

    @ModelProp(options = Option.GenerateStringOverloads)
    public void setCaption(CharSequence caption) {
        this.caption.setText(caption);
    }
}

I then added it to the SampleController.java:

  @Override
  protected void buildModels(List<CarouselData> carousels) {
      addButton
              .textRes(R.string.button_add)
              .clickListener((model, parentView, clickedView, position) -> {
                  callbacks.onAddCarouselClicked();
              });

      clearButton
              .textRes(R.string.button_clear)
              .clickListener(v -> callbacks.onClearCarouselsClicked())
              .addIf(carousels.size() > 0, this);
      header
              .title("Header 1")
              .caption("This is heading number 1");

      header2
              .title("Header 2")
              .caption("This is heading number 2");
    // "addTo" is not needed since implicit adding is enabled
    // (https://github.com/airbnb/epoxy/wiki/Epoxy-Controller#implicit-adding)

    shuffleButton
        .textRes(R.string.button_shuffle)
        .clickListener(v -> callbacks.onShuffleCarouselsClicked())
        .addIf(carousels.size() > 1, this);

    changeColorsButton
        .textRes(R.string.button_change)
        .clickListener(v -> callbacks.onChangeAllColorsClicked())
        .addIf(carousels.size() > 0, this);

    for (int i = 0; i < carousels.size(); i++) {
      CarouselData carousel = carousels.get(i);
      add(new CarouselModelGroup(carousel, callbacks));
    }
  }

This is the end result:

You can see that the Header 1 and Header 2 do not respect the grid spanCount. Can you please tell me why and how can I make it respect the grid spanCount?

[Winghin2517]

I found that if you sent the @MoelView to fullSpan=false, it will do what I want.

@ModelView(autoLayout = ModelView.Size.WRAP_WIDTH_WRAP_HEIGHT, fullSpan=false)